[a11y]: ProgressIndicator causes horizontal scrollbar at 400% zoom

[simon-burns]

Package

@carbon/react

Browser

Chrome, Firefox

Operating System

No response

Package version

v1.70.0

React version

No response

Automated testing tool and ruleset

WCAG Mapping: 1.4.10 Reflow

Assistive technology

No response

Description

When screen resized to 400% horizontal scroll bars are appearing on the page because the ProgressIndicator doesn't adapt to less horizontal space.

User impact: If a horizontal scroll bar appears when the page is reflowed to 320 pixels wide, it can make it difficult for users with visual impairments or other disabilities that require larger text sizes. This can make it difficult for these users to read and understand the content, leading to exclusion, frustration, and a negative user experience.

WCAG Mapping: 1.4.10 Reflow
Level of Compliance: AA

WCAG 2.1 Violation

1.4.10 Reflow

Reproduction/example

https://stackblitz.com/edit/github-s6er9y?file=src%2FApp.jsx

Steps to reproduce

Reduce the horizontal space available for the Progress Indicator, either by reducing the width or by zooming in on the page. You will see a horizontal scrollbar.

Suggested Severity

None

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems