Address a11y bugs in side panel/resource navigation in lessons and quizzes

[marcellamaki]

Originally posted by @radinamatic in #13060 (comment)

1. Sidebars MUST behave as full page modals (in mobile views they really are) and trap the focus within the sidebar until the user closes it. ✔
2. If the user workflow contains several views within the sidebar (for example while navigating back and forth through the folders), focus order should be logical: when user selects one folder and presses Enter to open and navigate within, the focus in the next step (view) should be placed on top of the sidebar (maybe the Search button), and not at the bottom (the Save & finish button).
   https://github.com/user-attachments/assets/f430fc29-220b-4733-a92e-bc721dcb4246

Now for the issues that do need to be fixed for this feature to be considered accessible:

1. Top left back button (left arrow icon) missing now has a label but it should be changed to Go back instead of just Back.

2. Select all checkbox is missing the visual focus outline when the state is half/partially checked.
   https://github.com/user-attachments/assets/8032b5e8-41e8-4cb7-82a9-f68d4ec7e223

   Outline to indicate that the Select all checkbox is in focus appears correctly for both the unchecked and fully checked states, and is missing ONLY if the state is partially checked. So to replicate it you will need to activate the checkbox for at least one of the resources and navigate back to the Select all checkbox. It is functional, and correctly announced by the screen reader, it just misses the outline (which is a barrier for sighted users who navigate by keyboard, if not for those who use the screen reader 🙂)

3. When one or more resources are selected, the link that appears at the bottom of the sidebar (N resources selected (...KB)) must be fully announced through the aria-live="polite" region, including the size of the resources (as of now it only state the number of selected resources).

4. Bookmark button still needs some a11y TLC:

   • when the resource is NOT bookmarked, button should have the label Save to bookmarks, instead of the Saved from bookmarks (string I'm not sure what does it even mean) ✔
   • when user clicks the button to bookmark the resource, that change of state is displayed visually by different icon, but those who cannot see are missing the action. We need to add the message/string Saved to bookmarks (can be visually hidden) that must also be announced through the aria-live="polite" region ✔
   • when the user has bookmarked the resource, the label for the button must change to Remove from bookmarks ✔
   • if/when the user decides to un-bookmark it, that change of state must also be announced by passing the Removed from bookmarks message through the aria-live="polite" region, alongside the icon change (string should probably need to be added to commonCoreStrings) ✔

   Maybe changing the Saved from bookmarks string that is not being used anywhere (and I have had it hidden on Crowdin for the last 2 releases) into Saved to bookmarks would help with this last point 🙂 ✔

[radinamatic]

5. Move up/down buttons (keyboard navigation alternative to drag and drop reordering) on the "selected resource review" step are not working. If it helps to simplify things, maybe we can skip the feature to reorder resources in this page, since the user still has the option to do it on the lesson summary page...? If they are adding resources in several steps/batches, saving in between, it would make more sense to reorder when they see ALL included resiurces. cc @jtamiace

   missing-back-button.mp4

6. If the user opens the resource preview from the above "selected resource review" step, there is no back button anymore in front of the Manage lesson resources heading. We should add it for consistency, and also because even though those who use the mouse can still easily click on the N resources selected (...KB) link at the bottom of the sidebar, keyboard navigation users would benefit from having a closer button to go back to the previous step.

[marcellamaki]

Re #5 yes let's not worry about the drag and drop in the shopping cart, and just remove it, since it can be re-ordered in the main page

[nucleogenesis]

Some of the reported items here were addressed in #13060 - see #13060 (comment)