Download content for the course 6.01sc-spring-2011, and place it inside your local content directory. This step is optional if you have your setup configured to fetch remote content.
In the course info sidebar, on the right, toggle the collapsible topics/subtopics.
Expected Behavior: No unexpected layout shifts occur.
Open your screen reading assistant (VoiceOver on Mac). Let it read the screen. (On Mac, you can use Ctrl + Option + A to start reading from the cursor position). Listen to the UI navbar on the left, and the topics section of the course info bar on the right. Expand items and listen to what the reader says when the items are expanded. Refer to the recording for more details.
Expected Behavior: The voice assistant's speech is comprehensible.
Expected Behavior: No decorative icon is spoken out loud.
Expected Behavior: Accessibility works the same on mobile screen.
Repeat step 7 but this time build the course for offline use and run it from disk.
What are the relevant tickets?
Closes https://github.com/mitodl/ocw-hugo-themes/issues/1220 Fixes https://github.com/mitodl/ocw-hugo-themes/issues/1237
Description (What does it do?)
This PR improves the accessibility of the sidebars. In general, this PR:
<a>
tags to<button>
s.<ul>
for topics in the course info bar.Screenshots (if appropriate):
https://github.com/mitodl/ocw-hugo-themes/assets/71316217/fa9893a5-6d74-4cd3-b644-56c4a8c49144
How can this be tested?
ocw-hugo-themes
directory.hussaintaj/1220/expandables
.Additional Context
Best read up on the source of it all https://github.com/mitodl/hq/issues/1918. In particular, this comment: https://github.com/mitodl/hq/issues/1918#issuecomment-1701002386