From f91ce1543c65372d250d5acdfac002b6fa2cc3e9 Mon Sep 17 00:00:00 2001
From: Gareth Jones <gareth@clickhouse.com>
Date: Wed, 22 May 2024 11:40:32 -0400
Subject: [PATCH] Various A11y updates (#421)

* Various A11y updates

* Responding to feedback
---
 src/components/Checkbox/Checkbox.tsx          |  1 +
 src/components/FileTabs/FileTabs.tsx          |  3 ++-
 src/components/Pagination/Pagination.tsx      |  1 +
 src/components/RadioGroup/RadioGroup.tsx      |  1 +
 src/components/Switch/Switch.tsx              |  1 +
 src/components/Table/Table.tsx                | 12 ++++++++++--
 src/components/Tabs/FullWidthTabs.stories.tsx |  2 +-
 src/styles/variables.dark.json                | 10 +++++-----
 8 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 25ba5781..effc5e11 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -33,6 +33,7 @@ export const Checkbox = ({
         id={id ?? defaultId}
         data-testid="checkbox"
         disabled={disabled}
+        aria-label={`${label}`}
         {...delegated}
       >
         <CheckIconWrapper>
diff --git a/src/components/FileTabs/FileTabs.tsx b/src/components/FileTabs/FileTabs.tsx
index 4e8ccb36..8724179c 100644
--- a/src/components/FileTabs/FileTabs.tsx
+++ b/src/components/FileTabs/FileTabs.tsx
@@ -150,6 +150,7 @@ export const FileTabs = ({
       <TabsContainer
         ref={ref}
         onWheel={onWheel}
+        role="tablist"
         onScroll={e => {
           e.preventDefault();
           e.stopPropagation();
@@ -180,7 +181,7 @@ export const FileTabs = ({
         >
           {Children.map(children, (child, index) => (
             <div
-              tabIndex={index}
+              tabIndex={index + 1}
               role="tab"
               onClick={onSelect(index)}
               key={`tab-element-${index}`}
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 54f3be9a..491f2469 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -169,6 +169,7 @@ export const Pagination = ({
             value={currentPage}
             loading={false}
             onKeyDown={onKeyDown}
+            aria-label={currentPage.toString()}
             min={1}
             max={totalPages}
             onFocus={onPageNumberFocus}
diff --git a/src/components/RadioGroup/RadioGroup.tsx b/src/components/RadioGroup/RadioGroup.tsx
index 5c82cb01..52af8001 100644
--- a/src/components/RadioGroup/RadioGroup.tsx
+++ b/src/components/RadioGroup/RadioGroup.tsx
@@ -99,6 +99,7 @@ const RadioGroupItem = ({
         id={id ?? defaultId}
         disabled={disabled}
         required={required}
+        aria-label={`${label}`}
       >
         <RadioGroupIndicator />
       </RadioInput>
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
index 655311f4..bdc3c6b7 100644
--- a/src/components/Switch/Switch.tsx
+++ b/src/components/Switch/Switch.tsx
@@ -37,6 +37,7 @@ export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
           ref={ref}
           id={id ?? defaultId}
           disabled={disabled}
+          aria-label={`${label}`}
           checked={checked}
           {...props}
         >
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 7f03e591..10f35607 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -123,7 +123,10 @@ const Thead = ({
       <StyledThead>
         <tr>
           {isSelectable && (
-            <StyledHeader $size={size}>
+            <StyledHeader
+              $size={size}
+              aria-label="Select column"
+            >
               <Checkbox
                 onCheckedChange={onSelectAll}
                 disabled={!hasRows}
@@ -138,7 +141,12 @@ const Thead = ({
               {...headerProps}
             />
           ))}
-          {actionsList.length > 0 && <StyledHeader $size={size} />}
+          {actionsList.length > 0 && (
+            <StyledHeader
+              aria-label="Actions"
+              $size={size}
+            />
+          )}
         </tr>
       </StyledThead>
     </>
diff --git a/src/components/Tabs/FullWidthTabs.stories.tsx b/src/components/Tabs/FullWidthTabs.stories.tsx
index 4ef489b6..2a1edd4d 100644
--- a/src/components/Tabs/FullWidthTabs.stories.tsx
+++ b/src/components/Tabs/FullWidthTabs.stories.tsx
@@ -16,7 +16,7 @@ export const Playground: Story = {
     ariaLabel: "a full width simple tab component",
     children: (
       <div style={{ width: "700px" }}>
-        <FullWidthTabs.TriggersList>
+        <FullWidthTabs.TriggersList role="tablist">
           <FullWidthTabs.Trigger
             value="tab1"
             key="tab1"
diff --git a/src/styles/variables.dark.json b/src/styles/variables.dark.json
index 287b74e2..c81e3d1c 100644
--- a/src/styles/variables.dark.json
+++ b/src/styles/variables.dark.json
@@ -67,9 +67,9 @@
     "avatar": {
       "color": {
         "background": {
-          "default": "#696e79",
-          "hover": "#53575f",
-          "active": "#53575f"
+          "default": "#808691",
+          "hover": "#b3b6bd",
+          "active": "#b3b6bd"
         },
         "text": {
           "default": "#1F1F1C",
@@ -1111,8 +1111,8 @@
         "color": {
           "background": {
             "default": "#1F1F1C",
-            "hover": "#1F1F1C",
-            "active": "lch(13.9 2.07 105)"
+            "hover": "lch(15.8 0 0)",
+            "active": "lch(17.9 0 0)"
           },
           "stroke": {
             "default": "#323232"