Responsive tabs : selected tab not visible

[gusch]

Description

When navigating with arrows in tabs, at some point, we can be on a tab that is partially visible (tab13 at the begining of the video) or completely hidden (tab14).
In the video, i must navigate to tab15 for the “next page” to happen.

Enregistrement.de.l.ecran.2025-10-08.a.09.14.01.mov

Reproduction

https://carbon.sage.com/?path=/docs/tabs--docs#responsive

Steps to reproduce

No response

JIRA ticket numbers (Sage only)

No response

Suggested solution

No response

Carbon version

157.5.2

React version

v17

Design tokens version

4.35.0

Relevant browsers

Chrome

Relevant OSs

MacOS

Additional context

This issue was closed and seems the same
#6758

Confidentiality

• I confirm there is no confidential or commercially sensitive information included.

[Parsium]

Thanks for flagging this @gusch,

It seems the arrow buttons that control focus are absolutely positioned, so even though the tab title is scrolled into view when focused, it can still end up being partially obscured.

Have you noticed the tab titles being fully obscured in your project(s)? We've mainly seen the full obscuration issue mainly occurs on the Tabs docs page, not when viewing the example in canvas mode or a separate tab. (The docs page renders examples in iframes, which can sometimes cause odd behaviour).

If you're seeing this outside the docs page, we can prioritise fixing this, given that full obscuration fails WCAG 2.2 AA.

Even though partial obscuration doesn't fail Level AA, it's still not ideal from a usability perspective, so we should make the behaviour more consistent regardless.

[Parsium]

FE-7508

[gusch]

Hello @Parsium
I indeed do not manage to replicate full obscuration directly in CM.

[nicktitchmarsh]

FE-7227 is inProgress and should resolve this