[combobox][autocomplete] Add aria-readonly to the listbox and the combobox trigger - #5541
[combobox][autocomplete] Add aria-readonly to the listbox and the combobox trigger#5541vikuscz wants to merge 1 commit into
Conversation
…bobox trigger Follow-up to mui#5531, which added `aria-readonly` to `Select`'s listbox. `Combobox.List` (also `Autocomplete.List`) renders `role="listbox"` or `role="grid"`, both of which `aria-readonly` is defined for, and it carried no read-only state at all. `Combobox.Trigger` gets it only when it renders with `role="combobox"`, mirroring how `aria-required` is already gated: without that role the trigger is a plain button, where the attribute wouldn't apply (mui#3907), and the `Combobox.Input` outside the popup already exposes the state.
commit: |
Bundle size
Check out the code infra dashboard for more information about this PR. |
✅ Deploy Preview for base-ui ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
The red Benchmark tests check is the same one I flagged on #5531, and since it has now happened on two separate PRs it doesn't look like flakiness: both times it failed in the Run baseline benchmarks at merge-base step — inside the Both runs also reported Nothing in this PR touches Tooltip, and it changes no behavior at all — just ARIA attributes. |
zannager
added
the
component: combobox
2 participants
Follow-up to #5531 / #5530. No behavior change — this only exposes the read-only state where it was missing.
#5531 added
aria-readonlytoSelect's listbox.Combobox.List— which is alsoAutocomplete.List— rendersrole="listbox"(orrole="grid"), both of whicharia-readonlyis defined for, and it carried no read-only state at all, so the two components were left inconsistent.Changes
Combobox.List:aria-readonlywhen the root isreadOnly. CoversAutocomplete.Listtoo, since it's the same component.Combobox.Trigger:aria-readonly, but only when it renders withrole="combobox"(inputInsidePopup), mirroring howaria-requiredis already gated on the same condition. Without that role the trigger is a plain button, where the attribute wouldn't apply — that's what [combobox][autocomplete] Remove aria-readonly prop from Clear and Popup components when readOnly #3907 removed fromClearandPopup— and in that composition theCombobox.Inputoutside the popup already exposesaria-readonly.Testing
Five tests: listbox with and without
readOnly, theAutocompletelistbox, and the trigger in both compositions (asserting the plain-button one exposes nothing while its input does). Three of them fail without the source change.pnpm test:chromium src/combobox src/autocomplete(1070 passed) andpnpm test:jsdom(1014 passed) are green,pnpm prettierandeslinton the changed files are clean.pnpm typescriptcurrently fails onmasterfor me inpackages/react/test/floating-ui-tests/Popover.tsx(missingFloatingPortal/FloatingTree/useFloatingNodeIdexports) — that reproduces on a clean checkout of 446df6e without my changes, so I've left it alone, but flagging it in case it isn't known.