chore: accessability improvements

Author: zstix

src/components/Tabs/Bar.js

@@ -4,6 +4,7 @@ import { css } from '@emotion/react';
 
 const Bar = ({ children }) => (
   <div
+    role="tablist"
     css={css`
       display: flex;
       margin-bottom: 1em;

src/components/Tabs/BarItem.js

@@ -11,9 +11,16 @@ const BarItem = ({ index, children, id, count, disabled }) => {
     id === currentTab || (currentTab === undefined && index === 0);
 
   return (
-    <div
+    <button
+      role="tab"
+      aria-controls={id}
+      type="button"
       onClick={() => !disabled && setCurrentTab(id)}
       css={css`
+        border: 0;
+        background: none;
+        color: var(--primary-text-color);
+
         flex-grow: 1;
         text-align: center;
         padding: 0.5em 0;
@@ -109,7 +116,7 @@ const BarItem = ({ index, children, id, count, disabled }) => {
           {count}
         </span>
       )}
-    </div>
+    </button>
   );
 };
 

src/components/Tabs/Page.js

@@ -11,7 +11,11 @@ const Page = ({ index, children, id }) => {
 
   if (!isSelected) return null;
 
-  return <div>{children}</div>;
+  return (
+    <div role="tabpanel" aria-labelledby={id}>
+      {children}
+    </div>
+  );
 };
 
 Page.propTypes = {

src/pages/tabtest.js

@@ -5,6 +5,7 @@ const TabTest = () => (
   <Tabs>
     <Tabs.Bar>
       <Tabs.BarItem id="overview">Overview</Tabs.BarItem>
+      <Tabs.BarItem id="dependencies">Dependencies</Tabs.BarItem>
       <Tabs.BarItem id="dashboards" count={12}>
         Dashboards
       </Tabs.BarItem>
@@ -14,6 +15,12 @@ const TabTest = () => (
       <Tabs.BarItem id="synthetics" count={0} disabled>
         Synthetics checks
       </Tabs.BarItem>
+      <Tabs.BarItem id="visualizations" count={0} disabled>
+        Visualizations
+      </Tabs.BarItem>
+      <Tabs.BarItem id="applications" count={4}>
+        Applications
+      </Tabs.BarItem>
     </Tabs.Bar>
 
     <Tabs.Pages>