Fix/31701 interactions panel accessibility

[anchmelev]

Closes #31701

What I did

Improved accessibility in the Interactions panel by making the steps list semantic and improving screen reader support.

This PR:

• changes the interaction steps container to use semantic list markup (ol and li)
• replaces the previous non-semantic list label with a labeled section and heading
• updates interaction step button labels to describe the action and include status context
• updates nested-step toggle controls with explicit expand/collapse labels and aria-expanded
• aligns the nested-step toggle icon direction with the disclosure state
• adds aria-busy while interactions are rendering or running
• adds live status announcements for interaction test lifecycle states
• avoids React.useId() so the component remains compatible with React 17
• adds unit tests covering semantic structure, toggle state, and live/busy behavior

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. Run Storybook locally:
   • cd code && yarn task compile && yarn storybook:ui
2. Open:
   • http://localhost:6006/?path=/story/core-component-test-basics--step
3. Open the Interactions panel and run the play function.
4. Verify that:
   • the interaction steps are exposed as a semantic ordered list
   • step buttons have descriptive accessible names
   • nested-step toggle buttons announce expand/collapse correctly and reflect aria-expanded
   • the interactions list is marked busy while the run is in progress
   • completion and failure states are announced through the live region

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Summary by CodeRabbit

• New Features

  • Live status announcements for interaction run states, and collapsible interaction sections with expanded/collapsed labels and aria-expanded support.
  • Computed interaction labels and human-readable statuses shown in the list.

• Improvements

  • Enhanced accessibility: richer aria-labels, aria-busy on the list, and improved announcements for errors/completion.
  • Visual updates: Chevron toggles, error-row highlighting, and refined hover/focus behavior.

• Tests

  • Added tests validating rendering, toggles, live announcements, and error/flow states.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c303e63e-cd17-42be-8af2-a70e9e94d832

📥 Commits

Reviewing files that changed from the base of the PR and between d975247 and e8b1f94.

📒 Files selected for processing (1)

• code/core/src/component-testing/components/InteractionsPanel.test.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• code/core/src/component-testing/components/InteractionsPanel.test.tsx

---

📝 Walkthrough

Walkthrough

Refactors component-testing UI: Interaction renders as semantic list items with updated ARIA, icons, hover/disabled behavior, and error styling; InteractionsPanel gains an accessible sectioned list, sr-only heading, live status announcements, and an optional id prop; tests added for rendering and accessibility behaviors.

Changes

Cohort / File(s)	Summary
Interaction Component code/core/src/component-testing/components/Interaction.tsx	Converted container to li with listStyle: 'none'; renamed isInteractive → isNavigationDisabled; compute interactionLabel and interactionStatus; add aria-expanded/expanded text; toggle icons switched to ChevronRight/ChevronDown; apply error background for ERROR calls; adjust hover/focus semantics.
InteractionsPanel Component code/core/src/component-testing/components/InteractionsPanel.tsx	Added optional id?: string; introduced InteractionsSection/InteractionsHeading/InteractionsList with srOnly heading; compute isListBusy and statusAnnouncement via StatusAnnouncementMapping; add LiveStatus live region with aria-busy and assertive announcements for error/completed-with-exceptions; render structured ol instead of flat list.
Tests code/core/src/component-testing/components/InteractionsPanel.test.tsx	New test suite validating ordered-list rendering, accessible list items, toggle button labels for expanded/collapsed nested steps, and run-state announcements/aria-busy across statuses (rendering, playing, errored, completed, aborted).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Core: Significantly improve Storybook's own accessibility #32458: Overlapping a11y and list-rendering changes touching Interaction.tsx and InteractionsPanel.tsx, including ARIA and accessibility refactors.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

code/core/src/component-testing/components/InteractionsPanel.test.tsx (1)

98-122: Consider adding test coverage for remaining status values.

The test covers 'playing' and 'errored' statuses but the StatusAnnouncementMapping also includes 'rendering', 'completed' (without errors), and 'aborted'. Consider adding assertions for these states to ensure comprehensive coverage of the live region announcements.

Example additional assertions

// Test 'aborted' status announcement
rerender(
  <ThemeProvider theme={convert(themes.light)}>
    <InteractionsPanel
      {...createProps({
        status: 'aborted',
        interactions: getInteractions(CallStates.DONE),
      })}
    />
  </ThemeProvider>
);
expect(screen.getByRole('status')).toHaveTextContent('Component test was aborted.');

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@code/core/src/component-testing/components/InteractionsPanel.test.tsx` around
lines 98 - 122, Add assertions for the remaining statuses defined in
StatusAnnouncementMapping so the live-region announcements are fully covered:
after the initial 'playing' and 'errored' assertions, call rerender with
InteractionsPanel (using createProps) for 'rendering', 'completed' (successful),
and 'aborted' statuses using appropriate getInteractions(CallStates.*) values,
then assert the role="status" or role="alert" contains the expected messages for
each status; update the test in InteractionsPanel.test.tsx near the existing
rerender blocks so assertions for 'rendering', 'completed', and 'aborted' are
included and use the ThemeProvider/convert(themes.light) wrapper as done
currently.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@code/core/src/component-testing/components/InteractionsPanel.test.tsx`:
- Around line 98-122: Add assertions for the remaining statuses defined in
StatusAnnouncementMapping so the live-region announcements are fully covered:
after the initial 'playing' and 'errored' assertions, call rerender with
InteractionsPanel (using createProps) for 'rendering', 'completed' (successful),
and 'aborted' statuses using appropriate getInteractions(CallStates.*) values,
then assert the role="status" or role="alert" contains the expected messages for
each status; update the test in InteractionsPanel.test.tsx near the existing
rerender blocks so assertions for 'rendering', 'completed', and 'aborted' are
included and use the ThemeProvider/convert(themes.light) wrapper as done
currently.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4782b256-22fd-457a-8a55-016b4fdf2478

📥 Commits

Reviewing files that changed from the base of the PR and between 1ba2d07 and d975247.

📒 Files selected for processing (3)

• code/core/src/component-testing/components/Interaction.tsx
• code/core/src/component-testing/components/InteractionsPanel.test.tsx
• code/core/src/component-testing/components/InteractionsPanel.tsx