= {
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/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: [
-
,
+
,
-
+
No results found.
@@ -91,10 +87,14 @@ export const Compact: Story = {
defaultValue: ITEMS[ 0 ],
items: ITEMS,
children: [
- ,
+ ,
-
+
No results found.
@@ -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
}
>
-
+
-
+
No results found.
@@ -339,10 +339,10 @@ function AsyncItemsTemplate( {
}, 500 );
} }
>
-
+
-
+
+
{ ( item: FixtureItem ) => (
,
-
+
@@ -470,10 +470,10 @@ export const Grouped: Story = {
args: {
items: GROUPED_ITEMS,
children: [
- ,
+ ,
-
+
No results found.
@@ -527,7 +527,7 @@ export const WithCustomZIndex: Story = {
defaultValue: ITEMS[ 0 ],
items: ITEMS,
children: [
- ,
+ ,
-
+
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: @,
},
};
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 = {
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 ) => (
= {
'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: [
- ,
+ ,
{ defaultItems.map( ( item ) => (
@@ -54,7 +50,7 @@ export const Compact: Story = {
args: {
...Default.args,
children: [
- ,
+ ,
{ defaultItems.map( ( item ) => (
@@ -77,7 +73,12 @@ export const Compact: Story = {
export const Minimal: Story = {
args: {
children: [
- ,
+ ,
{ Array.from( { length: 6 }, ( _, index ) => (
group.items ),
children: [
- ,
+ ,
{ groupedItems.map( ( group ) => (
@@ -155,7 +156,11 @@ export const WithCustomPlaceholder: Story = {
args: {
items: defaultItems,
children: [
- ,
+ ,
{ defaultItems.map( ( item ) => (
@@ -183,7 +188,7 @@ export const WithNullValueOption: Story = {
args: {
items: nullValueOptionItems,
children: [
- ,
+ ,
{ nullValueOptionItems.map( ( item ) => (
,
+ ,
{ overflowItems.map( ( item ) => (
@@ -256,7 +261,7 @@ export const Disabled: Story = {
args: {
...Default.args,
children: [
- ,
+ ,
{ defaultItems.map( ( item ) => (
@@ -287,7 +292,7 @@ export const WithDisabledItem: Story = {
args: {
items: disabledItemItems,
children: [
- ,
+ ,
{ disabledItemItems.map( ( item ) => (
+
{ ( item ) => (
,
+ ,
;
export const Default: Story = {
args: {
placeholder: 'Placeholder',
+ 'aria-label': 'Value',
},
};