Resource card headings for screen reader navigation

[jonkafton]

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/8557

Description (What does it do?)

Adds the ARIA heading role to resource card titles to they are treated as heading elements and navigable by screen reader users.

The titles are links, so we don't want to replace them with heading elements as they then would not be discoverable as links.

Instead, we're adding an additional span element with the heading role and aria-level.

Cards within carousels use the next heading level down from the carousel section title.

Elsewhere we set to the lowest level, H6. We know there are no subheadings, but it's challenging to reliably determine the next level up on the page in all instances to avoid level gaps.

How can this be tested?

VoiceOver on Mac:

• Start VoiceOver with cmd+F5.
• On pages with resource cards (home page carousels, resource drawers, search and channel pages).
• Press ctrl+opt+cmd+H to navigate headings.
  • Ensure that carousel card title are focused and announced.
• Press ctrl+opt+U to open the rotor.
  • Use left/right arrows to cycle through the element type lists.
  • Ensure card titles appear in the headings list. If they are in a carousel, ensure that they are a level down from the carousel section title.
  • Ensure the car titles appear as links in the links list.
• cmd+F5 to stop VoiceOver.
• Info: https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts

NVDA on Windows:

• Download from https://www.nvaccess.org/download/ and install
• Press H to navigate headings.
  • Carousel titles should be announced with "clickable".
  • Headings a specific levels can also be navigated by pressing 1-6.
• Press Insert+F7 to show element lists. I'm using Parallels on Mac. Fn+enter is mapped to the insert key.
  • Select headings and check that the card headings appear at the expected level.
  • Select links and check that the card heading appear as links.
• Info: https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts

JAWS on Windows:

• Download from https://support.freedomscientific.com/Downloads/JAWS and install.
• Press H to navigate headings.
  • Ensure that carousel card title are focused and announced.
• Press Insert+F6 to open the headings list and Insert+F7 to open the links list.
  • Check that the card titles appear in both.
• Info: https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts

[ChristopherChudzicki]

Suggestion: It would be straightforward to give assertHeadings a maxLevel opt. That might be a more transparent approach.

[ChristopherChudzicki]

Eh, I guess that doesn't help here actually, since below we do test for h3

[ChristopherChudzicki]

👍 This is working well. I left a few suggestions.

I do think the LinkableTitle change is worth making and the SearchDisplay change.