aXe / accessibility: missing region around Skip link in theme-classic

[JoshuaKGoldberg]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

aXe 4.1: region specifies:

Ensure all content is contained within a landmark region, designated with HTML5 landmark elements and/or ARIA landmark regions.

...

Navigating a web page is far simpler for screen reader users if the content splits between multiple high-level sections. Content outside of sections is difficult to find, and the content's purpose may be unclear.

The Skip to main content link is an excellent + necessary thing to have on a webpage (♥) but is itself not in any region right now. That's causing aXe to log a failure when run with Enable Best Practices enabled.

Steps to reproduce

1. Create a new Docusaurus site with the classic theme, such as today's https://typescript-eslint.io
2. Run aXe on it such as with the aXe browser extensions and Settings > Enable Best Practices enabled

Alternately, see these cypress-axe failures: https://github.com/typescript-eslint/typescript-eslint/runs/4685834360?check_suite_focus=true

"html": "<div><a href=\"#\" class=\"skipToContent__-_-node_modules-@docusaurus-theme-classic-lib-next-theme-SkipToContent-styles-module\">Skip to main content</a></div>",
"target": [
    "#__docusaurus > div:nth-child(2)"
],
"failureSummary": "Fix any of the following:\n  Some page content is not contained by landmarks"

Expected behavior

Some kind of role wrapped around the skip-to-main-content link.

For example, on codecademy.com/docs, we use a role="region".

Actual behavior

No region around the link.

Your environment

• Public source code: tests: add cypress-axe test for homepage typescript-eslint/typescript-eslint#4362
• Public site URL: https://typescript-eslint.io
• Docusaurus version used: 2.0.0-beta.14
• Environment name and version (e.g. Chrome 89, Node.js 16.4): N/A
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): N/A

Reproducible demo

typescript-eslint/typescript-eslint#4362

Self-service

• I'd be willing to fix this bug myself.

[Josh-Cena]

Makes sense! Feel free to send a PR😉

There seems to be a history of this. See #3650, #4162 @lex111 any particular reason why #4162 reverted the nav landmark back to a plain div?

[lex111]

@Josh-Cena probably did not find appropriate landmark for that element (the choice of nav was wrong), and did not know about region role, so this is good fix 👍