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

[parejko]

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:

• description has id="description" -> expected more complex id with incremental value like fileuploader-description-1
• label has id="id1" -> expected more complex id like fileuploader-input-1`

See screenshot

File uploader could have ids like ie. Select -

carbon/packages/react/src/components/Select/Select.tsx

Line 209 in a9bddc8

: `select-helper-text-${selectInstanceId}`;

Unique ID tool could have also similar complexity as above.

carbon/packages/react/src/tools/uniqueId.js

Lines 8 to 13 in 36685a0

	let lastId = 0;
	export default function uniqueId(prefix = 'id') {
	lastId++;
	return `${prefix}${lastId}`;
	}

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

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

[tay1orjones]

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: #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]

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

[tay1orjones]

@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!

[Shankar-CodeJunkie]

@tay1orjones : I have made the required changes and can you please verify the below and tell me, whether this can be sent for your review . I hope for this pull request, the change is only needed on the FileUploader component alone and not on other components like FileUploaderButton