fix(tabs): add correct aria-orientation and keyboard navigation for vertical tabs

Author: anusha-c18

.changeset/five-kiwis-carry.md

@@ -0,0 +1,5 @@
+---
+"@heroui/tabs": patch
+---
+
+Fix vertical tabs to use correct aria-orientation and support Up/Down arrow navigation for accessibility.

packages/components/tabs/__tests__/tabs.test.tsx

@@ -539,4 +539,67 @@ describe("Tabs", () => {
       expect(newTabButtons[2]).toHaveAttribute("aria-selected", "true");
     });
   });
+
+  it("should set vertical aria-orientation", () => {
+    const wrapper = render(
+      <Tabs isVertical aria-label="Tabs vertical test" data-testid="tabWrapper">
+        <Tab key="item1" title="Item 1">
+          <div>Content 1</div>
+        </Tab>
+        <Tab key="item2" title="Item 2">
+          <div>Content 2</div>
+        </Tab>
+        <Tab key="item3" title="Item 3">
+          <div>Content 3</div>
+        </Tab>
+      </Tabs>,
+    );
+
+    const tablist = wrapper.getByRole("tablist");
+
+    expect(tablist).toHaveAttribute("aria-orientation", "vertical");
+  });
+
+  it("should allow vertical tabs to navigate with up and down arrows", async () => {
+    const wrapper = render(
+      <Tabs isVertical aria-label="Tabs vertical test" data-testid="tabWrapper">
+        <Tab key="item1" title="Item 1">
+          <div>Content 1</div>
+        </Tab>
+        <Tab key="item2" title="Item 2">
+          <div>Content 2</div>
+        </Tab>
+        <Tab key="item3" title="Item 3">
+          <div>Content 3</div>
+        </Tab>
+      </Tabs>,
+    );
+
+    const tab1 = wrapper.getByRole("tab", {name: "Item 1"});
+    const tab2 = wrapper.getByRole("tab", {name: "Item 2"});
+    const tab3 = wrapper.getByRole("tab", {name: "Item 3"});
+
+    expect(tab1).toHaveAttribute("aria-selected", "true");
+    expect(tab2).toHaveAttribute("aria-selected", "false");
+    expect(tab3).toHaveAttribute("aria-selected", "false");
+
+    act(() => {
+      focus(tab1);
+    });
+
+    await user.keyboard("[ArrowDown]");
+    expect(tab1).toHaveAttribute("aria-selected", "false");
+    expect(tab2).toHaveAttribute("aria-selected", "true");
+    expect(tab3).toHaveAttribute("aria-selected", "false");
+
+    await user.keyboard("[ArrowDown]");
+    expect(tab1).toHaveAttribute("aria-selected", "false");
+    expect(tab2).toHaveAttribute("aria-selected", "false");
+    expect(tab3).toHaveAttribute("aria-selected", "true");
+
+    await user.keyboard("[ArrowUp]");
+    expect(tab1).toHaveAttribute("aria-selected", "false");
+    expect(tab2).toHaveAttribute("aria-selected", "true");
+    expect(tab3).toHaveAttribute("aria-selected", "false");
+  });
 });

packages/components/tabs/src/use-tabs.ts

@@ -106,11 +106,18 @@ export function useTabs<T extends object>(originalProps: UseTabsProps<T>) {
   const disableAnimation =
     originalProps?.disableAnimation ?? globalContext?.disableAnimation ?? false;
 
+  const placement = (variantProps as Props).placement ?? (isVertical ? "start" : "top");
+  const orientation = placement === "start" || placement === "end" ? "vertical" : "horizontal";
+
   const state = useTabListState<T>({
     children: children as CollectionChildren<T>,
     ...otherProps,
   });
-  const {tabListProps} = useTabList<T>(otherProps as AriaTabListProps<T>, state, domRef);
+  const {tabListProps} = useTabList<T>(
+    {...(otherProps as AriaTabListProps<T>), orientation},
+    state,
+    domRef,
+  );
 
   const slots = useMemo(
     () =>
@@ -161,7 +168,6 @@ export function useTabs<T extends object>(originalProps: UseTabsProps<T>) {
     [baseStyles, otherProps, slots],
   );
 
-  const placement = (variantProps as Props).placement ?? (isVertical ? "start" : "top");
   const getWrapperProps: PropGetter = useCallback(
     (props) => ({
       "data-slot": "tabWrapper",
@@ -174,13 +180,18 @@ export function useTabs<T extends object>(originalProps: UseTabsProps<T>) {
   );
 
   const getTabListProps: PropGetter = useCallback(
-    (props) => ({
-      ref: domRef,
-      "data-slot": "tabList",
-      className: slots.tabList({class: clsx(classNames?.tabList, props?.className)}),
-      ...mergeProps(tabListProps, props),
-    }),
-    [domRef, tabListProps, classNames, slots],
+    (props) =>
+      mergeProps(
+        tabListProps,
+        {
+          ref: domRef,
+          "data-slot": "tabList",
+          "aria-orientation": orientation,
+          className: slots.tabList({class: clsx(classNames?.tabList, props?.className)}),
+        },
+        props,
+      ),
+    [domRef, tabListProps, classNames, slots, orientation],
   );
 
   const getTabCursorProps: PropGetter = useCallback(