mitodl / ocw-hugo-themes

A Hugo theme for building OCW websites
BSD 3-Clause "New" or "Revised" License
5 stars 4 forks source link

feat: improve navbar and topics accessibility #1241

Closed HussainTaj-arbisoft closed 1 year ago

HussainTaj-arbisoft commented 1 year ago

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:

Screenshots (if appropriate):

https://github.com/mitodl/ocw-hugo-themes/assets/71316217/fa9893a5-6d74-4cd3-b644-56c4a8c49144

How can this be tested?

  1. 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.
  2. Navigate your local ocw-hugo-themes directory.
  3. Checkout branch hussaintaj/1220/expandables.
  4. Run
    yarn start course 6.01sc-spring-2011
  5. Open https://localhost:3000/.
  6. In the course info sidebar, on the right, toggle the collapsible topics/subtopics. Expected Behavior: No unexpected layout shifts occur.
  7. 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.
  8. Repeat step 7 but this time build the course for offline use and run it from disk.
    yarn build /absolute/path/6.01sc-spring-2011 /absolute/path/ocw-hugo-projects/ocw-course-v2/config-offline.yaml

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

github-actions[bot] commented 1 year ago

Netlify Deployments:
www: https://ocw-hugo-themes-www-pr-1241--ocw-next.netlify.app/
Course v2: https://ocw-hugo-themes-course-v2-pr-1241--ocw-next.netlify.app/