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

Gradebook usability regression - requiring special key commands to access menus

    XMLWordPrintable

    Details

    • Test Plan:
      Hide

      All testing steps should be completed using a keyboard only, preferably also tested with a screen reader.

      1. In a site with several students and Gradebook, go to Settings.
      2. Select Categories & Weighting, enable either Categories only or Categories & weighting, and create a couple categories.
      3. Add a gradebook item, but don't select a category for it. While creating the item, uncheck the Release item to students? option.
      4. Be able to use standard keyboard commands (e.g., tab, shift-tab) to access the header cell for your newly-created Gradebook item. Confirm you can get keyboard focus on the eyeball icon, and select it using Enter to read that it means the item is not released to students.
      5. Select the menu for that item.
      6. Select Edit Item Details.
      7. Assign the item to a category and Save Changes (don't release the item to students yet).
      8. Tabbing into the cells, enter grades for some of the students.
      9. Make one of the grades higher than the item's total point value (i.e., so it will generate an icon in the cell on saving the grade.) Make sure that when you navigate around after saving the grade, you can get keyboard focus on the icon within the cell and select it using the Enter key, to read the message that the student is getting extra credit for that grade.
      10. In one of the student's cells, use the menu for that cell to add a comment.
      11. Confirm that you can access the comment bubble after saving the comment, and read and edit the comment you entered.
      12. Navigate back up to the header cell for the item, select its menu, and Edit Item Details.
      13. Select to Release item to students? and Save Changes.
      14. Confirm that the eyeball icon is no longer present to tab into.
      15. Add another gradebook item.
      16. Access the header cell for the newly-added gradebook item (the one with no grades entered yet), select its menu, and Delete Item.
      17. Access the header cell for the Students column and confirm you can sort by student names ascending/descending by selecting Students, access the header cell menu, and select the option to Order by First Name.
      18. Access the header cell for the Course Grade column. Confirm you can access its menu and select options to Show Points and View Course Grade Statistics.
      19. Access a student's grade cell in the Course Grade column. Confirm you can access the cell's menu and select Course Grade Override.
      20. Use the pop-over window to enter a grade override and save it.
      21. Within the cell where you entered the grade override, confirm you can use the cell's menu to open the Course Grade Override Log and read the timestamp of the grade change, the override grade that was entered, and the name of the user who changed it.
      Show
      All testing steps should be completed using a keyboard only , preferably also tested with a screen reader. In a site with several students and Gradebook , go to Settings . Select Categories & Weighting , enable either Categories only or Categories & weighting , and create a couple categories. Add a gradebook item, but don't select a category for it. While creating the item, uncheck the Release item to students? option. Be able to use standard keyboard commands (e.g., tab , shift-tab ) to access the header cell for your newly-created Gradebook item. Confirm you can get keyboard focus on the eyeball icon, and select it using Enter to read that it means the item is not released to students. Select the menu for that item. Select Edit Item Details . Assign the item to a category and Save Changes (don't release the item to students yet). Tabbing into the cells, enter grades for some of the students. Make one of the grades higher than the item's total point value (i.e., so it will generate an icon in the cell on saving the grade.) Make sure that when you navigate around after saving the grade, you can get keyboard focus on the icon within the cell and select it using the Enter key, to read the message that the student is getting extra credit for that grade. In one of the student's cells, use the menu for that cell to add a comment. Confirm that you can access the comment bubble after saving the comment, and read and edit the comment you entered. Navigate back up to the header cell for the item, select its menu, and Edit Item Details . Select to Release item to students? and Save Changes . Confirm that the eyeball icon is no longer present to tab into. Add another gradebook item. Access the header cell for the newly-added gradebook item (the one with no grades entered yet), select its menu, and Delete Item . Access the header cell for the Students column and confirm you can sort by student names ascending/descending by selecting Students , access the header cell menu, and select the option to Order by First Name . Access the header cell for the Course Grade column. Confirm you can access its menu and select options to Show Points and View Course Grade Statistics . Access a student's grade cell in the Course Grade column. Confirm you can access the cell's menu and select Course Grade Override . Use the pop-over window to enter a grade override and save it. Within the cell where you entered the grade override, confirm you can use the cell's menu to open the Course Grade Override Log and read the timestamp of the grade change, the override grade that was entered, and the name of the user who changed it.

      Description

      As described in SAK-41209 and children, many keyboard and screen reader accessibility issues were introduced in Gradebook in Sakai 12-20. Per SAK-33744, the issues with keyboard navigation in Gradebook column headers and cell menus were resolved by adding a special key combination to access these headers and menus.

      However, even if the column headers could be reached using the key combination, it would still be a severe usability regression from Sakai 11, where all columns, icons/error messages, and menus could simply be accessed with the usual keystrokes most users would expect (tab, shift + tab, space, and arrow keys).

      Here is a 2-minute screencast video of me trying to create and then delete a gradebook item in Sakai 20. As shown in the video, it takes me 28 seconds before I manage to get to the Add Gradebook Item button.
      After creating the Gradebook item, and trying for another minute and a half, I never managed to get focus on the header cell for the Test item I created, so I could not edit the gradebook item's settings, delete it, etc.

      I even tried at one point around 1:36 in the video) to open the keyboard instructions and follow them - even the keyboard instructions panel is not accessible because it doesn't trap focus properly, and I can't use the scrollbar within it.

      This is unacceptable behavior from both a usability and accessibility perspective.

      Compare the bad behavior in Sakai 20 with this 40-second video of creating and deleting a gradebook item in Sakai 11. Note that the only issue I encountered with using Sakai 11 header cell/menu was a lack of visual keyboard focus on the menu when I focused on it at around 20 seconds in.

        Gliffy Diagrams

          Attachments

            Issue Links

            relates to

            Sub-task - The sub-task of the issue SAK-33744 Apply keyboard navigation to GB column headers and cell menus

            • Critical - Crashes, loss of data, severe memory leak, need functionality ASAP in production.
            • RESOLVED

              Activity

                People

                • Assignee:
                  maintenanceteam Core Team
                  Reporter:
                  rainribbon Tiffany Stull
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  4 Start watching this issue

                  Dates

                  • Created:
                    Updated:

                    Git Source Code