Skip to content

fix(time-picker): announce invalid/warn state message#22109

Merged
heloiselui merged 3 commits into
carbon-design-system:mainfrom
heloiselui:19596-timepicker-a11y-error
Apr 29, 2026
Merged

fix(time-picker): announce invalid/warn state message#22109
heloiselui merged 3 commits into
carbon-design-system:mainfrom
heloiselui:19596-timepicker-a11y-error

Conversation

@heloiselui

@heloiselui heloiselui commented Apr 23, 2026

Copy link
Copy Markdown
Contributor

Closes #19596

Fixed TimePicker a11y so invalid and warning messages are announced by screen readers.

Changelog

New

  • None

Changed

  • Updated TimePicker accessibility wiring so aria-describedby points to the invalid text when invalid is true and warning text when warning is true
  • Preserved any consumer-provided aria-describedby values by merging them with the generated validation message ID
  • Added aria-invalid="true" when TimePicker is invalid
  • Added tests for TimePicker invalid/warning, and merged aria-describedby behavior

Removed

  • None

Testing / Reviewing

  • Go to React Deploy Preview > TimePicker > Default
  • Turn on a screen reader, such as VoiceOver or JAWS
  • Set invalid to true or warning to true and provide invalidText or provide warningText, for example This is test message
  • Focus or re-navigate to the TimePicker input
  • Confirm the screen reader announces the invalid or warn message

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

  • Reviewed every line of the diff
  • [ ] Updated documentation and storybook examples
  • Wrote passing tests that cover this change
  • Addressed any impact on accessibility (a11y)
  • [ ] Tested for cross-browser consistency
  • Validated that this code is ready for review and status checks should pass

More details can be found in the pull request guide

@heloiselui heloiselui requested a review from a team as a code owner April 23, 2026 13:48
@netlify

netlify Bot commented Apr 23, 2026

Copy link
Copy Markdown

Deploy Preview for v11-carbon-react ready!

Name Link
🔨 Latest commit 7230d88
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/69f1dec49d486c000823cead
😎 Deploy Preview https://deploy-preview-22109--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Apr 23, 2026

Copy link
Copy Markdown

Deploy Preview for v11-carbon-web-components ready!

Name Link
🔨 Latest commit 7230d88
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/69f1dec497312e00082324b4
😎 Deploy Preview https://deploy-preview-22109--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@codecov

codecov Bot commented Apr 23, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.06%. Comparing base (5bc8623) to head (7230d88).
⚠️ Report is 31 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #22109      +/-   ##
==========================================
+ Coverage   95.02%   95.06%   +0.03%     
==========================================
  Files         538      541       +3     
  Lines       45028    45204     +176     
  Branches     6472     6535      +63     
==========================================
+ Hits        42790    42972     +182     
+ Misses       2109     2103       -6     
  Partials      129      129              
Flag Coverage Δ
main-packages 89.13% <100.00%> (+0.06%) ⬆️
web-components 97.87% <ø> (+0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Comment thread packages/react/src/components/TimePicker/TimePicker.tsx Outdated
Comment thread packages/react/src/components/TimePicker/TimePicker.tsx Outdated
@heloiselui heloiselui added this pull request to the merge queue Apr 29, 2026
Merged via the queue into carbon-design-system:main with commit d443e90 Apr 29, 2026
39 checks passed
@heloiselui heloiselui deleted the 19596-timepicker-a11y-error branch April 29, 2026 12:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[a11y]: Timepicker: Screen reader should announce the identified error informtion which appears on the screen when user input some invalid data.

3 participants