Skip to content

Screen reader announces incorrect label for the 'Expand/Collapse (Chevron)' button as 'Toggle the collapsible sidebar category 'Components'. #9162

@msftedad

Description

@msftedad

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

Screen reader announces incorrect label for the 'Expand/Collapse (Chevron)' button as 'Toggle the collapsible sidebar category 'Components'.

User is not able to know role of the button.

Screen reader should announce about the group associated with suggestions available while navigating along the suggestions.
i.e., When user enter the suggestions group, screen reader should announce as 'and along .

User with visual impairment who rely on screen reader will face difficulties if screen reader announces incorrect information if incorrect label for the 'Expand/Collapse (Chevron)' button.

Reproducible demo

No response

Steps to reproduce

Pre-Requisites: Scan off mode.

Repro Steps:

  1. Open https://www.fast.design/ URL.
  2. Navigate to link ‘Documentation’ and invoke it.
  3. Navigate to 'Expand/Collapse (Chevron)' button and activate it using 'Enter' key and listen to screen reader announcement.

Expected behavior

Name property should be defined as 'Expand/Collapse Using the Components' and screen reader should announce as 'Expand using the Components' button when expanded and viceversa.

(or)

Name property can be defined as 'Using the Components' and Aria Expand/collapse state should be defined.

On navigating screen reader should announce as 'Using the Components, button, Expanded' and viceversa.

Actual behavior

Screen reader announces incorrect label for the 'Expand/Collapse (Chevron)' button as 'Toggle the collapsible sidebar category 'Components'.

Your environment

  • Public source code:
  • Public site URL: https://www.fast.design/
  • Docusaurus version used: Version: 2.4.1
  • Environment name and version (e.g. Chrome 89, Node.js 16.4): Microsoft Edge
    Version 114.0.1823.86 (Official build) (64-bit)
  • Operating system and version (e.g. Ubuntu 20.04.2 LTS): OS Name: Microsoft Windows 11 Enterprise
    Version: 10.0.22621 Build 22621

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 executiondomain: a11yRelated to accessibility concerns of the default theme

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions