a11y workaround assignment "assign to"

The assignment "Assign to" field is implemented in a react app that
utilizes react-tokeninput. When focusing on the field, focus jumps to
remove button of last entered asignee, which prevents non-visual users
from knowing what the field is for.

I attempted a few different approaches to solving this problem using the
react-tokeninput component as it exists now, but no dice. We should add
functionality to the component to hint context on focus, but for now, I
added tabindex on the label field above the field to cue context.

Test Plan:
  * Open assignment edit page
  * Verify that tab stops on "assign to" field, and various screen
    readers read text properly

closes CNVS-23041

Change-Id: I76d879eceee46f691c712293ba44e089abe31e32
Reviewed-on: https://gerrit.instructure.com/63952
Reviewed-by: Matthew Wheeler <mwheeler@instructure.com>
Tested-by: Jenkins
QA-Review: Adam Stone <astone@instructure.com>
Product-Review: Aaron Cannon <acannon@instructure.com>
This commit is contained in:
Jonathan Featherstone 2015-09-24 11:32:43 -06:00
parent addd29c74d
commit e2d51dca90
1 changed files with 1 additions and 0 deletions

View File

@ -261,6 +261,7 @@ define([
data-row-identifier = {this.rowIdentifier()}
onKeyDown = {this.suppressKeys}>
<div className = "ic-Label"
tabIndex = '0'
title = 'Assign to'
aria-label = 'Assign to'>
{I18n.t("Assign to")}