[bug]: TabsContent missing focus styles v2 (tailwind v4) -- a11y issue for keyboard navigation

[firxworx]

Describe the bug

shadcn/ui v2 for tailwind v4 TabsContent of Tabs is missing focus:* / focus-visible:* styles for keyboard navigation.

Refer to tabs at https://v4.shadcn.com/

Compare to example of underlying radix-ui component at:
https://www.radix-ui.com/primitives/docs/components/tabs

Background:

When you keyboard navigate a common a11y pattern is for the TabsContent to be focusable. Therefore for keyboard navigation users it requires some sort of visual feedback to indicate that the tab content parent itself (i.e. not a child of it) has current focus.

Note per the radix-ui example how the style.css includes:

.TabsContent:focus {
	box-shadow: 0 0 0 2px black;
}

---

To slightly complicate what might look on the surface to be an easy fix.

This particular focus behaviour might not be desirable for a lot of developers / designers.

The W3C WAI ARIA provides examples of two patterns:

• https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/
• https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-manual/

Note the difference with board navigation. With the latter, the tabs content body itself is not focusable and the next thing on the tab order after the tabs themselves is children of the tabs content.

I imagine for shadcn/ui developers might appreciate being to choose which pattern via props.

An example scenario where I can imagine devs complaining if shadcn/ui were to suddenly add focus styles to TabsContent is a Dialog that contains a tabbed interface (as a hypothetical example imagine radix-ui's tabs example was rendered in a modal Dialog).

Affected component/components

Tabs, TabsContent

How to reproduce

1. Go to https://v4.shadcn.com/
2. Scroll to the Tabs example and attempt to navigate with keyboard
3. Note how there is no indication for what

Compare the UX to example at https://www.radix-ui.com/primitives/docs/components/tabs

Also compare tab navigation UX vs. W3C ARIA patterns:

https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/
https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-manual/

Codesandbox/StackBlitz link

No response

Logs

System Info

N/A - this is an a11y issue with missing styling

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues