fix(a11y-tabs): improve a11y compliance of the tabs component [AC-4742] (#1407)

Author: Stefan3002

src/components/Tabs/Tabs.test.tsx

@@ -41,13 +41,11 @@ describe("Tabs", () => {
         ]}
       />,
     );
-    // TODO: use a more appropriate attribute once the issue below is addressed:
-    // https://github.com/canonical-web-and-design/vanilla-framework/issues/4481
-    expect(screen.getByRole("link", { name: "label1" })).toHaveAttribute(
+    expect(screen.getByRole("tab", { name: "label1" })).toHaveAttribute(
       "aria-selected",
       "true",
     );
-    expect(screen.getByRole("link", { name: "label2" })).toHaveAttribute(
+    expect(screen.getByRole("tab", { name: "label2" })).toHaveAttribute(
       "aria-selected",
       "false",
     );
@@ -69,9 +67,13 @@ describe("Tabs", () => {
       />,
     );
     expect(screen.getByRole("navigation")).toHaveClass("nav-class");
-    expect(screen.getByRole("list")).toHaveClass("list-class");
-    expect(screen.getByRole("listitem")).toHaveClass("list-item-class");
-    expect(screen.getByRole("link")).toHaveClass("link-class");
+    expect(screen.getByRole("tablist")).toHaveClass("list-class");
+    expect(screen.getByRole("tab", { name: "label1" })).toHaveClass(
+      "link-class",
+    );
+    expect(
+      screen.getByRole("tab", { name: "label1" }).closest("li"),
+    ).toHaveClass("list-item-class");
   });
 
   it("can use custom elements as links", () => {
@@ -86,7 +88,7 @@ describe("Tabs", () => {
         ]}
       />,
     );
-    expect(screen.getByRole("button", { name: "label1" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "label1" })).toBeInTheDocument();
   });
 
   it("can use custom components as links", () => {
@@ -109,7 +111,7 @@ describe("Tabs", () => {
       />,
     );
 
-    expect(screen.queryByRole("link", { name })).not.toBeInTheDocument();
-    expect(screen.getByRole("button", { name })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name })).not.toBeInTheDocument();
+    expect(screen.getByRole("tab", { name })).toBeInTheDocument();
   });
 });

src/components/Tabs/Tabs.tsx

@@ -54,7 +54,7 @@ const Tabs = <P,>({
 }: Props<P>): React.JSX.Element => {
   return (
     <nav className={classNames("p-tabs", className)}>
-      <ul className={classNames("p-tabs__list", listClassName)}>
+      <ul role="tablist" className={classNames("p-tabs__list", listClassName)}>
         {links.map((link, i) => {
           const {
             active,
@@ -69,8 +69,10 @@ const Tabs = <P,>({
             <li
               className={classNames("p-tabs__item", listItemClassName)}
               key={i}
+              role="none presentation"
             >
               <Component
+                role="tab"
                 aria-selected={active}
                 className={classNames("p-tabs__link", className)}
                 data-testid={`tab-link-${label}`}

src/components/Tabs/__snapshots__/Tabs.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Tabs renders 1`] = `
 <div>
@@ -7,27 +7,32 @@ exports[`Tabs renders 1`] = `
   >
     <ul
       class="p-tabs__list"
+      role="tablist"
     >
       <li
         class="p-tabs__item"
+        role="none presentation"
       >
         <a
           aria-selected="true"
           class="p-tabs__link"
           data-testid="tab-link-label1"
           href="/path1"
+          role="tab"
         >
           label1
         </a>
       </li>
       <li
         class="p-tabs__item"
+        role="none presentation"
       >
         <a
           aria-selected="false"
           class="p-tabs__link"
           data-testid="tab-link-label2"
           href="/path2"
+          role="tab"
         >
           label2
         </a>