NavigationTabs: Add tag prop to allow overriding the underlying nav element (#2868)

## Summary:

When NavigationTabs is placed in another `nav` element, NavigationTabs doesn't need to use a `nav` element. By adding the `tag` prop, consumers can customize the underlying element. `tag` defaults to `nav` when not provided

Issue: WB-2156

## Test plan:

Confirm setting the tag prop changes the underlying element rendered (`?path=/story/packages-tabs-navigationtabs--tag`)

<img width="1471" height="350" alt="image" src="https://github.com/user-attachments/assets/a5134d6c-0412-47cc-8d08-51eae6c4cd7a" />

Author: beaesguerra

Reviewers: marcysutton

Required Reviewers:

Approved By: marcysutton

Checks: ✅ 12 checks were successful, ⏭️  3 checks have been skipped

Pull Request URL: #2868

Author: beaesguerra

.changeset/silver-camels-raise.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-tabs": minor
+---
+
+NavigationTabs: Add tag prop to allow overriding the underlying nav element

__docs__/wonder-blocks-tabs/navigation-tabs.argtypes.tsx

@@ -24,4 +24,14 @@ export default {
             type: undefined,
         },
     },
+    tag: {
+        control: {
+            type: "text",
+        },
+        table: {
+            type: {
+                summary: "keyof JSX.IntrinsicElements",
+            },
+        },
+    },
 } satisfies ArgTypes;

__docs__/wonder-blocks-tabs/navigation-tabs.stories.tsx

@@ -456,3 +456,21 @@ export const ChildrenRenderFunction: StoryComponentType = {
         chromatic: {delay: 500},
     },
 };
+
+/**
+ * By default, the `NavigationTabs` component renders as a `nav` element. If
+ * the underlying element needs to be changed, the `tag` prop can be used to
+ * specify the HTML tag to render.
+ */
+export const Tag: StoryComponentType = {
+    args: {
+        children: navigationTabItems,
+        tag: "div",
+    },
+    parameters: {
+        chromatic: {
+            // Disabling because this story doesn't test anything visual.
+            disableSnapshot: true,
+        },
+    },
+};

packages/wonder-blocks-tabs/src/components/__tests__/navigation-tabs.test.tsx

@@ -34,6 +34,21 @@ describe("NavigationTabs", () => {
         expect(nav).toBeInTheDocument();
     });
 
+    it("should use the tag prop if provided ", async () => {
+        // Arrange
+        render(
+            <NavigationTabs tag="div" testId="navigation-tabs">
+                {children}
+            </NavigationTabs>,
+        );
+
+        // Act
+        const navigationTabs = await screen.findByTestId("navigation-tabs");
+
+        // Assert
+        expect(navigationTabs).toHaveProperty("tagName", "DIV");
+    });
+
     it("should render a list element", async () => {
         // Arrange
         render(

packages/wonder-blocks-tabs/src/components/navigation-tabs.tsx

@@ -49,9 +49,13 @@ type Props = AriaProps & {
      * if the user has `prefers-reduced-motion` opted in. Defaults to `false`.
      */
     animated?: boolean;
+
+    /**
+     * The HTML tag to render. Defaults to `nav`.
+     */
+    tag?: keyof JSX.IntrinsicElements;
 };
 
-const StyledNav = addStyle("nav");
 const StyledUl = addStyle("ul");
 const StyledDiv = addStyle("div");
 
@@ -90,9 +94,12 @@ export const NavigationTabs = React.forwardRef(function NavigationTabs(
         "aria-labelledby": ariaLabelledBy,
         styles: stylesProp,
         animated = false,
+        tag = "nav",
         ...otherProps
     } = props;
 
+    const StyledTag = React.useMemo(() => addStyle(tag), [tag]);
+
     /**
      * Ref for the list element so we can observe when the size of the children
      * changes. This is necessary to update the underline position. We watch the
@@ -117,7 +124,7 @@ export const NavigationTabs = React.forwardRef(function NavigationTabs(
     });
 
     return (
-        <StyledNav
+        <StyledTag
             id={id}
             data-testid={testId}
             aria-label={ariaLabel}
@@ -136,7 +143,7 @@ export const NavigationTabs = React.forwardRef(function NavigationTabs(
             the list so that it can slide between tab items. */}
                 {<div {...indicatorProps} />}
             </StyledDiv>
-        </StyledNav>
+        </StyledTag>
     );
 });