UI: Fix accessibility issues in form primitives and their stories

[i-am-chitti]

What?

Partially addresses #81596

• Select, Combobox, SelectControl — the trigger placeholder used the disabled foreground token (#8d8d8d, 3.32:1), failing the 4.5:1 minimum. A placeholder is live text, not disabled text, so it now uses --wpds-color-foreground-content-neutral-weak (#707070, 4.95:1). Fixes color-contrast across all three.
• Combobox → DetachedInline — detached from a trigger, the role="listbox" had no accessible name. Named it in the story. Fixes aria-input-field-name.
• Checkbox, Input → WithSuffixControl — wrapped in Field.Label. Fixes label / aria-toggle-field-name. See question 1.

Questions

1. Do the Checkbox / Input story changes belong to the coordinated labeling effort described in #81777? Happy to drop them if so. Unlike FormToggle, these have Field as a first-class labeling primitive, but the same "don't recommend one arbitrary pattern" concern may apply.
2. scrollable-region-focusable fires on the story-authored overflow: auto wrappers in Autocomplete → Inline and Combobox → DetachedInline. This looks like a false positive for the combobox pattern — the input holds focus and arrow keys scroll the active option into view — and tabIndex={0} would add a stray tab stop inside a composite widget. Suppress with a documented reason?

Not included

• button-name on Select / Combobox triggers (18 stories) — trigger labeling, same class as question 1. Select already has a dedicated Labeling story documenting the association.
• Two upstream @base-ui/react 1.6.0 bugs:
  • aria-allowed-attr (Autocomplete → Grid): useListNavigation.ts#L758 sets aria-orientation unconditionally, which role="grid" disallows.
  • aria-required-attr (Autocomplete → Inline): AriaCombobox.tsx#L1008-L1012 computes aria-expanded only when !inline, but line 1032 still applies role="combobox".

Testing Instructions

npm run storybook:build && npm run --workspace @wordpress/storybook test:smoke

Screenshots

Before	After

Use of AI

Model: Claude Sonnet 5
Purpose - Implementation and axe-core verification.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: i-am-chitti <iamchitti@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[ciampo]

Do the Checkbox / Input story changes belong to the coordinated labeling effort described in #81777 (comment)? Happy to drop them if so.

Yes, let's drop these changes from this PR. Thank you!

button-name on Select / Combobox triggers (18 stories)

Let's also leave this out for now, as you've already done.

scrollable-region-focusable fires on the story-authored overflow: auto wrappers in Autocomplete → Inline and Combobox → DetachedInline. This looks like a false positive for the combobox pattern — the input holds focus and arrow keys scroll the active option into view — and tabIndex={0} would add a stray tab stop inside a composite widget. Suppress with a documented reason?

Regarding this: Chrome and Firefox automatically make a scrollable area focusable (without tabindex={0}), while safari doesn't. But I don't think this is a regression worth flagging / fixing, since the widget if already fully usable with keyboard: users can press arrow keys while focus in in the combobox to navigate the options. I'd treat this as a false positive.

And I'd be almost tempted to actually add tabinxed=-1 on the list, since that extra tab stop doesn't bring much value.

aria-allowed-attr (Autocomplete → Grid): useListNavigation.ts#L758 sets aria-orientation unconditionally, which role="grid" disallows.

I opened mui/base-ui#5548 to track this issue upstream.

Since this affects every @wordpress/ui Autocomplete grid, I think the temporary fix should live in Autocomplete.List rather than only in this story (cc @mirka for awareness). We can remove the generated DOM attribute without changing the orientation setting used for keyboard navigation:

Suggested diff

diff --git a/packages/ui/src/form/primitives/autocomplete/list.tsx b/packages/ui/src/form/primitives/autocomplete/list.tsx
@@
 export const List = forwardRef< HTMLDivElement, AutocompleteListProps >(
 	function List( { className, ...restProps }, ref ) {
+		// Base UI adds this invalid attribute in grid mode.
+		// TODO: Remove after https://github.com/mui/base-ui/issues/5548.
 		return (
 			<_Autocomplete.List
 				className={ clsx( itemPopupStyles.list, className ) }
 				ref={ ref }
 				{ ...restProps }
+				aria-orientation={ undefined }
 			/>
diff --git a/packages/ui/src/form/primitives/autocomplete/test/index.test.tsx b/packages/ui/src/form/primitives/autocomplete/test/index.test.tsx
@@
 			await waitFor( () => {
 				expect( rowRef.current ).toBeInstanceOf( HTMLDivElement );
 			} );
+
+			expect( screen.getByRole( 'grid' ) ).not.toHaveAttribute(
+				'aria-orientation'
+			);
 		} );

After applying this diff, the follow-up would be:

• verify the Autocomplete Grid story with Axe and confirm two-dimensional arrow-key navigation is unchanged;
• keep the component regression test when Base UI fixes the issue;
• remove the temporary wrapper override and TODO after upgrading to the release containing the upstream fix.

[i-am-chitti]

Thanks @ciampo for the review. I'll rebase today and push other feedback changes.

[i-am-chitti]

@ciampo Feedbacks addressed and pushed. Ready for a re-review.

• Removed the 7 SelectControl exemptions, since color-contrast was their only cause — otherwise the fix wouldn't clear the issue's "no longer configured as 'todo'" bar.
• Autocomplete → Grid still fails aria-required-children / aria-required-parent, surfaced once aria-allowed-attr was fixed. role="grid" disallows the role="group" children that Base UI's own documented composition (List → Group → GroupLabel → Row → Item) renders, so it isn't fixable here.

[i-am-chitti]

@ciampo, all addressed and ready for a re-review.

[ciampo]

LGTM 🚀

Thank you!

[aduth]

Thanks for the improvements here! I've updated the checklist in #81596 to reflect the progress.