Uploaded image for project: 'Sakai'
  1. Sakai
  2. SAK-41290 gradebook, accessibility: Multiple Gradebook accessibility issues.
  3. SAK-33744

Apply keyboard navigation to GB column headers and cell menus

    XMLWordPrintable

    Details

    • Test Plan:
      Hide

      Note: All navigation should be tested with a keyboard.  Keyboard testing guide listing controls here: https://webaim.org/techniques/keyboard/

      Testing steps:

      1. Create a Gradebook with at least two categories. Make sure that when editing Settings, all items can be edited with keyboard only.
      2. Use the tab key to navigate from the top of the page to buttons such as View Columns, Item Order, etc.
      3. Select each button and be sure you can interact with all elements the buttons open using standard keyboard commands (Tab, Shift-Tab, up/down arrows, ESC).
        • Known issues with the buttons to reproduce in 19/20:
          1. Once a keyboard user selects Item Order, focus does not shift to the Item Order lightbox. They can neither interact with, nor close the window. Fixes required:
            • Focus needs to be placed in the window on opening it.
            • User must be able to access both tabs in the window and interact with controls to move items.
            • User must be able to ESC out of the window to close it.
            • After the window is closed (whether by updating order or exiting window), focus needs to return to the button.
          2. Bulk Edit window cannot be closed with ESC.
      4. After testing buttons, Tab key should place focus in the first column header (Students). Ensure you can select the column header to sort by Students' names ascending and descending.
      5. Next press of Tab key should select the arrow/menu in the cell. Ensure you can select all items in the menu and interact with each menu item (including lightbox windows) as needed using standard keyboard controls (Tab, Shift-Tab, spacebar, up/down arrows, ESC, etc.)
      6. Confirm same as 4-5 for other column headers, menus, and associated lightbox windows.
      7. Navigate to cell with first student's name.
      8. Select student's name to open the associated Grade Summary lightbox window.  Currently known issues with this window:
        • Focus is not staying within the window.
        • Window cannot be closed with ESC.
        • Many buttons/links cannot be accessed.
      9. After closing window, navigate to first cell in Sections column. Ensure you can select/activate the buttons to see full text of sections.
      10. Navigate to each grade cell and ensure you can enter grades and interact with all menu items, and associated lightbox windows.
      11. Now use Shift-Tab and make sure you can navigate backwards up the table/page and access all controls to be able to interact with them as needed.
      Show
      Note: All navigation should be tested with a keyboard.  Keyboard testing guide listing controls here:  https://webaim.org/techniques/keyboard/ Testing steps: Create a Gradebook with at least two categories. Make sure that when editing Settings , all items can be edited with keyboard only. Use the tab key to navigate from the top of the page to buttons such as View Columns , Item Order , etc. Select each button and be sure you can interact with all elements the buttons open using standard keyboard commands (Tab, Shift-Tab, up/down arrows, ESC). Known issues with the buttons to reproduce in 19/20: Once a keyboard user selects Item Order , focus does not shift to the Item Order lightbox. They can neither interact with, nor close the window. Fixes required: Focus needs to be placed in the window on opening it. User must be able to access both tabs in the window and interact with controls to move items. User must be able to ESC out of the window to close it. After the window is closed (whether by updating order or exiting window), focus needs to return to the button. Bulk Edit window cannot be closed with ESC. After testing buttons, Tab key should place focus in the first column header (Students). Ensure you can select the column header to sort by Students' names ascending and descending. Next press of Tab key should select the arrow/menu in the cell. Ensure you can select all items in the menu and interact with each menu item (including lightbox windows) as needed using standard keyboard controls (Tab, Shift-Tab, spacebar, up/down arrows, ESC, etc.) Confirm same as 4-5 for other column headers, menus, and associated lightbox windows. Navigate to cell with first student's name. Select student's name to open the associated Grade Summary lightbox window.  Currently known issues with this window: Focus is not staying within the window. Window cannot be closed with ESC. Many buttons/links cannot be accessed. After closing window, navigate to first cell in Sections column. Ensure you can select/activate the buttons to see full text of sections. Navigate to each grade cell and ensure you can enter grades and interact with all menu items, and associated lightbox windows. Now use Shift-Tab and make sure you can navigate backwards up the table/page and access all controls to be able to interact with them as needed.

      Description

      Currently, it doesn't look like you can access the GB table's column headers via keyboard navigation; you can only tab through the table's contents. Tabbing / shift-tabbing should allow you to highlight column headers, then use traditional keyboard commands to enter/exit the column header dropdown menus.

        Gliffy Diagrams

          Zeplin

            Attachments

              Issue Links

                Activity

                  People

                  Assignee:
                  maintenanceteam Core Team
                  Reporter:
                  kyle.blythe Kyle Blythe
                  Votes:
                  0 Vote for this issue
                  Watchers:
                  9 Start watching this issue

                    Dates

                    Created:
                    Updated:
                    Resolved:

                      Git Integration