Skip to content

Conversation

@nineteen88
Copy link
Contributor

@nineteen88 nineteen88 commented Jan 12, 2026

Proposed behaviour

  • ensure tabs are grouped so that they will be read out correctly by screen readers
  • update the colour of the background on Tabs stories so that it aligns with the DS

Current behaviour

  • tabs are being read out as 1 of 1 even if there are multiple tabs

Checklist

  • Commits follow our style guide
  • Related issues linked in commit messages if required
  • Screenshots are included in the PR if useful
  • All themes are supported if required
  • Unit tests added or updated if required
  • Playwright automation tests added or updated if required
  • Storybook added or updated if required
  • Translations added or updated (including creating or amending translation keys table in storybook) if required
  • Typescript d.ts file added or updated if required
  • Related docs have been updated if required

QA

  • Tested in provided StackBlitz sandbox/Storybook
  • Add new Playwright test coverage if required
  • Carbon implementation matches Design System/designs
  • UI Tests GitHub check reviewed if required

Additional context

Testing instructions

tomdavies73
tomdavies73 previously approved these changes Jan 12, 2026
@edleeks87 edleeks87 self-requested a review January 12, 2026 11:03
@nineteen88 nineteen88 requested a review from Copilot January 12, 2026 11:15
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes an accessibility issue where screen readers were announcing tabs incorrectly as "1 of 1" instead of properly grouping them. The fix adds the role="presentation" attribute to ensure proper tab grouping semantics for assistive technologies.

Changes:

  • Added role="presentation" to the StyledTabProvider component to improve screen reader announcements
  • Updated the Storybook decorator background color to align with the Design System

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File Description
src/components/tabs/next/tab.context.tsx Added role="presentation" attribute to fix screen reader tab grouping
src/components/tabs/next/tabs.stories.tsx Updated background color in Storybook decorator to match Design System standards

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

edleeks87
edleeks87 previously approved these changes Jan 12, 2026
@edleeks87 edleeks87 marked this pull request as ready for review January 12, 2026 11:23
@edleeks87 edleeks87 requested a review from a team as a code owner January 12, 2026 11:23
@nineteen88 nineteen88 changed the title FE-7560 - Tabs aren't grouped correctly so screen readers read them out incorrectly fix(tabs): include role:presentation to ensure tabs are grouped Jan 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

4 participants