From c08623b36ed26f0c790ade5a425489a625dc1053 Mon Sep 17 00:00:00 2001
From: Gareth Jones <github@garethdjones.com>
Date: Wed, 13 Sep 2023 11:30:52 -0400
Subject: [PATCH 1/2] Fixing constrast issue with success messages.

---
 tokens/themes/light.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tokens/themes/light.json b/tokens/themes/light.json
index 3bbeef76..6ee8027b 100644
--- 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"
           }
         },

From 730541dd273b437d2a32c087ebee730574d58527 Mon Sep 17 00:00:00 2001
From: Gareth Jones <github@garethdjones.com>
Date: Wed, 13 Sep 2023 12:18:26 -0400
Subject: [PATCH 2/2] Adding aria labels where relevant.

---
 src/components/Accordion/Accordion.tsx         | 1 +
 src/components/Alert/Alert.tsx                 | 6 +++++-
 src/components/Badge/Badge.tsx                 | 1 +
 src/components/Button/Button.tsx               | 3 +++
 src/components/CardPrimary/CardPrimary.tsx     | 5 ++++-
 src/components/CardSecondary/CardSecondary.tsx | 1 +
 src/components/Icon/Icon.tsx                   | 2 ++
 src/components/IconButton/IconButton.tsx       | 5 +++++
 src/components/Input/SearchField.tsx           | 1 +
 src/components/Input/TextField.tsx             | 1 +
 src/components/Logos/Logo.tsx                  | 2 ++
 11 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index f70f529b..35a699cc 100644
--- 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
index e691015a..7d11bc73 100644
--- 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
index 47ddedcf..4fccbe79 100644
--- 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
index 7a734135..0328b2c6 100644
--- 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
index bcfd4e13..b7469aaf 100644
--- 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
index a5d92e9b..516bb2d1 100644
--- 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
index f98a6b2b..2868af77 100644
--- 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
index eb2c543b..4c7cd462 100644
--- 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
index eb428bab..8a3e2086 100644
--- 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
index cfdf11fc..8f6c7930 100644
--- 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
index 60a5e056..a24e6a90 100644
--- 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}
     />
   );