From 1da54eb0f40e5a9ced276d3127d859fa3fcf9d27 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 2 Sep 2026 07:21:20 +0900
Subject: [PATCH 1/3] UI: Name Combobox and Select story triggers

---
 .../combobox/stories/index.story.tsx          | 42 +++++++++----------
 .../primitives/select/stories/index.story.tsx | 35 +++++++++-------
 2 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/packages/ui/src/form/primitives/combobox/stories/index.story.tsx b/packages/ui/src/form/primitives/combobox/stories/index.story.tsx
index d8d4aec5f24bd3..9114a1456855bd 100644
--- a/packages/ui/src/form/primitives/combobox/stories/index.story.tsx
+++ b/packages/ui/src/form/primitives/combobox/stories/index.story.tsx
@@ -37,10 +37,6 @@ const meta: Meta< typeof Combobox.Root > = {
 		'Combobox.Clear': Combobox.Clear,
 	},
 	parameters: {
-		// FIXME: The trigger has no visible label and relies on aria-label
-		// (button-name).
-		// See: https://github.com/WordPress/gutenberg/issues/81596
-		a11y: { test: 'todo' },
 		componentStatus: {
 			status: 'use-with-caution',
 			whereUsed: 'global',
@@ -61,10 +57,10 @@ export const Default: Story = {
 	args: {
 		items: ITEMS,
 		children: [
-			<Combobox.Trigger key="trigger" />,
+			<Combobox.Trigger aria-label="Fruit" key="trigger" />,
 			<Combobox.Popup key="popup">
 				<div style={ inputWrapperStyle }>
-					<Combobox.Input placeholder="Search" />
+					<Combobox.Input aria-label="Search" placeholder="Search" />
 				</div>
 				<Combobox.Empty>No results found.</Combobox.Empty>
 				<Combobox.List>
@@ -91,10 +87,14 @@ export const Compact: Story = {
 		defaultValue: ITEMS[ 0 ],
 		items: ITEMS,
 		children: [
-			<Combobox.Trigger size="compact" key="trigger" />,
+			<Combobox.Trigger
+				size="compact"
+				aria-label="Fruit"
+				key="trigger"
+			/>,
 			<Combobox.Popup key="popup">
 				<div style={ inputWrapperStyle }>
-					<Combobox.Input placeholder="Search" />
+					<Combobox.Input aria-label="Search" placeholder="Search" />
 				</div>
 				<Combobox.Empty>No results found.</Combobox.Empty>
 				<Combobox.List>
@@ -128,9 +128,6 @@ export const DetachedInline: Story = {
 		// The input keeps focus and arrow keys move through the options, so
 		// the scrollable list is reachable by keyboard.
 		a11y: {
-			// Storybook merges parameters, so `test` must be set here to
-			// override the warning-only default from `meta`.
-			test: 'error',
 			config: {
 				rules: [
 					{ id: 'scrollable-region-focusable', enabled: false },
@@ -210,10 +207,13 @@ export const Creatable: Story = {
 						: ITEMS
 				}
 			>
-				<Combobox.Trigger />
+				<Combobox.Trigger aria-label="Fruit" />
 				<Combobox.Popup>
 					<div style={ inputWrapperStyle }>
-						<Combobox.Input placeholder="Search" />
+						<Combobox.Input
+							aria-label="Search"
+							placeholder="Search"
+						/>
 					</div>
 					<Combobox.Empty>No results found.</Combobox.Empty>
 					<Combobox.List>
@@ -339,10 +339,10 @@ function AsyncItemsTemplate( {
 				}, 500 );
 			} }
 		>
-			<Combobox.Trigger />
+			<Combobox.Trigger aria-label="Fruit" />
 			<Combobox.Popup>
 				<div style={ inputWrapperStyle }>
-					<Combobox.Input placeholder="Search" />
+					<Combobox.Input aria-label="Search" placeholder="Search" />
 				</div>
 				<AsyncStatus
 					loading={ loading }
@@ -401,7 +401,7 @@ export const WithCustomTriggerAndItem: Story = {
 		items: ITEMS,
 		defaultValue: ITEMS[ 0 ],
 		children: [
-			<Combobox.Trigger key="trigger">
+			<Combobox.Trigger aria-label="Fruit" key="trigger">
 				{ ( item: FixtureItem ) => (
 					<span
 						style={ {
@@ -425,7 +425,7 @@ export const WithCustomTriggerAndItem: Story = {
 			</Combobox.Trigger>,
 			<Combobox.Popup key="popup">
 				<div style={ inputWrapperStyle }>
-					<Combobox.Input placeholder="Search" />
+					<Combobox.Input aria-label="Search" placeholder="Search" />
 				</div>
 				<Combobox.List>
 					<Combobox.ListBody>
@@ -470,10 +470,10 @@ export const Grouped: Story = {
 	args: {
 		items: GROUPED_ITEMS,
 		children: [
-			<Combobox.Trigger key="trigger" />,
+			<Combobox.Trigger aria-label="Fruit" key="trigger" />,
 			<Combobox.Popup key="popup">
 				<div style={ inputWrapperStyle }>
-					<Combobox.Input placeholder="Search" />
+					<Combobox.Input aria-label="Search" placeholder="Search" />
 				</div>
 				<Combobox.Empty>No results found.</Combobox.Empty>
 				<Combobox.List>
@@ -527,7 +527,7 @@ export const WithCustomZIndex: Story = {
 		defaultValue: ITEMS[ 0 ],
 		items: ITEMS,
 		children: [
-			<Combobox.Trigger key="trigger" />,
+			<Combobox.Trigger aria-label="Fruit" key="trigger" />,
 			<Combobox.Popup
 				positioner={
 					<Combobox.Positioner
@@ -539,7 +539,7 @@ export const WithCustomZIndex: Story = {
 				key="popup"
 			>
 				<div style={ inputWrapperStyle }>
-					<Combobox.Input placeholder="Search" />
+					<Combobox.Input aria-label="Search" placeholder="Search" />
 				</div>
 				<Combobox.List>
 					<Combobox.ListBody>
diff --git a/packages/ui/src/form/primitives/select/stories/index.story.tsx b/packages/ui/src/form/primitives/select/stories/index.story.tsx
index 6b7ed734adf555..50560ee2b4dffb 100644
--- a/packages/ui/src/form/primitives/select/stories/index.story.tsx
+++ b/packages/ui/src/form/primitives/select/stories/index.story.tsx
@@ -14,10 +14,6 @@ const meta: Meta< typeof Select.Root > = {
 		'Select.Item': Select.Item,
 	},
 	parameters: {
-		// FIXME: The trigger has no visible label and relies on aria-label
-		// (button-name).
-		// See: https://github.com/WordPress/gutenberg/issues/81596
-		a11y: { test: 'todo' },
 		componentStatus: {
 			status: 'use-with-caution',
 			whereUsed: 'global',
@@ -38,7 +34,7 @@ export const Default: Story = {
 	args: {
 		items: defaultItems,
 		children: [
-			<Select.Trigger key="trigger" />,
+			<Select.Trigger aria-label="Item" key="trigger" />,
 			<Select.Popup key="popup">
 				{ defaultItems.map( ( item ) => (
 					<Select.Item key={ item.value } value={ item }>
@@ -54,7 +50,7 @@ export const Compact: Story = {
 	args: {
 		...Default.args,
 		children: [
-			<Select.Trigger size="compact" key="trigger" />,
+			<Select.Trigger size="compact" aria-label="Item" key="trigger" />,
 			<Select.Popup key="popup">
 				{ defaultItems.map( ( item ) => (
 					<Select.Item key={ item.value } value={ item }>
@@ -77,7 +73,12 @@ export const Compact: Story = {
 export const Minimal: Story = {
 	args: {
 		children: [
-			<Select.Trigger size="small" variant="minimal" key="trigger" />,
+			<Select.Trigger
+				size="small"
+				variant="minimal"
+				aria-label="Item"
+				key="trigger"
+			/>,
 			<Select.Popup key="popup">
 				{ Array.from( { length: 6 }, ( _, index ) => (
 					<Select.Item
@@ -130,7 +131,7 @@ export const Grouped: Story = {
 	args: {
 		items: groupedItems.flatMap( ( group ) => group.items ),
 		children: [
-			<Select.Trigger key="trigger" />,
+			<Select.Trigger aria-label="Item" key="trigger" />,
 			<Select.Popup key="popup">
 				{ groupedItems.map( ( group ) => (
 					<Select.Group key={ group.label }>
@@ -155,7 +156,11 @@ export const WithCustomPlaceholder: Story = {
 	args: {
 		items: defaultItems,
 		children: [
-			<Select.Trigger placeholder="Choose an item" key="trigger" />,
+			<Select.Trigger
+				placeholder="Choose an item"
+				aria-label="Item"
+				key="trigger"
+			/>,
 			<Select.Popup key="popup">
 				{ defaultItems.map( ( item ) => (
 					<Select.Item key={ item.value } value={ item }>
@@ -183,7 +188,7 @@ export const WithNullValueOption: Story = {
 	args: {
 		items: nullValueOptionItems,
 		children: [
-			<Select.Trigger key="trigger" />,
+			<Select.Trigger aria-label="Item" key="trigger" />,
 			<Select.Popup key="popup">
 				{ nullValueOptionItems.map( ( item ) => (
 					<Select.Item
@@ -238,7 +243,7 @@ export const WithOverflow: Story = {
 	args: {
 		items: overflowItems,
 		children: [
-			<Select.Trigger key="trigger" />,
+			<Select.Trigger aria-label="Item" key="trigger" />,
 			<Select.Popup key="popup">
 				{ overflowItems.map( ( item ) => (
 					<Select.Item key={ item.value } value={ item }>
@@ -256,7 +261,7 @@ export const Disabled: Story = {
 	args: {
 		...Default.args,
 		children: [
-			<Select.Trigger key="trigger" />,
+			<Select.Trigger aria-label="Item" key="trigger" />,
 			<Select.Popup key="popup">
 				{ defaultItems.map( ( item ) => (
 					<Select.Item key={ item.value } value={ item }>
@@ -287,7 +292,7 @@ export const WithDisabledItem: Story = {
 	args: {
 		items: disabledItemItems,
 		children: [
-			<Select.Trigger key="trigger" />,
+			<Select.Trigger aria-label="Item" key="trigger" />,
 			<Select.Popup key="popup">
 				{ disabledItemItems.map( ( item ) => (
 					<Select.Item
@@ -324,7 +329,7 @@ export const WithCustomTriggerAndItem: Story = {
 	args: {
 		items: customOptions,
 		children: [
-			<Select.Trigger key="trigger">
+			<Select.Trigger aria-label="Item" key="trigger">
 				{ ( item ) => (
 					<span
 						style={ {
@@ -380,7 +385,7 @@ export const WithCustomZIndex: Story = {
 	args: {
 		...Default.args,
 		children: [
-			<Select.Trigger key="trigger" />,
+			<Select.Trigger aria-label="Item" key="trigger" />,
 			<Select.Popup
 				portal={
 					<Select.Portal

From b1c51102d7810528c17c5a30235fe2a1150a72f9 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 2 Sep 2026 07:43:49 +0900
Subject: [PATCH 2/3] UI: Name Checkbox and Input story controls

---
 .../form/primitives/checkbox/stories/index.story.tsx  | 11 +++++++----
 .../src/form/primitives/input/stories/index.story.tsx |  8 +++-----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/ui/src/form/primitives/checkbox/stories/index.story.tsx b/packages/ui/src/form/primitives/checkbox/stories/index.story.tsx
index 09baa7bb87a947..07448e13bc47e6 100644
--- a/packages/ui/src/form/primitives/checkbox/stories/index.story.tsx
+++ b/packages/ui/src/form/primitives/checkbox/stories/index.story.tsx
@@ -5,9 +5,6 @@ const meta: Meta< typeof Checkbox > = {
 	title: 'Design System/Components/Form/Primitives/Checkbox',
 	component: Checkbox,
 	parameters: {
-		// FIXME: Stories show the checkbox primitive without a visible label (aria-toggle-field-name).
-		// See: https://github.com/WordPress/gutenberg/issues/81596
-		a11y: { test: 'todo' },
 		componentStatus: {
 			status: 'use-with-caution',
 			whereUsed: 'global',
@@ -21,29 +18,35 @@ export default meta;
 type Story = StoryObj< typeof Checkbox >;
 
 export const Default: Story = {
-	args: {},
+	args: {
+		'aria-label': 'Option',
+	},
 };
 
 export const Checked: Story = {
 	args: {
+		...Default.args,
 		defaultChecked: true,
 	},
 };
 
 export const Indeterminate: Story = {
 	args: {
+		...Default.args,
 		indeterminate: true,
 	},
 };
 
 export const Disabled: Story = {
 	args: {
+		...Default.args,
 		disabled: true,
 	},
 };
 
 export const DisabledChecked: Story = {
 	args: {
+		...Default.args,
 		disabled: true,
 		defaultChecked: true,
 	},
diff --git a/packages/ui/src/form/primitives/input/stories/index.story.tsx b/packages/ui/src/form/primitives/input/stories/index.story.tsx
index ab2558e6426cf6..154c9e72ed2848 100644
--- a/packages/ui/src/form/primitives/input/stories/index.story.tsx
+++ b/packages/ui/src/form/primitives/input/stories/index.story.tsx
@@ -32,6 +32,7 @@ type Story = StoryObj< typeof Input >;
 export const Default: Story = {
 	args: {
 		placeholder: 'Placeholder',
+		'aria-label': 'Value',
 	},
 };
 
@@ -42,19 +43,16 @@ export const Default: Story = {
 export const WithPrefix: Story = {
 	args: {
 		placeholder: 'username',
+		'aria-label': 'Username',
 		prefix: <InputLayout.Slot>@</InputLayout.Slot>,
 	},
 };
 
 export const WithSuffixControl: Story = {
 	args: {
+		'aria-label': 'Value',
 		suffix: InputLayoutWithSuffixControl.args?.suffix,
 	},
-	parameters: {
-		// FIXME: Story shows Input without a visible label (label).
-		// See: https://github.com/WordPress/gutenberg/issues/81596
-		a11y: { test: 'todo' },
-	},
 };
 
 export const Disabled: Story = {

From 2890fa3f1d2bd9b9881a7b4c8d1d60a07c1afd13 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 2 Sep 2026 07:50:08 +0900
Subject: [PATCH 3/3] UI: Name Textarea, Autocomplete, and SearchableChipSelect
 stories

---
 .../autocomplete/stories/index.story.tsx      | 37 +++++++++++++++----
 .../stories/index.story.tsx                   |  2 +
 .../textarea/stories/index.story.tsx          |  1 +
 3 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/form/primitives/autocomplete/stories/index.story.tsx b/packages/ui/src/form/primitives/autocomplete/stories/index.story.tsx
index 3633d50ff70172..24bd4031ae3e68 100644
--- a/packages/ui/src/form/primitives/autocomplete/stories/index.story.tsx
+++ b/packages/ui/src/form/primitives/autocomplete/stories/index.story.tsx
@@ -60,7 +60,11 @@ export const Default: Story = {
 	args: {
 		items: URLS,
 		children: [
-			<Autocomplete.Input placeholder="Enter a URL" key="input" />,
+			<Autocomplete.Input
+				aria-label="URL"
+				placeholder="Enter a URL"
+				key="input"
+			/>,
 			<Autocomplete.Popup key="popup">
 				<Autocomplete.Empty>No matching items.</Autocomplete.Empty>
 				<Autocomplete.List>
@@ -109,7 +113,10 @@ export const OpenOnlyOnMatch: Story = {
 				} }
 				filteredItems={ filteredItems }
 			>
-				<Autocomplete.Input placeholder="Enter a URL" />
+				<Autocomplete.Input
+					aria-label="URL"
+					placeholder="Enter a URL"
+				/>
 				<Autocomplete.Popup>
 					<Autocomplete.List>
 						<Autocomplete.ListBody>
@@ -217,7 +224,7 @@ function AsyncItemsTemplate( {
 				}, 500 );
 			} }
 		>
-			<Autocomplete.Input placeholder="Enter a URL" />
+			<Autocomplete.Input aria-label="URL" placeholder="Enter a URL" />
 			<Autocomplete.Popup>
 				<AsyncStatus
 					loading={ loading }
@@ -294,7 +301,10 @@ export const Inline: Story = {
 				value={ value }
 				onValueChange={ setValue }
 			>
-				<Autocomplete.Input placeholder="Type a command" />
+				<Autocomplete.Input
+					aria-label="Command"
+					placeholder="Type a command"
+				/>
 				<div
 					style={ {
 						minHeight: '200px',
@@ -328,6 +338,7 @@ export const WithSearchIconAndClearButton: Story = {
 		children: [
 			<Autocomplete.InputGroup key="inputGroup">
 				<Autocomplete.Input
+					aria-label="Search URLs"
 					placeholder="Search URLs"
 					render={
 						<Input
@@ -470,6 +481,7 @@ export const InlineMentionAutocomplete: Story = {
 			>
 				<Autocomplete.Input
 					ref={ inputRef }
+					aria-label="Comment"
 					placeholder="Type @ to mention someone"
 				/>
 
@@ -515,7 +527,11 @@ export const WithCustomZIndex: Story = {
 	args: {
 		items: URLS,
 		children: [
-			<Autocomplete.Input placeholder="Enter a URL" key="input" />,
+			<Autocomplete.Input
+				aria-label="URL"
+				placeholder="Enter a URL"
+				key="input"
+			/>,
 			<Autocomplete.Popup
 				portal={
 					<Autocomplete.Portal
@@ -551,7 +567,11 @@ export const Grouped: Story = {
 	args: {
 		items: GROUPED_COMMANDS,
 		children: [
-			<Autocomplete.Input placeholder="Type a command" key="input" />,
+			<Autocomplete.Input
+				aria-label="Command"
+				placeholder="Type a command"
+				key="input"
+			/>,
 			<Autocomplete.Popup key="popup">
 				<Autocomplete.Empty>No matching items.</Autocomplete.Empty>
 				<Autocomplete.List>
@@ -636,7 +656,10 @@ export const Grid: Story = {
 	render: function Template( args ) {
 		return (
 			<Autocomplete.Root { ...args }>
-				<Autocomplete.Input placeholder="Search emojis" />
+				<Autocomplete.Input
+					aria-label="Search emojis"
+					placeholder="Search emojis"
+				/>
 				<div
 					style={ {
 						marginTop: 'var(--wpds-dimension-gap-sm)',
diff --git a/packages/ui/src/form/primitives/searchable-chip-select/stories/index.story.tsx b/packages/ui/src/form/primitives/searchable-chip-select/stories/index.story.tsx
index 0287537ee39cad..aaf52ba1540f51 100644
--- a/packages/ui/src/form/primitives/searchable-chip-select/stories/index.story.tsx
+++ b/packages/ui/src/form/primitives/searchable-chip-select/stories/index.story.tsx
@@ -44,6 +44,7 @@ export const Default: Story = {
 	args: {
 		defaultValue: [ ITEMS[ 0 ], ITEMS[ 1 ] ],
 		items: ITEMS,
+		'aria-label': 'Fruit',
 	},
 };
 
@@ -100,6 +101,7 @@ export const WithCustomEmptyContent: Story = {
  */
 export const Grouped: Story = {
 	args: {
+		'aria-label': 'Fruit',
 		items: GROUPED_ITEMS,
 		children: ( group: FixtureGroup ) => (
 			<SearchableChipSelect.Group
diff --git a/packages/ui/src/form/primitives/textarea/stories/index.story.tsx b/packages/ui/src/form/primitives/textarea/stories/index.story.tsx
index 8eab08e44e124c..67d0123955261d 100644
--- a/packages/ui/src/form/primitives/textarea/stories/index.story.tsx
+++ b/packages/ui/src/form/primitives/textarea/stories/index.story.tsx
@@ -24,6 +24,7 @@ type Story = StoryObj< typeof Textarea >;
 export const Default: Story = {
 	args: {
 		placeholder: 'Placeholder',
+		'aria-label': 'Value',
 	},
 };