FEATURE: screenreader landmarks for main, suggested topics (PR #9376)

Had screenreaders on my mind recently so did this while blocked on other stuff.

Testing info: https://www.scottohara.me/blog/2018/03/03/landmarks.html#using-screen-readers-to-navigate-landmarks

  • role=“main” is nicer to implement than a “jump to content” href, because you can jump from anywhere.
  • Suggested topics is also an important jump point that you should to be able to reach from anywhere in the topic, so give it role=“complementary”.
    • In order to avoid a boatload of attributeBindings, I moved the root element of the suggested-topics component into the template. Also, autoformat their hbs files.
  • Flag the modal root with aria-modal=true to avoid the screenreader accidentally escaping the modal. https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/ There’s no need to ever toggle the attribute to false, because we display:none the modal root when it’s closed. Except for maybe an iOS bug. I can’t test iOS VO, so going to wait for complaints.

GitHub

This seems good to me, but I am also far from an expert on these roles. Is there someone else on the team that can review this? @awesomerobot perhaps?

P.S. I have no clue how in the world we’re going to write a screenreader integration test or how that test would execute.

oh right, the other reference doc I used for this: https://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_page

My only question is about putting main on #main-outlet… should the main role skip general navigation like .list-controls on the topic list and skip right to the topic list content?

Though either way this is progress in the right direction and this simple addition is still an improvement!

I actually wasn’t touching the topic list here, just topic view. I’m not sure how to get the jump to the topic list content while also covering every non-topiclist page.