Merge branch 'main' into gj-splitbutton-fix

ClickHouse · Sep 13, 2023 · be5d52d · be5d52d
2 parents 117eb9c + 730541d
commit be5d52d
Show file tree

Hide file tree

Showing 12 changed files with 27 additions and 3 deletions.
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
@@ -38,6 +38,7 @@ const Accordion = ({
             <Icon
               name="chevron-right"
               size={iconSize || size}
+              aria-label="accordion icon"
             />
           </AccordionIconWrapper>
           {icon ? (

diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -47,6 +47,7 @@ const Alert = ({
           <StyledIcon
             $size={size}
             size="sm"
+            aria-hidden
             name={stateIconMap[state]}
           />
         </IconWrapper>
@@ -63,7 +64,10 @@ const Alert = ({
           data-testid="click-alert-dismiss-button"
           onClick={() => setIsVisible(false)}
         >
-          <Icon name="cross" />
+          <Icon
+            name="cross"
+            aria-label="close"
+          />
         </DismissWrapper>
       )}
     </Wrapper>

diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
@@ -72,6 +72,7 @@ export const Badge = ({
           $state={state}
           as={Icon}
           onClick={onClose}
+          aria-label="close"
         />
       )}
     </Content>

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -39,6 +39,7 @@ export const Button = ({
     {iconLeft && (
       <ButtonIcon
         name={iconLeft}
+        aria-hidden
         size="sm"
       />
     )}
@@ -48,6 +49,7 @@ export const Button = ({
     {iconRight && (
       <ButtonIcon
         name={iconRight}
+        aria-hidden
         size="sm"
       />
     )}
@@ -56,6 +58,7 @@ export const Button = ({
         <Icon
           name="loading-animated"
           data-testid="click-ui-loading-icon"
+          aria-label="loading"
         />
       </LoadingIconWrapper>
     )}

diff --git a/src/components/CardPrimary/CardPrimary.tsx b/src/components/CardPrimary/CardPrimary.tsx
@@ -127,7 +127,10 @@ export const CardPrimary = ({
         $size={size}
         $disabled={disabled}
       >
-        <Icon name={icon} />
+        <Icon
+          name={icon}
+          aria-hidden
+        />
         <Title type="h3">{title}</Title>
       </Header>
 

diff --git a/src/components/CardSecondary/CardSecondary.tsx b/src/components/CardSecondary/CardSecondary.tsx
@@ -127,6 +127,7 @@ export const CardSecondary = ({
           <Icon
             name={icon}
             size="lg"
+            area-hidden
           />
           <Title type="h3">{title}</Title>
         </HeaderLeft>

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -93,6 +93,8 @@ const SvgImage = ({ name, size, theme, ...props }: ImageType) => {
     <SVGIcon
       name={name as IconName}
       size={size}
+      role="img"
+      aria-label={name}
       {...props}
     />
   );

diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
@@ -11,12 +11,16 @@ export interface IconButtonProps extends HTMLAttributes<HTMLButtonElement> {
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   ({ type = "primary", icon, size, ...props }, ref) => {
+    const iconName = icon ? icon.toString() : "unknown icon";
+
     return (
       <Button
         {...props}
         $styleType={type}
         $size={size}
         ref={ref}
+        role="button"
+        aria-label={iconName}
       >
         <Icon
           name={icon}
@@ -38,6 +42,7 @@ const Button = styled.button<{
   border: ${theme.click.button.stroke} solid ${
     theme.click.button.iconButton.color.primary.stroke.default
   };
+  cursor: pointer;
   padding: ${
     $size
       ? `${theme.click.button.iconButton[$size].space.y} ${theme.click.button.iconButton[$size].space.x}`

diff --git a/src/components/Input/SearchField.tsx b/src/components/Input/SearchField.tsx
@@ -70,6 +70,7 @@ export const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
             disabled={disabled}
             onClick={clearInput}
             $show={value.length > 0}
+            aria-label="clear input"
           >
             <Icon
               name="cross"

diff --git a/src/components/Input/TextField.tsx b/src/components/Input/TextField.tsx
@@ -69,6 +69,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             disabled={disabled}
             onClick={clearInput}
             $show={value.length > 0}
+            aria-label="clear input"
           >
             <Icon
               name="cross"

diff --git a/src/components/Logos/Logo.tsx b/src/components/Logos/Logo.tsx
@@ -26,6 +26,8 @@ const Logo = ({ name, theme, size, ...props }: LogoProps) => {
     <SvgImageElement
       as={Component}
       $size={size}
+      role="img"
+      aria-label={name}
       {...props}
     />
   );

diff --git a/tokens/themes/light.json b/tokens/themes/light.json
@@ -1708,7 +1708,7 @@
             "type": "color"
           },
           "foreground": {
-            "value": "{palette.success.600}",
+            "value": "{palette.success.700}",
             "type": "color"
           }
         },