ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve accessibility when assigning students 

fixes OUT-389

1. Indicate to non-visual users which students are currently assigned to an
assignment when they navigate to the delete label of a button.
2. Customized the aria label associated with the Assign To auto-complete
search field to improve clarity and conciseness.
3. When navigating through assigned students, read the button label first
before reading the delete label.
4. Added an instructional element before reaching the Assign To field that
is spoken to screen reader users that are only using directional keys to
navigate with.

test plan:
 - enable a screen reader
 - open the new assignment page
 - using directional keys only, navigate to the "Assign To" label
 - press the down arrow key and confirm that the screen reader speaks
   "Use this list to remove...". You may need to press the down
   arrow key again to speak the complete message.
 - press the down arrow key and confirm that the first label is read
 - press the down arrow key and confirm that the delete label is read,
   which starts off with "Currently assigned to ... click to remove"
 - starting in the Moderated Grading section, using the tab key, tab
   to the Assign section
 - confirm that when focus is on the delete portion of the Everyone
   element, that the screen reader reads "Currently assigned to ..."
 - press the tab key to navigate to the auto-complete portion of the
   field
 - confirm that the screen reader speaks "Add students by searching ..."

Change-Id: I2be0fd4662bd0d196f27d1dbb59b09edb7be9e3a
Reviewed-on: https://gerrit.instructure.com/93517
Reviewed-by: Christian Prescott <cprescott@instructure.com>
Tested-by: Jenkins
QA-Review: Cemal Aktas <caktas@instructure.com>
Product-Review: Nathan Rogowski <nathan@instructure.com>
This commit is contained in:
Augusto Callejas 2016-10-17 12:17:42 -10:00
parent aa9f1734a0
commit 2a6e0c3433
3 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/jsx/due_dates/DueDateTokenWrapper.jsx
View File

@ -94,6 +94,10 @@ define([
this.clearUserInput()
},
overrideTokenAriaLabel(tokenName) {
return I18n.t('Currently assigned to %{tokenName}, click to remove', {tokenName: tokenName});
},
handleTokenRemove(token) {
this.props.handleTokenRemove(token)
},
@ -313,11 +317,19 @@ define([
aria-label = 'Assign to'>
{I18n.t("Assign to")}
</div>
<div id="ic-tokeninput-description"
className = "screenreader-only">
{ I18n.t('Use this list to remove assigned students. Add new students with combo box after list.') }
</div>
<TokenInput menuContent = {this.optionsForMenu()}
selected = {this.props.tokens}
onInput = {this.handleInput}
onSelect = {this.handleTokenAdd}
tokenAriaFunc = {this.overrideTokenAriaLabel}
onRemove = {this.handleTokenRemove}
combobox-aria-label = { I18n.t('Add students by searching by name, course section or group.' +
' After entering text, navigate results by using the down arrow key.' +
' Select a result by using the Enter key.') }
value = {true}
showListOnFocus = {true}
ref = "TokenInput" />

2
package.json
View File

@ -95,7 +95,7 @@
"react-redux": "4.4.5",
"react-select-box": "https://github.com/instructure-react/react-select-box.git#b1ddd39223d48793fbe3dc4e87aca00d57197b5f",
"react-tabs": "0.8.2",
"react-tokeninput": "2.2.0",
"react-tokeninput": "2.2.2",
"react-tray": "2.0.4",
"redux": "3.5.2",
"redux-actions": "0.11.0",

3
spec/coffeescripts/jsx/due_dates/DueDateTokenWrapperSpec.coffee
View File

@ -124,3 +124,6 @@ define [
@DueDateTokenWrapper.handleInput("scipio")
ok !@DueDateTokenWrapper.hidingValidMatches()
test 'overrideTokenAriaLabel method', ->
equal @DueDateTokenWrapper.overrideTokenAriaLabel('group X'), "Currently assigned to group X, click to remove"