Skip to content

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

@JoshuaKGoldberg

Description

@JoshuaKGoldberg

Have you 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

Reproducible demo

typescript-eslint/typescript-eslint#4362

Self-service

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugAn error in the Docusaurus core causing instability or issues with its executionstatus: accepting prThis issue has been accepted, and we are looking for community contributors to implement this

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      pFad - Phonifier reborn

      Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

      Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


      Alternative Proxies:

      Alternative Proxy

      pFad Proxy

      pFad v3 Proxy

      pFad v4 Proxy