search

carbon-design-system / carbon

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

[a11y]: File uploader has static `id` that can cause conflicts #17556

Open parejko opened 1 week ago

parejko commented 1 week ago

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

1.66.0

React version

No response

Automated testing tool and ruleset

devtools

Assistive technology

No response

Description

File uploader id are not unique:

See screenshot

image

File uploader could have ids like ie. Select - https://github.com/carbon-design-system/carbon/blob/a9bddc814172e64c1b617affda9e9b71b42350f1/packages/react/src/components/Select/Select.tsx#L209 Unique ID tool could have also similar complexity as above. https://github.com/carbon-design-system/carbon/blob/36685a0be5e62db11a60d938c76b1c49a402c99a/packages/react/src/tools/uniqueId.js#L8-L13

WCAG 2.1 Violation

No response

Reproduction/example

https://react.carbondesignsystem.com/?path=/docs/components-fileuploader--overview

Steps to reproduce

  1. check html of file uploader in storybook or in app

Suggested Severity

None

Code of Conduct

tay1orjones commented 1 week ago

Thanks for opening this from our conversation on slack.

I'll add that this specifically is an issue because there may be more than one of these on the page and therefore would have multiple id's of the same value on the page, which isn't allowed.

Ref: https://github.com/carbon-design-system/carbon/pull/15274

Generally all id's should be procedurally generated with the internal helper built around React.useId() to ensure multiple instances are supported and the values match from server to client, if applicable.

Shankar-CodeJunkie commented 5 days ago

@tay1orjones : Hope you are doing fine ! . I would like to work on this issue. Can you assign this issue to me ? Thanks

tay1orjones commented 2 days ago

@Shankar-CodeJunkie Yeah sounds great! We usually rely on comments like yours to indicate work is in progress. Thanks for taking an interest in this one!