Storybook: Resolve accessibility issues flagged in Storybook

## What problem does this address? Numerous examples on [the Gutenberg Storybook site](https://wordpress.github.io/gutenberg/?path=/docs/introduction--page) have existing accessibility issues that need to be resolved. In parallel to creating this issue, I am working on changing the default behavior of Storybook to fail continuous integration for any accessibility issues. To achieve this, preexisting issues are being marked as "todo", and whose resolution is tracked by this issue. ## What is your proposed solution? Each of the issues listed below should be audited and resolved, with resolution likely meaning one of a few things: - Updating the Story example to satisfy the expected accessibility check. - Example: Some stories (e.g. [PlainText](https://wordpress.github.io/gutenberg/?path=/docs/blockeditor-plaintext--docs)) don't include a label for the form control. And while the story is largely concerned with the isolated control itself, these stories are often used as a starting point for how components should be implemented in the application, and should therefore better reflect how they would be used in practice (i.e. including a label). - Fixing the real, underlying component issue identified by the accessibility check - Example: [Grid resize handles](https://wordpress.github.io/gutenberg/?path=/story/grid-dashboardgrid--edit-mode) are unnamed. - Recommendation: It may be best to file independent issues for these and consider the item "resolved" here by virtue of the separate bug report. - Validate as a non-issue and suppress the warning if applicable. An issue should only be considered "resolved" if the `a11y.test` is no longer configured as `'todo'`. Note that the descriptions of the issues are meant to be informative around what may need to be done, but are largely generated by an AI assessment and have only been lightly verified. Further scrutiny is warranted around the actual cause and resolution in each case, and this is considered part of the work of "resolving" a task. ### List of issues: #### `@wordpress/components` - [ ] `packages/components/src/animate/stories/index.story.tsx` — Loading demo applies the opacity pulse to a Notice (and its text), which fails color-contrast mid-animation. Update the story to animate a non-text element instead of Notice. - [ ] `packages/components/src/border-box-control/stories/index.story.tsx` — Border UI text fails color-contrast. - [ ] `packages/components/src/color-palette/stories/index.story.tsx` — Multiple Origins: origin groups are missing required ARIA children (aria-required-children). - [ ] `packages/components/src/composite/legacy/stories/index.story.tsx` — Items use role="listitem" on `<button>`, which is not an allowed ARIA role for that element (aria-allowed-role). - [ ] `packages/components/src/focal-point-picker/stories/index.story.tsx` — Draggable handle is a nameless aria command (aria-command-name). - [ ] `packages/components/src/form-toggle/stories/index.story.tsx` — Story shows FormToggle without a visible label (label). Update it to use ToggleControl, or pair the toggle with a visible label, so the example is copy-paste safe. - [ ] `packages/components/src/gradient-picker/stories/index.story.tsx` — Multiple Origins: origin groups are missing required ARIA children (aria-required-children). - [ ] `packages/components/src/keyboard-shortcuts/stories/index.story.tsx` — Story harness includes an unlabeled form control (label). - [ ] `packages/components/src/menu-group/stories/index.story.tsx` — Stories render menuitem outside a menu parent (aria-required-parent). Update examples to compose inside DropdownMenu (or NavigableMenu) so they match real usage. - [ ] `packages/components/src/menu-item/stories/index.story.tsx` — Stories render menuitem outside a menu parent (aria-required-parent). Update examples to compose inside DropdownMenu (or NavigableMenu) so they match real usage. - [ ] `packages/components/src/menu-items-choice/stories/index.story.tsx` — Stories render menuitemradio outside a menu parent (aria-required-parent). Update examples to compose inside DropdownMenu (or NavigableMenu) so they match real usage. - [ ] `packages/components/src/popover/stories/index.story.tsx` — All Placements: scrollable demo region is not keyboard-accessible (scrollable-region-focusable). - [ ] `packages/components/src/range-control/stories/index.story.tsx` — Mark labels fail color-contrast. - [ ] `packages/components/src/sandbox/stories/index.story.tsx` — SandBox iframe is missing an accessible title (frame-title). Pass a `title` arg in these stories (and prefer requiring it in real usage). - [ ] `packages/components/src/scrollable/stories/index.story.tsx` — Story includes an unlabeled form control (label). - [ ] `packages/components/src/snackbar/stories/index.story.tsx` — Action control nested inside the snackbar creates nested interactive elements (nested-interactive). - [ ] `packages/components/src/snackbar/stories/list.story.tsx` — Snackbars with actions nest interactive elements (nested-interactive). - [ ] `packages/components/src/validated-form-controls/components/stories/content-editable-control.story.tsx` — Contenteditable control is unlabeled (label). - [ ] `packages/components/src/validated-form-controls/components/stories/custom-select-control.story.tsx` — Select lacks an accessible name in this story (select-name). #### `@wordpress/ui` - [ ] `packages/ui/src/form/primitives/autocomplete/stories/index.story.tsx` — Listbox/grid markup has incomplete ARIA relationships; inline list is not keyboard-accessible when scrollable (aria-required-attr/children/parent, aria-allowed-attr, scrollable-region-focusable). - [ ] `packages/ui/src/form/primitives/checkbox/stories/index.story.tsx` — Stories show the checkbox primitive without a visible label (aria-toggle-field-name). Update them to include Field.Label (or an equivalent labeled composition) so examples are copy-paste safe. - [ ] `packages/ui/src/form/primitives/combobox/stories/index.story.tsx` — Placeholder-like trigger text fails color-contrast (WCAG 1.4.3 applies to placeholder text). Stories also need a visible label on the trigger (button-name) — update examples to include Field.Label rather than relying on aria-label. - [ ] `packages/ui/src/form/primitives/combobox/stories/index.story.tsx` (`DetachedInline`) — Detached inline listbox is missing accessible names/required ARIA and uses a non-keyboard-accessible scroll region (aria-input-field-name, aria-required-attr, scrollable-region-focusable). - [ ] `packages/ui/src/form/primitives/input/stories/index.story.tsx` (`WithSuffixControl`) — Story shows Input without a visible label (label). Update it to include Field.Label (or an equivalent labeled composition) so the example is copy-paste safe. - [ ] `packages/ui/src/form/primitives/select/stories/index.story.tsx` — Placeholder-like trigger text fails color-contrast (WCAG 1.4.3 applies to placeholder text). Stories also need a visible label on the trigger (button-name) — update examples to include Field.Label rather than relying on aria-label. - [ ] `packages/ui/src/form/select-control/stories/index.story.tsx` — Placeholder-like trigger text fails color-contrast (WCAG 1.4.3 applies to placeholder text). #### DataViews / Grid / other - [ ] `packages/block-editor/src/components/plain-text/stories/index.story.jsx` — PlainText should be labeled. - [ ] `packages/dataviews/src/dataform/stories/index.story.tsx` — Validation error-delegate inputs are unlabeled (label). - [ ] `packages/dataviews/src/dataviews/stories/index.story.tsx` — Grid media buttons lack names; Minimal UI scroll region is not keyboard-accessible; Async Infinite Scroll list items lack a required parent (button-name, scrollable-region-focusable, aria-required-parent). - [ ] `packages/dataviews/src/dataviews-picker/stories/index.story.tsx` — Picker UI nests interactive controls (nested-interactive). - [ ] `packages/dataviews/src/field-types/stories/index.story.tsx` — Helper text fails color-contrast. - [ ] `packages/grid/src/dashboard-grid/stories/index.story.tsx` — Resize handles are nameless aria commands; edit mode nests interactive controls (aria-command-name, nested-interactive). - [ ] `packages/grid/src/dashboard-lanes/stories/index.story.tsx` — Resize handles are nameless aria commands; edit mode nests interactive controls (aria-command-name, nested-interactive). - [ ] `packages/image-cropper/src/stories/index.story.tsx` — Crop controls include an unlabeled input and unnamed select (label, select-name). - [ ] `packages/media-editor/src/image-editor/stories/rectangle-crop.story.tsx` — Editor chrome fails color-contrast; debug view has a non-keyboard-accessible scroll region (color-contrast, scrollable-region-focusable). - [ ] `packages/media-fields/src/stories/index.story.tsx` — Data Views preview table has an empty column header (empty-table-header). - [ ] `packages/theme/src/color-ramps/stories/index.story.tsx` — Color scale sample text fails color-contrast. - [ ] `packages/widget-dashboard/src/stories/index.story.tsx` — Sortable widget chrome nests interactive controls (nested-interactive).