fix(a11y-landmark): spread other html props over tabs nav item (#1405)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Author: Stefan3002

src/components/Tabs/Tabs.test.tsx

@@ -76,6 +76,24 @@ describe("Tabs", () => {
     ).toHaveClass("list-item-class");
   });
 
+  it("forwards aria-label to the navigation element", () => {
+    render(
+      <Tabs
+        aria-label="Section tabs"
+        links={[
+          {
+            href: "/path1",
+            label: "label1",
+          },
+        ]}
+      />,
+    );
+
+    expect(
+      screen.getByRole("navigation", { name: "Section tabs" }),
+    ).toHaveAttribute("aria-label", "Section tabs");
+  });
+
   it("can use custom elements as links", () => {
     render(
       <Tabs

src/components/Tabs/Tabs.tsx

@@ -1,6 +1,12 @@
 import classNames from "classnames";
 import React from "react";
-import type { HTMLProps, ElementType, ReactNode, ComponentType } from "react";
+import type {
+  HTMLProps,
+  ElementType,
+  ReactNode,
+  ComponentType,
+  ComponentPropsWithoutRef,
+} from "react";
 
 import type { ClassName } from "types";
 
@@ -40,7 +46,7 @@ export type Props<P = null> = {
    * Optional classes applied to the "ul" element.
    */
   listClassName?: string;
-};
+} & Omit<ComponentPropsWithoutRef<"nav">, "children" | "className">;
 
 /**
  * This is the [React](https://reactjs.org/) component for Vanilla [Tabs](https://vanillaframework.io/docs/patterns/tabs).
@@ -51,9 +57,10 @@ const Tabs = <P,>({
   className,
   links,
   listClassName,
+  ...props
 }: Props<P>): React.JSX.Element => {
   return (
-    <nav className={classNames("p-tabs", className)}>
+    <nav className={classNames("p-tabs", className)} {...props}>
       <ul role="tablist" className={classNames("p-tabs__list", listClassName)}>
         {links.map((link, i) => {
           const {