refactor: update tabs demo/doc

Author: mertsincan

apps/showcase/__store__/index.tsx

@@ -1251,6 +1251,10 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
                 'component': React.lazy(() => import('demo/styled/listbox/filter-demo')),
                 'filePath': 'demo/styled/listbox/filter-demo.tsx',
             },
+            'focus-behavior-demo': {
+                'component': React.lazy(() => import('demo/styled/listbox/focus-behavior-demo')),
+                'filePath': 'demo/styled/listbox/focus-behavior-demo.tsx',
+            },
             'invalid-demo': {
                 'component': React.lazy(() => import('demo/styled/listbox/invalid-demo')),
                 'filePath': 'demo/styled/listbox/invalid-demo.tsx',

apps/showcase/assets/styles/layout/_designer.css

@@ -103,7 +103,7 @@
         }
     }
 
-    .p-tabs {
+    /*.p-tabs {
         .p-tablist-tab-list {
             background: transparent;
             border-style: solid;
@@ -135,12 +135,12 @@
 
         .p-tab-active {
             background: transparent;
-            border-color: var(--high-contrast-text-color);
+            border-color: transparent;
             color: var(--high-contrast-text-color);
         }
 
         .p-tablist-active-bar {
-            display: none;
+            display: block;
             inset-block-end: -1px;
             height: 1px;
             background: var(--high-contrast-text-color);
@@ -246,4 +246,5 @@
             box-shadow: none;
         }
     }
+    */
 }

apps/showcase/demo/styled/listbox/focus-behavior-demo.tsx

@@ -0,0 +1,52 @@
+'use client';
+import type { ListboxRootValueChangeEvent } from '@primereact/types/shared/listbox';
+import { Button } from '@primereact/ui/button';
+import { Listbox } from '@primereact/ui/listbox';
+import * as React from 'react';
+
+const cities = [
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+];
+
+export default function FocusBehaviorDemo() {
+    const [selectedCity, setSelectedCity] = React.useState<string | null>(null);
+    const [autoOptionFocus, setAutoOptionFocus] = React.useState(true);
+    const [selectOnFocus, setSelectOnFocus] = React.useState(false);
+    const [focusOnHover, setFocusOnHover] = React.useState(true);
+
+    return (
+        <div className="space-y-4">
+            <div className="flex flex-wrap gap-2 justify-center">
+                <Button size="small" severity={autoOptionFocus ? 'primary' : 'secondary'} onClick={() => setAutoOptionFocus((prev) => !prev)}>
+                    autoOptionFocus: {String(autoOptionFocus)}
+                </Button>
+                <Button size="small" severity={selectOnFocus ? 'primary' : 'secondary'} onClick={() => setSelectOnFocus((prev) => !prev)}>
+                    selectOnFocus: {String(selectOnFocus)}
+                </Button>
+                <Button size="small" severity={focusOnHover ? 'primary' : 'secondary'} onClick={() => setFocusOnHover((prev) => !prev)}>
+                    focusOnHover: {String(focusOnHover)}
+                </Button>
+            </div>
+
+            <div className="flex justify-center">
+                <Listbox.Root
+                    value={selectedCity}
+                    onValueChange={(e: ListboxRootValueChangeEvent) => setSelectedCity(e.value as string | null)}
+                    options={cities}
+                    optionLabel="name"
+                    optionValue="code"
+                    autoOptionFocus={autoOptionFocus}
+                    selectOnFocus={selectOnFocus}
+                    focusOnHover={focusOnHover}
+                    className="w-full md:w-56"
+                >
+                    <Listbox.List />
+                </Listbox.Root>
+            </div>
+        </div>
+    );
+}

apps/showcase/docs/styled/components/listbox/features.mdx

@@ -35,6 +35,12 @@ Use the `value` and `onValueChange` properties to control the selected value. Th
 
 <DocDemoViewer name="listbox:controlled-demo" />
 
+### Focus Behavior
+
+Use `autoOptionFocus` to control initial focused option behavior, `selectOnFocus` to select options while navigating with focus, and `focusOnHover` to move focus with mouse hover when the component is focused.
+
+<DocDemoViewer name="listbox:focus-behavior-demo" />
+
 ### Option
 
 Use the `Listbox.Option` component to define options manually. Each option requires a `uKey` or `index` prop for identification and the `optionKey` property on the root specifies the corresponding field from the data.

apps/showcase/docs/styled/components/tabs/features.mdx

