Skip to content

fix(tabs): ensure focused tab is fully visible - #8115

Draft
nuria1110 wants to merge 1 commit into
masterfrom
FE-7749
Draft

fix(tabs): ensure focused tab is fully visible#8115
nuria1110 wants to merge 1 commit into
masterfrom
FE-7749

Conversation

@nuria1110

@nuria1110 nuria1110 commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

fix #8093, #7570

Proposed behaviour

When horizontal scrolling is present and using keyboard navigation:

  • Focused Tab is fully visible.
  • Left scroll button renders when navigating through the tablist.
image

Current behaviour

When horizontal scrolling is present and using keyboard navigation:

  • Focused Tab is obscured.
  • Left scroll button does not render when navigating through the tablist.
image

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

Ensures focused tab is fully visible when using keyboard navigation. Also ensures that left scroll
button is rendered when using keyboard navigation.

fix #8093
// scrollIntoView is not implemented in jsdom but hasn't been marked as such
Element.prototype.scrollIntoView = jest.fn();
});

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Are you sure we need this mock in legacy? i see no other changes in legacy, or scrollIntoView call

@DipperTheDan
DipperTheDan self-requested a review August 6, 2026 11:46

@DipperTheDan DipperTheDan left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I'm happy to approve once @ibutakova question has been answered.

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.

Tabs - tab obscured while navigating via keyboard

3 participants