docs(storybook): fixes a number of accessibility issues in the docume…

…ntation
Sage · Oct 14, 2024 · 6747a04 · 6747a04
1 parent 4974245
commit 6747a04
Show file tree

Hide file tree

Showing 12 changed files with 130 additions and 44 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,7 +1,10 @@
+import { StorybookConfig } from "@storybook/react-webpack5";
+
 import path from "path";
+
 import glob from "glob";
+
 import remarkGfm from "remark-gfm";
-import { StorybookConfig } from "@storybook/react-webpack5";
 
 const projectRoot = path.resolve(__dirname, "../");
 const ignoreTests = process.env.IGNORE_TESTS === "true";

diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
@@ -1,7 +1,7 @@
-<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-<link rel="manifest" href="/site.webmanifest">
-<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
-<meta name="msapplication-TileColor" content="#da532c">
-<meta name="theme-color" content="#ffffff">
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+<link rel="manifest" href="/site.webmanifest" />
+<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+<meta name="msapplication-TileColor" content="#da532c" />
+<meta name="theme-color" content="#ffffff" />
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,8 +1,31 @@
-<link rel="preload" href="/static/media/carbon-icons-webfont.woff2" as="font" type="font/woff2"
-  crossorigin="anonymous" />
+<link
+  rel="preload"
+  href="/static/media/carbon-icons-webfont.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin="anonymous"
+/>
 
-<link rel="preload" href="/static/media/sageui-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
+<link
+  rel="preload"
+  href="/static/media/sageui-regular.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin="anonymous"
+/>
 
-<link rel="preload" href="/static/media/sageui-medium.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
+<link
+  rel="preload"
+  href="/static/media/sageui-medium.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin="anonymous"
+/>
 
-<link rel="preload" href="/static/media/sageui-bold.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
+<link
+  rel="preload"
+  href="/static/media/sageui-bold.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin="anonymous"
+/>
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,12 +1,13 @@
-import withGlobalStyles from "./with-global-styles";
-import { withThemeProvider, globalThemeProvider } from "./withThemeProvider";
-import withLocaleSelector from "./with-locale-selector";
-import withPortalProvider from "./with-portal-provider";
-import sageStorybookTheme from "./sage-storybook-theme";
+import { Preview } from "@storybook/react";
 
 import "../src/style/fonts.css";
+
 import isChromatic from "./isChromatic";
