#22455·carbon

[Bug]: [a11y]: FileUploaderButton creates hidden selectable text causing screen reader issues

Author: hshreya706Created Jun 16, 2026Updated Sep 18, 2026
Labelstype: bug 🐛status: help wanted 👐browser: chromea11y: JAWSa11y: NVDAa11y: VoiceOverpackage: @carbon/reactplatform: windows

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:

  1. Use FileUploaderButton component with labelText prop: <FileUploaderButton id="yaml-file" buttonKind="tertiary" size="md" accept={['.yml', '.yaml']} labelText="Upload YAML file" disableLabelChanges onChange={handleChange} />
  2. Navigate to the button using a screen reader
  3. 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: Image Image

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

  1. Render a FileUploaderButton component with the labelText prop as shown in the example above
  2. Enable a screen reader (VoiceOver on macOS, NVDA/JAWS on Windows)
  3. Navigate to the FileUploaderButton using keyboard or screen reader
  4. 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

Source: carbon-design-system/carbon