search

microsoft / rushstack-websites

Doc content for the Rush Stack websites.
Creative Commons Attribution 4.0 International
24 stars 72 forks source link

[TSDoc> Hamburger button]: Ensures every ARIA button, link and menu item has an accessible name (.waffle_FRnN) #221

Open Raisul123 opened 6 months ago

Raisul123 commented 6 months ago

Test Environment: OS Version: 24H2 (OS Build 26080.1400) Browser: Edge Dev Version 124.0.2450.2 (Official build) dev (64-bit) URL: https://tsdoc.org/ Screen reader: Narrator.

Repro Steps:

  1. Open the above URL in edge dev browser.
  2. Run Accessibility insights for web.
  3. Observe the issue.

Actual Result: link and menu item does not have accessible name.

Issue: Ensures every ARIA button, link and menu item has an accessible name (aria-command-name - https://dequeuniversity.com/rules/axe/4.7/aria-command-name?application=msftAI)

Expected Result: Ensures every ARIA button, link and menu item has an accessible name (aria-command-name - https://dequeuniversity.com/rules/axe/4.7/aria-command-name?application=msftAI)

How to fix: Fix any of the following: Element does not have text that is visible to screen readers. aria-label attribute does not exist or is empty. aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty. Element has no title attribute.

Snippet: div role="button" class="waffle_FRnN waffleInteraction_uHqh">

User Impact: Screen reader user will get impacted as user will not get the information of Hamburger button.

WCAG Reference Link: https://www.w3.org/WAI/WCAG21/Understanding/name-role-value

Have feedback to share on Bugs ? please tag bug as “A11yRCA” and add your feedback in the comment section

Attachment:

AI tool-TSDocs-Link and menu item has an accessible name TSDocs-Link and menu item has an accessible name