-import { Preview } from "@storybook/react";
+import sageStorybookTheme from "./sage-storybook-theme";
+import withGlobalStyles from "./with-global-styles";
+import withLocaleSelector from "./with-locale-selector";
+import withPortalProvider from "./with-portal-provider";
+import { withThemeProvider, globalThemeProvider } from "./withThemeProvider";
 
 const customViewports = {
   extraSmall: {

diff --git a/.storybook/sage-docs-theme.ts b/.storybook/sage-docs-theme.ts
@@ -4,7 +4,7 @@ export default create({
   base: "light",
 
   colorPrimary: "#007e45",
-  colorSecondary: "#8099A6",
+  colorSecondary: "#007e45",
 
   // UI
   appBg: "#FFFFFF",

diff --git a/.storybook/welcome-page/components-demo/component-heading/component-heading.component.js b/.storybook/welcome-page/components-demo/component-heading/component-heading.component.js
@@ -1,11 +1,26 @@
-import React from 'react';
-import { StyledComponentHeader, StyledHeading, StyledText } from './component-heading.style';
+import React from "react";
 
-const ComponentHeading = ({ centerAlign, title, titleSuffix, text, divider }) => (
-  <StyledComponentHeader centerAlign={ centerAlign }>
-    { title && <StyledHeading>{ title } { titleSuffix && <span>{ titleSuffix } </span> }</StyledHeading> }
-    { divider && <hr /> }
-    { text && <StyledText>{ text }</StyledText> }
+import {
+  StyledComponentHeader,
+  StyledHeading,
+  StyledText,
+} from "./component-heading.style";
+
+const ComponentHeading = ({
+  centerAlign,
+  title,
+  titleSuffix,
+  text,
+  divider,
+}) => (
+  <StyledComponentHeader centerAlign={centerAlign} title={title}>
+    {title && (
+      <StyledHeading>
+        {title} {titleSuffix && <span>{titleSuffix} </span>}
+      </StyledHeading>
+    )}
+    {divider && <hr />}
+    {text && <StyledText>{text}</StyledText>}
   </StyledComponentHeader>
 );
 

diff --git a/.storybook/welcome-page/components-demo/component-heading/component-heading.style.js b/.storybook/welcome-page/components-demo/component-heading/component-heading.style.js
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const StyledComponentHeader = styled.header`
+export const StyledComponentHeader = styled.div`
   align-items: ${({ centerAlign }) => (centerAlign ? "center" : "flex-start")};
   text-align: ${({ centerAlign }) => (centerAlign ? "center" : "left")};
   display: flex;

diff --git a/.storybook/welcome-page/components-demo/demo/demo-table/demo-table.component.js b/.storybook/welcome-page/components-demo/demo/demo-table/demo-table.component.js
@@ -1,4 +1,5 @@
 import React from "react";
+
 import {
   ActionPopover,
   ActionPopoverItem,
@@ -18,7 +19,7 @@ const DemoTable = () => (
       <FlatTableRow>
         <FlatTableHeader>First Name</FlatTableHeader>
         <FlatTableHeader>Second Name</FlatTableHeader>
-        <FlatTableHeader>&nbsp;</FlatTableHeader>
+        <FlatTableHeader align="center">Actions</FlatTableHeader>
       </FlatTableRow>
     </FlatTableHead>
     <FlatTableBody>

diff --git a/.storybook/welcome-page/components-demo/demo/demo.component.js b/.storybook/welcome-page/components-demo/demo/demo.component.js
@@ -1,19 +1,21 @@
 import React, { useState } from "react";
+
+import Heading from "../component-heading";
+import { Wrapper, ContentWrapper } from "../../common.style";
 import Button from "../../../../src/components/button";
-import Textbox from "../../../../src/components/textbox";
-import NumberInput from "../../../../src/components/number";
+import DateRange from "../../../../src/components/date-range";
 import Decimal from "../../../../src/components/decimal";
+import NumberInput from "../../../../src/components/number";
 import { Select, Option } from "../../../../src/components/select";
-import { Wrapper, ContentWrapper } from "../../common.style";
+import Textbox from "../../../../src/components/textbox";
+
+import DemoTable from "./demo-table";
 import {
   ComponentShowcaseWrapper,
   StyledDemoWrapper,
   StyledDemoRow,
   StyledComponentWrapper,
 } from "./demo.style";
-import DemoTable from "./demo-table";
-import DateRange from "../../../../src/components/date-range";
-import Heading from "../component-heading";
 
 const Demo = () => {
   const [numberValue, setNumberValue] = useState("0");
@@ -62,30 +64,50 @@ const Demo = () => {
             </StyledDemoRow>
             <StyledDemoRow styling={{ display: "flex" }}>
               <StyledComponentWrapper styling={{ width: "30%", padding: "1%" }}>
-                <Textbox placeholder="Carbon Textbox" inputIcon="search" />
+                <Textbox
+                  placeholder="Carbon Textbox"
+                  inputIcon="search"
+                  aria-label="An example textbox component with spyglass input icon"
+                />
               </StyledComponentWrapper>
               <StyledComponentWrapper styling={{ width: "30%", padding: "1%" }}>
                 <NumberInput
                   value={numberValue}
                   onChange={(e) => setNumberValue(e.target.value)}
+                  aria-label="An example numerical input component"
                 />
               </StyledComponentWrapper>
               <StyledComponentWrapper styling={{ width: "30%", padding: "1%" }}>
-                <Decimal />
+                <Decimal aria-label="An example decimal input component" />
               </StyledComponentWrapper>
             </StyledDemoRow>
             <StyledDemoRow styling={{ display: "flex" }}>
               <StyledComponentWrapper
                 styling={{ width: "100%", padding: "1.5%" }}
               >
-                <DateRange value={dateValue} onChange={handleDateChange} />
+                <DateRange
+                  value={dateValue}
+                  onChange={handleDateChange}
+                  endDateProps={{
+                    "aria-label":
+                      "The end date input of the example date range component",
+                  }}
+                  startDateProps={{
+                    "aria-label":
+                      "The start date input of the example date range component",
+                  }}
+                />
               </StyledComponentWrapper>
             </StyledDemoRow>
             <StyledDemoRow styling={{ display: "flex" }}>
               <StyledComponentWrapper
                 styling={{ width: "95%", padding: "1.5%" }}
               >
-                <Select defaultValue="" placeholder="Carbon Select">
+                <Select
+                  defaultValue=""
+                  placeholder="Carbon Select"
+                  aria-label="An example select component with two options"
+                >
                   <Option value="1" text="Red" />
                   <Option value="2" text="Blue" />
                 </Select>

diff --git a/.storybook/welcome-page/loves-carbon/loves-carbon.component.js b/.storybook/welcome-page/loves-carbon/loves-carbon.component.js
@@ -1,9 +1,11 @@
 import React from "react";
+
 import Heading from "../components-demo/component-heading";
-import { Wrapper, LovesCarbonWrapper, Image } from "./loves-carbon.style";
-import devices from "./devices.png";
 import Link from "../../../src/components/link";
 
+import devices from "./devices.png";
+import { Wrapper, LovesCarbonWrapper, Image } from "./loves-carbon.style";
+
 const LovesCarbon = () => (
   <LovesCarbonWrapper>
     <Wrapper>
@@ -18,7 +20,10 @@ const LovesCarbon = () => (
           Learn more about Sage
         </Link>
       </div>
-      <Image src={devices} />
+      <Image
+        src={devices}
+        alt="Carbon in use across devices of varying sizes"
+      />
     </Wrapper>
   </LovesCarbonWrapper>
 );

diff --git a/.storybook/welcome-page/loves-carbon/loves-carbon.style.js b/.storybook/welcome-page/loves-carbon/loves-carbon.style.js
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+
 import { StyledComponentHeader } from "../components-demo/component-heading/component-heading.style";
 import { StyledLink } from "../../../src/components/link/link.style";
 
@@ -11,7 +12,7 @@ export const Wrapper = styled.div`
 `;
 
 export const LovesCarbonWrapper = styled.div`
-  background-color: #e6ebed;
+  /* background-color: #e6ebed; */
   width: 100%;
 
   && ${StyledLink} a {

diff --git a/.storybook/welcome-page/selling-points/selling-point-panel.component.js b/.storybook/welcome-page/selling-points/selling-point-panel.component.js
@@ -1,4 +1,5 @@
 import React from "react";
+
 import { Panel, Image, Heading, Text } from "./selling-points.style";
 
 const images = {
@@ -10,9 +11,23 @@ const images = {
   collaborate: require("../../../.assets/collaborate.svg"),
 };
 
+const imagesAltText = {
+  flexible:
+    "Carbon is beautiful out-of-the-box, down to colours, icons, and style.",
+  hammer: "Hundreds of thousands of users worldwide help Carbon evolve.",
+  plug:
+    "Carbon powers your app. Contribute your code, so you can power Carbon too.",
+  point:
+    "Over 50 components and 340 configurations bring your killer app to life.",
+  brush:
+    "Meet your users' needs with a simple, elegant, delightful experience.",
+  collaborate:
+    "With Carbon's UI Kit, designers and developers speak the same language.",
+};
+
 export default ({ icon, heading, text }) => (
   <Panel>
-    <Image src={images[icon]} />
+    <Image src={images[icon]} alt={imagesAltText[icon]} />
     <Heading>{heading}</Heading>
     <Text>{text}</Text>
   </Panel>