@@ -15,11 +15,11 @@ import { Tabs } from '@primereact/ui/tabs';
 ```tsx
 <Tabs.Root>
     <Tabs.List>
-        <Tabs.Tab value="tab1">Tab 1</Tabs.Tab>
+        <Tabs.Tab />
         <Tabs.Indicator />
     </Tabs.List>
     <Tabs.Panels>
-        <Tabs.Panel value="tab1">Tab 1 Content</Tabs.Panel>
+        <Tabs.Panel />
     </Tabs.Panels>
 </Tabs.Root>
 ```
@@ -66,13 +66,13 @@ Use custom markup inside `Tabs.Tab` and `Tabs.Panel` to build richer tab content
 
 ### Screen Reader
 
-`Tabs.List` acts as the tablist container. `Tabs.Tab` elements use the `tab` role and expose selected and disabled state via ARIA attributes. `Tabs.Panel` uses the `tabpanel` role for associated content.
+`Tabs.Tab` elements use the `tab` role and expose selected and disabled state via ARIA attributes. `Tabs.Panel` uses the `tabpanel` role and links back to its related tab with `aria-labelledby`.
 
 ### Tab Keyboard Support
 
 | Key           | Function                                                                                             |
 | ------------- | ---------------------------------------------------------------------------------------------------- |
-| `tab`         | Moves focus through the header.                                                                      |
+| `tab`         | Moves focus to the active tab and then proceeds to the next focusable element.                       |
 | `enter`       | Activates the focused tab header.                                                                    |
 | `space`       | Activates the focused tab header.                                                                    |
 | `right arrow` | Moves focus to the next header. If focus is on the last header, moves focus to the first header.     |

packages/@primereact/headless/src/tabs/useTabs.ts

@@ -43,12 +43,12 @@ export const useTabs = withHeadless({
 
             if (!tabs) return;
 
-            const activeTab = findSingle(tabs, '[data-pc-section="tab"][data-p-active="true"]');
+            const activeTab = findSingle(tabs, '[data-slot="tab"][data-p-active="true"]');
 
             if (!activeTab) return;
 
             // Get elements and their offsets
-            const scrollContainer = tabs.querySelector('[data-pc-section="content"]') as HTMLElement;
+            const scrollContainer = tabs.querySelector('[data-slot="content"]') as HTMLElement;
 
             if (!scrollContainer) return;
 
@@ -82,7 +82,7 @@ export const useTabs = withHeadless({
 
         const focusTab = (tabElement: HTMLElement | null, direction: 'next' | 'previous' | 'first' | 'last'): void => {
             const findTab = (listElement: HTMLElement): HTMLElement | null => {
-                return findSingle(listElement, '[data-pc-section="tab"]') as HTMLElement | null;
+                return findSingle(listElement, '[data-slot="tab"]') as HTMLElement | null;
             };
 
             const findAdjacentTab = (listElement: HTMLElement, direction: 'next' | 'previous', selfCheck = false): HTMLElement | null => {
@@ -101,11 +101,11 @@ export const useTabs = withHeadless({
             };
 
             const findBoundaryTab = (boundary: 'first' | 'last'): HTMLElement | null => {
-                const listElement = findSingle(elementRef?.current as HTMLElement, '[data-pc-section="tablist"]') as HTMLElement | null;
+                const listElement = findSingle(elementRef?.current as HTMLElement, '[data-slot="tabList"]') as HTMLElement | null;
 
                 if (!listElement) return null;
 
-                const tabSelector = '[data-pc-section="tab"]';
+                const tabSelector = '[data-slot="tab"]';
                 let targetChild: HTMLElement | null = null;
 
                 if (boundary === 'first') {

packages/primereact/src/tabs/list/TabsList.tsx

@@ -148,7 +148,7 @@ export const TabsList = withComponent({
                             type="button"
                             className={tabs?.cx('prevButton')}
                             aria-label={props.prevButtonAriaLabel}
-                            tabIndex={tabs?.props.tabindex}
+                            tabIndex={tabs?.props.tabIndex}
                             style={{
                                 zIndex: 50
                             }}
@@ -169,7 +169,7 @@ export const TabsList = withComponent({
                             type="button"
                             className={tabs?.cx('nextButton')}
                             aria-label={props.nextButtonAriaLabel}
-                            tabIndex={tabs?.props.tabindex}
+                            tabIndex={tabs?.props.tabIndex}
                             onClick={onNextButtonClick}
                             {...ptmi('nextButton')}
                             style={{

packages/primereact/src/tabs/tab/TabsTab.tsx

@@ -22,7 +22,7 @@ export const TabsTab = withComponent({
         const rootProps = mergeProps(
             {
                 className: tabs?.cx('tab', { active, disabled: props.disabled }),
-                tabIndex: active ? tabs?.props.tabindex : -1,
+                tabIndex: active ? tabs?.props.tabIndex : -1,
                 disabled: props.disabled,
                 role: 'tab',
                 'data-p-active': active,