[Bug]: [a11y]: FileUploaderButton creates hidden selectable text causing screen reader issues
Package
@carbon/react
Browser
Chrome
Package version
1.81.0
React version
1.81.0
Description
The FileUploaderButton component creates hidden/selectable text that is announced by screen readers as "You are currently on a selectable text", causing an accessibility violation.
Steps to reproduce:
- Use FileUploaderButton component with labelText prop:
<FileUploaderButton id="yaml-file" buttonKind="tertiary" size="md" accept={['.yml', '.yaml']} labelText="Upload YAML file" disableLabelChanges onChange={handleChange} /> - Navigate to the button using a screen reader
- Screen reader announces "You are currently on a selectable text"
Expected behavior: The button should be properly labeled for screen readers without creating hidden selectable text elements. The label should be associated with the button using proper ARIA attributes without exposing internal label elements as selectable content.
Actual behavior: The component's internal implementation creates a label element that is exposed as selectable text to assistive technologies, causing accessibility issues.
Screenshots:
Additional context: This issue affects the accessibility of file upload functionality and creates confusion for users relying on screen readers. The labelText prop appears to create an internal label structure that is improperly exposed to assistive technologies.
GitHub Issue URL: https://github.com/carbon-design-system/carbon/issues/new/choose
Reproduction/example
import { FileUploaderButton } from '@carbon/react'; <FileUploaderButton id="yaml-file" buttonKind="tertiary" size="md" accept={['.yml', '.yaml']} labelText="Upload YAML file" disableLabelChanges onChange={handleFileChange} />
Steps to reproduce
- Render a FileUploaderButton component with the labelText prop as shown in the example above
- Enable a screen reader (VoiceOver on macOS, NVDA/JAWS on Windows)
- Navigate to the FileUploaderButton using keyboard or screen reader
- Observe the screen reader announcement
Suggested Severity
Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.
Application/PAL
IBM Cloud - Satellite Configuration Management
Code of Conduct
- I agree to follow this project's Code of Conduct
- I checked the current issues for duplicate problems
Source: carbon-design-system/carbon