adding accessible theme + accessibility tweaks and fixes

.storybook/preview.js

@@ -47,7 +47,6 @@ const ThemeDecorator = (storyFn, context) => {
               </>
             </ThemeProvider>
           </FlexItem>
-
           <FlexItem key="collapsed">
             <ThemeProvider theme={systemThemeCollapsed}>
               <>

lib/components/Avatar/Avatar.stories.js

@@ -85,6 +85,7 @@ export const small = () => (
       sizing="small"
       title={<StyledLink href="#">Ayden Lundgre</StyledLink>}
       subtitle="Senior Business Analyst"
+      imageAlt="Avatar for Ayden Lundgre"
       initials="AL"
       image="https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
     />
@@ -96,7 +97,7 @@ export const large = () => (
   <Spacer my={4}>
     <Avatar
       sizing="large"
-      title="Ayden Lundgre TESTER"
+      title="Ayden Lundgre"
       titleLevel="H1"
       subtitle="Senior Business Analyst"
       initials="AL"
@@ -112,6 +113,7 @@ export const large = () => (
       sizing="large"
       title={<StyledLink href="#">Ayden Lundgre</StyledLink>}
       subtitle="Senior Business Analyst"
+      imageAlt="Avatar for Ayden Lundgre"
       initials="AL"
       image="https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
     />
@@ -137,6 +139,7 @@ export const subtitleContent = () => (
     <Avatar
       sizing="large"
       title={<StyledLink href="#">Ayden Lundgre</StyledLink>}
+      imageAlt="Avatar for Ayden Lundgre"
       initials="AL"
       image="https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
       subtitleContent={<Badge mt="xs">Senior Business Analyst</Badge>}
@@ -146,7 +149,7 @@ export const subtitleContent = () => (
       title={<StyledLink href="#">Ayden Lundgre</StyledLink>}
       initials="AL"
       image="https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
-      imageAlt="Ayden Lundgre"
+      imageAlt="Avatar for Ayden Lundgre"
       subtitleContent={
         <Flex flexWrap="wrap">
           <Spacer mr="xs" mt="xs">
@@ -167,7 +170,7 @@ export const localTime = () => (
       title={<StyledLink href="#">Ayden Lundgre</StyledLink>}
       initials="AL"
       image="https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
-      imageAlt="Ayden Lundgre"
+      imageAlt="Avatar for Ayden Lundgre"
       subtitleContent={<Badge mt="xs">Senior Business Analyst</Badge>}
       localTime="12:03pm local time"
     />
@@ -191,7 +194,7 @@ export const inverted = () => (
         subtitle="Senior Business Analyst"
         initials="AL"
         image="https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
-        imageAlt="Ayden Lundgre"
+        imageAlt="Avatar for Ayden Lundgre"
       />
       <Avatar
         type="inverted"
@@ -207,7 +210,7 @@ export const inverted = () => (
         subtitle="Senior Business Analyst"
         initials="AL"
         image="https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
-        imageAlt="Ayden Lundgre"
+        imageAlt="Avatar for Ayden Lundgre"
       />
     </Spacer>
   </Box>
@@ -221,84 +224,90 @@ export const alternateShapes = () => (
       title={<StyledLink href="#">Innovation Lab</StyledLink>}
       subtitle="15 team members"
       image="https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80"
-      imageAlt="Team Photo"
+      imageAlt="Avatar for Innovation Lab"
       sizing="large"
     />
     <Avatar
       shape="square"
       title={<StyledLink href="#">Innovation Lab</StyledLink>}
       subtitle="15 team members"
       image="https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80"
-      imageAlt="Team Photo"
+      imageAlt="Avatar for Innovation Lab"
     />
     <Avatar
       shape="square"
       sizing="small"
       title={<StyledLink href="#">Innovation Lab</StyledLink>}
       subtitle="15 team members"
       initials="IL"
+      imageAlt="Avatar for Innovation Lab"
     />
     <Avatar
       shape="square"
       sizing="small"
       title={<StyledLink href="#">Innovation Lab</StyledLink>}
       subtitle="15 team members"
+      imageAlt="Avatar for Innovation Lab"
     />
     <Avatar
       shape="hexagon"
       title={<StyledLink href="#">Innovation Lab</StyledLink>}
       subtitle="15 team members"
       image="https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80"
-      imageAlt="Team Photo"
+      imageAlt="Avatar for Innovation Lab"
       sizing="large"
     />
     <Avatar
       shape="hexagon"
       title={<StyledLink href="#">Innovation Lab</StyledLink>}
       subtitle="15 team members"
       image="https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80"
-      imageAlt="Team Photo"
+      imageAlt="Avatar for Innovation Lab"
     />
     <Avatar
       shape="hexagon"
       sizing="small"
       title={<StyledLink href="#">Innovation Lab</StyledLink>}
       subtitle="15 team members"
       initials="IL"
+      imageAlt="Avatar for Innovation Lab"
     />
     <Avatar
       shape="hexagon"
       sizing="small"
       title={<StyledLink href="#">Innovation Lab</StyledLink>}
       subtitle="15 team members"
+      imageAlt="Avatar for Innovation Lab"
     />
     <Avatar
       shape="tag"
       title={<StyledLink href="#">Javascript</StyledLink>}
       subtitle="Tagged 123 times"
       image="https://images.unsplash.com/photo-1627398242454-45a1465c2479?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2148&q=80"
-      imageAlt="Screen Photo"
+      imageAlt="Avatar for Javascript"
       sizing="large"
     />
     <Avatar
       shape="tag"
       title={<StyledLink href="#">Javascript</StyledLink>}
       subtitle="Tagged 123 times"
       image="https://images.unsplash.com/photo-1627398242454-45a1465c2479?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2148&q=80"
-      imageAlt="Screen Photo"
+      imageAlt="Avatar for Javascript"
     />
     <Avatar
       shape="tag"
       sizing="small"
       title={<StyledLink href="#">Javascript</StyledLink>}
       subtitle="Tagged 123 times"
       initials="JS"
+      imageAlt="Avatar for Javascript"
     />
     <Avatar
       shape="tag"
       sizing="small"
       title={<StyledLink href="#">Javascript</StyledLink>}
       subtitle="Tagged 123 times"
+      imageAlt="Avatar for Javascript"
     />
   </Spacer>
 );

lib/components/Avatar/index.js

@@ -239,7 +239,7 @@ const Title = styled(({ titleLevel, ...props }) => {
 const Subtitle = styled(Text)(
   (props) =>
     css({
-      color: themeGet("colors.grey")(props),
+      color: themeGet("colors.greyDark")(props),
       fontSize: themeGet("fontSizes.1")(props)
     }),
   (props) =>
@@ -299,7 +299,7 @@ const Avatar = ({
     if (imageAlt) {
       return imageAlt;
     } else if (typeof title === "string") {
-      return title;
+      return `Avatar for ${title}`;
     }
   }, [imageAlt, title]);
 

lib/components/Badge/index.js

@@ -43,7 +43,7 @@ const Item = styled("span")
         },
         warning: {
           color: themeGet("colors.warningDarkest")(props),
-          bg: themeGet("colors.warningLightest")(props)
+          bg: themeGet("colors.warningLighter")(props)
         },
         danger: {
           color: themeGet("colors.dangerDarkest")(props),

lib/components/Button/index.js

@@ -153,7 +153,7 @@ const StyledButton = styled("button")
         },
         ghost: {
           bg: themeGet("colors.primaryLightest")(props),
-          color: themeGet("colors.primary")(props),
+          color: themeGet("colors.primaryDark")(props),
           borderColor: themeGet("colors.primaryLightest")(props),
           "&:hover": {
             bg: themeGet("colors.primaryLighter")(props),

lib/components/Card/index.js

@@ -3,7 +3,7 @@ import styled, { css, ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
 import Icon from "../Icon/";
 import Box from "../Box/";
-import { H3, H6 } from "../Typography";
+import { H3, H4 } from "../Typography";
 import { space, layout } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
 
@@ -75,7 +75,7 @@ const Item = styled.div`
             justify-content: flex-start;
             align-items: center;
           }
-          h6 {
+          h4 {
             margin-left: auto;
             float: right;
           }
@@ -88,7 +88,7 @@ const ChangeIcon = styled.div`
   width: 14px;
   height: 2px;
   background-size: 14px 14px;
-  background-color: ${(props) => themeGet("colors.grey")(props)};
+  background-color: ${(props) => themeGet("colors.greyDark")(props)};
   margin: 0 0 0 ${(props) => themeGet("space.3")(props)};
   ${(props) =>
     props.changeIcon === "arrowUp"
@@ -110,9 +110,9 @@ const ChangeIcon = styled.div`
 const ChangeValue = styled.small`
   display: flex;
   align-items: center;
-  font-size: ${(props) => themeGet("fontSizes.3")(props)};
+  font-size: ${(props) => themeGet("fontSizes.2")(props)};
   font-weight: ${(props) => themeGet("fontWeights.0")(props)};
-  color: ${(props) => themeGet("colors.grey")(props)};
+  color: ${(props) => themeGet("colors.greyDark")(props)};
   margin: 0 0 0 ${(props) => themeGet("space.3")(props)};
 `;
 
@@ -152,7 +152,11 @@ export default function Card({
           {title ? <H3>{title}</H3> : null}
           {changeIcon ? <ChangeIcon changeIcon={changeIcon} /> : null}
           {changeValue ? <ChangeValue>{changeValue}</ChangeValue> : null}
-          {subtitle ? <H6>{subtitle}</H6> : null}
+          {subtitle ? (
+            <H4 fontSize="1" color="greyDark">
+              {subtitle}
+            </H4>
+          ) : null}
         </Box>
       )}
       <Box>{children}</Box>

lib/components/Loading/index.js

@@ -62,7 +62,7 @@ export default function Loading({
   const component = (
     <LoadingWrapper {...props} centered={centered}>
       <LoadingIcon
-        role="image"
+        role="img"
         aria-label={ariaLabel}
         large={large}
         inverted={inverted}

lib/components/Notification/Notification.mdx

@@ -26,12 +26,6 @@ If you want your notification to be closable, you must use the onDismiss prop to
   <Story id="components-notification--colour-notification" />
 </Canvas>
 
-## With Icon
-
-<Canvas>
-  <Story id="components-notification--icon-notification" />
-</Canvas>
-
 ## Text-only
 
 <Canvas>

lib/components/Notification/Notification.stories.js

@@ -2,7 +2,6 @@ import React from "react";
 import Notification from ".";
 import Spacer from "../Spacer";
 import Box from "../Box";
-import { themeGet } from "@styled-system/theme-get";
 
 export default {
   title: "Components/Notification",
@@ -42,17 +41,6 @@ export const colourNotification = () => (
 );
 colourNotification.storyName = "Alternate Colours";
 
-export const iconNotification = () => (
-  <Notification
-    colour="warning"
-    icon={["fas", "sync"]}
-    iconProps={{ spin: true, color: themeGet("colors.primary") }}
-  >
-    Notification with icon and iconProps specified
-  </Notification>
-);
-iconNotification.storyName = "With Icon";
-
 export const textOnlyNotification = () => (
   <Notification>Text-only notification</Notification>
 );
@@ -68,12 +56,17 @@ closeDisabledNotification.storyName = "Close Disabled";
 
 export const loadingNotification = () => (
   <Spacer m="r">
-    <Notification loading closable={false}>
-      In progress notification with disabled close. E.g. Importing data...
+    <Notification loading>
+      In progress notification E.g. Importing data...
+    </Notification>
+    <Notification loading colour="success">
+      In progress notification E.g. Importing data...
     </Notification>
-
     <Notification loading colour="warning">
-      In progress notification with enabled close and specified colour.
+      In progress notification E.g. Importing data...
+    </Notification>
+    <Notification loading colour="danger">
+      In progress notification E.g. Importing data...
     </Notification>
   </Spacer>
 );