Uploaded image for project: 'Sakai'
  1. Sakai
  2. SAK-42737

Assign Groups Component has Keyboard Accessibility issues

    XMLWordPrintable

    Details

    • Test Plan:
      Hide

      Test Steps1:

      1. Tab to the Access Radio Buttons
      2. Press down arrow twice to select the "Display this announcement to selected groups only" option. Content appears including repeated "Display this announcement to selected groups only" text (this text is redundant to the above text and could be altered to provide more clear direction of what needs to happen with the component) and the select box component. The user is not notified in of the change text before the interaction, focus is not moved to the new content when it occurs, and change is not announced via an Aria-live Region. One of these should occur to provide a notification of changes to the page once the radio button has focus.

      Test steps 2:

      1. Tab to the Access Radio Buttons
      2. Press down arrow twice to select the "Display this announcement to selected groups only" option.
      3. Press Tab Key. Visual Focus disappears
      4. Press Tab key. Visual Focus appears on the Select box.

       

      Show
      Test Steps1: Tab to the Access Radio Buttons Press down arrow twice to select the "Display this announcement to selected groups only" option. Content appears including repeated "Display this announcement to selected groups only" text (this text is redundant to the above text and could be altered to provide more clear direction of what needs to happen with the component) and the select box component. The user is not notified in of the change text before the interaction, focus is not moved to the new content when it occurs, and change is not announced via an Aria-live Region. One of these should occur to provide a notification of changes to the page once the radio button has focus. Test steps 2: Tab to the Access Radio Buttons Press down arrow twice to select the "Display this announcement to selected groups only" option. Press Tab Key. Visual Focus disappears Press Tab key. Visual Focus appears on the Select box.  

      Description

      Parts of the select box component are not keyboard accessible. This being so we did not pass this on to our screen reader tester though some comments mention screen reader needs.

      1.  The radio button for "Display this announcement to selected group" initiates an unexpected change in content and does not provide notification of the change ([WCAG 2.0/1 4.1.2|https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html]). 
      2. When navigating to the select box there is an element which is in the tab order but does not have keyboard focus. Nothing happens when the tab focus is set and I press the enter key or the space key.  
      3. The Search Group Text input field and the X icon are not accessible with a keyboard
      4. The Search Group Text input does not have a visible descriptive label. Placeholder text is not a sufficient label because the placeholder text disappears once text is typed inside. The magnifying glass icon does not provide text representation of the elements purpose. 
      5. Once the component is open a user can only use the arrow keys to navigate the available options (not the Search text field or the x icon). This may be confusing for some users expecting to tab into the next element. Pressing tab move focus away and closes the component.
        1. Selecting the check boxes for each group changes the content in the select box above the list of groups. This is not disclosed to the users (see #1 above). Once the component closes a keyboard only or screen reader user will continue to navigate down the page and most likely miss the changed content. 
      6. The X icon does not clearly or programmatic label to describe that its function is to clear the search form, not close the component. Other X icons are used across Sakai to close tools. This can cause confusion as users are expecting to close the component or nothing happens if there isn't an input in the search box.

        Gliffy Diagrams

          Attachments

            Activity

              People

              • Assignee:
                maintenanceteam Core Team
                Reporter:
                jbbeth1 Jen Bethmann
              • Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:

                  Git Source Code