use complementary landmarks on Tags page

[metamoni]

What type of PR is this? (check all applicable)

• Refactor
• Feature
• Bug Fix
• Optimization
• Documentation Update

Description

This ticket aims to improve screen reader navigation on Tag pages by wrapping the two sidebars in landmarks.

Related Tickets & Documents

#14838

QA Instructions, Screenshots, Recordings

Screen reader QA steps for Mac users

• navigate to a tag page (for example: "http://localhost:3000/t/beginners")
• start VoiceOver with cmd + F5
• press control + option + U to open the Rotor
• press the Right arrow key until you get to "Landmarks"
• verify that you have two "complementary" landmarks available, corresponding to each sidebar

Axe DevTools QA steps

• navigate to a tag page (for example: "http://localhost:3000/t/beginners")
• go to your Axe DevTools and scan the page
• verify that the list of errors doesn't include "All page content should be contained by landmarks"

Screen.Recording.2021-10-02.at.11.49.57.mov

UI accessibility concerns?

None

Added/updated tests?

• Yes
• No, and this is why: there are no tests to update for this simple HTML change
• I need help with writing tests

[Forem core team only] How will this change be communicated?

Will this PR introduce a change that impacts Forem members or creators, the
development process, or any of our internal teams? If so, please note how you
will share this change with the people who need to know about it.

• I've updated the Developer Docs or
  Storybook (for Crayons components)
• This PR changes the Forem platform and our documentation needs to be
  updated. I have filled out the
  Changes Requested
  issue template so Community Success can help update the Admin Docs
  appropriately.
• I've updated the README or added inline documentation
• I've added an entry to
  CHANGELOG.md
• I will share this change in a Changelog
  or in a forem.dev post
• I will share this change internally with the appropriate teams
• I'm not sure how best to communicate this change and need help
• This change does not need to be communicated, and this is why not: please
  replace this line with details on why this change doesn't need to be
  shared

[github-actions]

Thank you for opening this PR! We appreciate you!

For all pull requests coming from third-party forks we will need to
review the PR before we can process it through our CI pipelines.

A Forem Team member will review this contribution and get back to
you as soon as possible!

[nickytonline]

Thanks for making the site more accessible @metamoni! 🚀

[nickytonline]

🚀