[a11y]: No focus indicator on tabs in high-contrast mode with activation set to manual

[nicolerabjohn]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

1.67.0

React version

No response

Automated testing tool and ruleset

Chrome Devtools High Contrast Mode

Assistive technology

No response

Description

When using tabs with activation set to manual in high contrast mode, there is no indication which tab the user is on and could select. When a tab is selected, then it is highlighted, but nothing changes when moving through the tabs before selection.

WCAG 2.1 Violation

No response

Reproduction/example

https://stackblitz.com/edit/github-bza7vj?file=src%2FApp.jsx

Steps to reproduce

1. Open the stackblitz in Chrome on a Mac
2. Open chrome devtools
3. Set "Emulate CSS media feature forced-colors" to active
4. Move through the tabs with the arrow keys without pressing Enter.

Suggested Severity

None

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[ariellalgilmore]

Hi @nicolerabjohn,

I used the stackblitz provided and turned on the "emulate css media feature forced-colors" to active and was able to use my arrow keys and see the change. I did not press enter.

I first tab to the element which highlights the first tab and then use arrow keys and see it update on each tab
https://github.com/user-attachments/assets/148546a1-fe61-42d2-b975-607eb788512c