-
-
Notifications
You must be signed in to change notification settings - Fork 9.3k
Description
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
oryarn 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
- Create a new Docusaurus site with the classic theme, such as today's https://typescript-eslint.io
- 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.