[a11y]: Tabs focus going to TabList div in Firefox

[makafsal]

Package

@carbon/react

Browser

Firefox

Operating System

Windows, MacOS

Package version

v1.64.0

React version

v18.2.0

Automated testing tool and ruleset

Manual

Assistive technology

No response

Description

When hitting the tab key in Firefox, the focus goes to the TabList div element.

WCAG 2.1 Violation

No response

Reproduction/example

https://github.com/user-attachments/assets/12cc21e4-f66f-480f-b210-8d85c299c153

https://react.carbondesignsystem.com/?path=/story/components-tabs--default

Steps to reproduce

1. Open in Firefox: https://react.carbondesignsystem.com/?path=/story/components-tabs--default
2. Move to the main content and press the tab key to focus on the tab item
3. Observe that the tab is focused on the TabList div element

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Code of Conduct

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

[SudoUserReal]

This first demo? What you want?

[VeejaLiu]

Oh, I haven’t looked at the documentation under Chat. But I want to know how to create a code box like this that includes syntax highlighting, language type indication, and a copy button. I don’t want a chat box, but I would like a code box like this. Can this be achieved using the CodeHighlight component? Or is there an easier way to achieve the same effect? It seems that using CodeHighlight requires additional setup similar to Prism.js, which looks a bit complicated. But the demo, It seems only used simple Markdown to achieve.

[SudoUserReal]

Add language indicator and copy button function yourself by wrapping CodeHighlight component with your own div and css. Highlight different code language by importing extra prismJS language plugin following https://semi.design/en-US/plus/codehighlight#Support%20other%20languages

[VeejaLiu]

Okay... Thank you for your reply. Although this is different from what I expected, I don’t understand why the chat box component can achieve this effect so simply. But still, thank you for your response.