Various A11y updates (#421)

* Various A11y updates * Responding to feedback
ClickHouse · May 22, 2024 · f91ce15 · f91ce15
1 parent 6a79472
commit f91ce15
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"