search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.88k stars 1.82k forks source link

[a11y]: Site hamburger menu (appears when zoomed 200%) does not hide background content from JAWS and other assisteive technology #14138

Closed philljenkins closed 1 year ago

philljenkins commented 1 year ago

Package

@carbon/react

Browser

Chrome

Operating System

Windows

Package version

v11

React version

No response

Automated testing tool and ruleset

IBM Equal Access Accessibility Checker 3.1.52

Assistive technology

JAWS 2023

Description

while hamburger menu is opened, focus is moving out and elements are getting truncated

WCAG 2.1 Violation

No response

Reproduction/example

WCAG 2.1 violation: 1.4.4 Resize text

Steps to reproduce

  1. Load JAWS
  2. Load ibm.com/able
  3. Zoom to 200%
  4. Tab to Site hamburger menu that recently appeared due to zooming and reflow
  5. Tab to items in the menu,
  6. continue tabbing incorrectly to items outside of the menu

Code of Conduct

philljenkins commented 1 year ago

Original issue was opened against the IBM Accessibility toolkit https://github.ibm.com/IBMa/E2E/issues/4795

tay1orjones commented 1 year ago

Thanks for reporting this @philljenkins

@guidari put a bunch of fixes in in the last few weeks for improving the focus handling of UIShell components:

I think this will be most-directly solved by the focus handling improvements in #13894, which was initially shipped in v11.32.0. Could you confirm if you're on that version?

@guidari @eng618 it would be good to ensure gatsby-theme-carbon is updated to the latest carbon deps to ensure these fixes make their way into that ecosystem of sites built with the gatsby theme, https://github.com/carbon-design-system/gatsby-theme-carbon/issues/1310