Dev: warn when slider controls missing an accessible name (help with … #34218
+3
−1
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Title Dev: warn when slider controls are missing an accessible name (help with #33669)
Body Summary
Add a DEV-only console warning when a slider control (implicit via or any element with role="slider") is rendered without an obvious accessible name source (aria-label, aria-labelledby, or title).
Motivation
Screen readers on Windows (Narrator / NVDA / JAWS) can announce unlabeled sliders ambiguously (e.g. “slider 3”), which is confusing for users. This diagnostic helps authors catch missing accessible names during development.
What changed
ReactDOMComponent.js
In validatePropertiesInDevelopment, warn when:
type === 'input' && props.type === 'range' and no aria-label / aria-labelledby / title present.
props.role === 'slider' and no aria-label / aria-labelledby / title present.
Warning is conservative and props-based only to avoid false positives.
packages/react-dom/src/tests/ReactDOMInvalidARIAHook-test.js
Added a unit test asserting the new dev warning is emitted for an unlabeled .
Testing / Validation
Install deps:
npm install OR yarn
Run the added test:
npx jest packages/react-dom/src/tests/ReactDOMInvalidARIAHook-test.js -i --colors
Manual smoke-check:
Run an app in development, render without aria-* or title, and verify a single console.error appears instructing to add aria-label / aria-labelledby / title.
Notes / Limitations
This is a developer-only diagnostic gated by DEV; it does not affect production bundles.
The check uses props-only detection (aria-label / aria-labelledby / title). It does not attempt to walk the DOM to detect associated to avoid false positives at this location. Consider a follow-up DOM-level dev checker if maintainers want label association detection.
Wording can be adjusted if maintainers prefer different guidance or links to docs.
Issue
Helps resolve / relates to: #33669