Skip to content

[@mantine/dates] DatePickerInput, MonthPickerInput, YearPickerInput, DateTimePicker: Fix dropdown aria-labelledby referencing a missing element - #9390

Open
kammeph wants to merge 1 commit into
mantinedev:masterfrom
kammeph:fix/date-picker-dropdown-name
Open

kammeph wants to merge 1 commit into
mantinedev:masterfrom
kammeph:fix/date-picker-dropdown-name

Conversation

@kammeph

@kammeph kammeph commented Nov 6, 2026

Copy link
Copy Markdown

Bug

The dropdown of DatePickerInput, MonthPickerInput, YearPickerInput and DateTimePicker has role="dialog" and aria-labelledby set to the Popover target id. PickerInputBase does not pass an id to Popover, so the Popover generates its own id. Input then takes its id from the Input.Wrapper context, which is a different generated id. The dialog's aria-labelledby therefore points to an element that does not exist, the dialog has no accessible name, and axe reports aria-dialog-name.

Fix

Generate the id once in PickerInputBase with useId(inputProps.id) and pass it to both Input.Wrapper and Popover. The input button, the label for attribute and the dialog's aria-labelledby now share one id, so the dialog is named after the input label. A user-supplied id is still used as is. This matches how Select and Autocomplete share _id.

With dropdownType="modal" the dialog has no accessible name either. ModalBaseContent sets aria-labelledby only from a mounted Modal.Title, so a fix there needs a change in @mantine/core. I left it out of this PR.

Testing

  • PickerInputBase.test.tsx: labels the dropdown with the input label and labels the dropdown with the input label when id is set. Both fail on master (no dialog named test-label) and pass with the fix.
  • npm test passes.

@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Nov 6, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-11-06T13:26:51.802829Z 9e5cf67 PR opened
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

…DateTimePicker: Fix dropdown aria-labelledby referencing a missing element
@kammeph
kammeph force-pushed the fix/date-picker-dropdown-name branch from 9e5cf67 to b2ede18 Compare November 9, 2026 07:13
@rtivital rtivital added the Verified Reviewed and verified PR label Nov 9, 2026
@rtivital

rtivital commented Nov 9, 2026

Copy link
Copy Markdown
Member

🤖 Beep boop, Codex (GPT-6 Sol) speaking! Pull request is perfect, no changes needed! Verified label added.

Verified commit: b2ede185eb8eb5a86030e1a5f053249a968c4b53.

Please do not update PR after it got verified, I will need to run verification again if you do that.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Verified Reviewed and verified PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants