UI: Improve 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; collapsible interaction sections now announce expanded/collapsed state and expose aria-expanded.

• Improvements

  • Computed interaction labels and human-readable statuses displayed; main action button reflects navigation availability.
  • Accessibility and UX tweaks: richer aria-labels, aria-busy on the list, assertive error announcements, chevron toggle behavior, list semantics, and refined hover/disabled states.

• Tests

  • New tests covering rendering, toggles, live announcements, labels, and run/error flows.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

Reworks Interaction and InteractionsPanel markup/ARIA and label/status logic: semantic list markup, new live-region announcements, updated toggle icons/aria-expanded, computed interaction labels/status, disabled navigation handling, new tests, and an updated e2e selector.

Changes

Cohort / File(s)	Summary
Interaction component code/core/src/component-testing/components/Interaction.tsx	Changed row container div → li with listStyle: 'none'; renamed styling prop to $isNavigationDisabled and suppressed hover when navigation is disabled; switched nested-step chevrons to ChevronRightIcon/ChevronDownIcon; added aria-expanded to toggle; added and exported getInteractionLabel(call) and getInteractionStatusText(call) + stepStatusTextMap; compute interactionLabel/interactionStatus and use them in button aria-label and disabled state.
InteractionsPanel component code/core/src/component-testing/components/InteractionsPanel.tsx	Added optional id?: string; introduced semantic elements (InteractionsSection, InteractionsHeading, InteractionsList) and sr-only heading styles; added LiveStatus live region and StatusAnnouncementMapping; compute isListBusy and statusAnnouncement; render interactions as an ol with aria-busy and assertive/error live-region handling.
Unit tests code/core/src/component-testing/components/Interaction.test.ts, code/core/src/component-testing/components/InteractionsPanel.test.tsx	Added tests for getInteractionLabel behaviors and a new suite verifying ordered-list rendering, accessible list items/action labels, nested-steps toggle labels (expanded/collapsed), run-state announcements, and aria-busy across statuses.
E2E test code/e2e-tests/component-tests.spec.ts	Changed locator to query interaction step controls by role/name: getByRole('button', { name: /^(Go to )?interaction step:/i }) instead of selecting by aria-label="Interaction step".

Sequence Diagram(s)

(Skipped — changes are accessibility/markup and localized UI logic updates that do not introduce a new multi-component sequential flow.)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Core: Significantly improve Storybook's own accessibility #32458: Overlapping accessibility and list-rendering changes touching Interaction.tsx and InteractionsPanel.tsx (ARIA, icons, collapse/expand behavior).

---

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

[anchmelev]

Hi @Sidnioulz, gentle follow-up on this PR since it closes #31701.
I implemented the semantic list structure for interaction steps, improved labels/toggle semantics, added aria-busy and live status announcements, and included unit tests covering the new behavior.
All checks are passing — would appreciate a review when you have time.

[Sidnioulz]

Hi @Sidnioulz, gentle follow-up on this PR since it closes #31701. I implemented the semantic list structure for interaction steps, improved labels/toggle semantics, added aria-busy and live status announcements, and included unit tests covering the new behavior. All checks are passing — would appreciate a review when you have time.

Hi there!

Thank you for the PR. We're gearing up for 10.3 right now, so there is a feature freeze in effect. It might take a bit longer than usual to review but it's now on my todo list :)

[storybook-app-bot]

Package Benchmarks

^{Commit: 3f76e6f, ran on 3 April 2026 at 11:28:06 UTC}

No significant changes detected, all good. 👏

[Sidnioulz]

This is a fantastic improvement overall! Kudos! 🎉

There's a bunch of PR feedback for you to look at, and I'll get in touch with colleagues to check the parts I'm not sure about.

[anchmelev]

This is a fantastic improvement overall! Kudos! 🎉

There's a bunch of PR feedback for you to look at, and I'll get in touch with colleagues to check the parts I'm not sure about.

Thanks a lot! I’ve now addressed the review feedback on my side and gave everything another pass as well.

[Sidnioulz]

FYI the CI errors appear unrelated to your code. We're gonna fix that upstream and then rebase your branch. I'm also waiting to hear from Michael for the copy check.

[Sidnioulz]

Excellent work @anchmelev! Thank you for your work and your responsiveness.