Misc HTML, SVG & a11y fixes (jpmorganchase#967)

liamsms · Jan 4, 2023 · a9d351c · a9d351c
1 parent 7f29b97
commit a9d351c
Show file tree

Hide file tree

Showing 23 changed files with 889 additions and 1,471 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -20,3 +20,7 @@ max_line_length = 0
 [*.css]
 # We don't want css variables to wrap to break Chrome dev tool
 max_line_length = 200
+
+[*.svg]
+# We don't want optimized SVGs to be messed with
+insert_final_newline = false
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,8 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.formatOnSave": true,
-  "jest.jestCommandLine": "yarn test"
+  "jest.jestCommandLine": "yarn test",
+  "[xml]": {
+    "editor.formatOnSave": false
+  }
 }
diff --git a/site/docs/components/_index/ComponentsList.module.css b/site/docs/components/_index/ComponentsList.module.css
@@ -36,29 +36,29 @@
   padding: var(--ifm-table-cell-padding);
 }
 
-.componentList th .headerContainer {
+.headerContainer {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-.componentList th .headerContainer div {
+.headerContainer span {
   display: flex;
   gap: calc(var(--salt-size-unit) / 2);
 }
 
-.componentList .status svg {
+.status svg {
   --icon-size: 12px;
 }
 
-.componentList .status.ready {
+.status.ready {
   --saltIcon-color: var(--salt-status-success-foreground);
 }
 
-.componentList .status.progress {
+.status.progress {
   --saltIcon-color: var(--salt-status-warning-foreground);
 }
 
-.componentList .status.backlog {
+.status.backlog {
   --saltIcon-color: var(--salt-status-error-foreground);
 }
diff --git a/site/docs/components/_index/ComponentsList.tsx b/site/docs/components/_index/ComponentsList.tsx
@@ -118,13 +118,13 @@ const ComponentHeader = ({
   const arrowIcon = ascendingOrder ? <ArrowUpIcon /> : <ArrowDownIcon />;
   return (
     <Button onClick={handleClick}>
-      <div className={styles.headerContainer}>
-        <div>
+      <span className={styles.headerContainer}>
+        <span>
           {logo}
           {!isMobileView && <span>{label}</span>}
-        </div>
+        </span>
         {isSorted && arrowIcon}
-      </div>
+      </span>
     </Button>
   );
 };
@@ -162,7 +162,7 @@ const ComponentsList = () => {
           <tr>
             <th aria-sort={isSortedBy === "name" ? ariaSort : null}>
               <ComponentHeader
-                logo={<StorybookLogo />}
+                logo={<StorybookLogo role="presentation" />}
                 label="Component"
                 isSorted={isSortedBy === "name"}
                 ascendingOrder={hasAscendingOrder}
@@ -171,7 +171,7 @@ const ComponentsList = () => {
             </th>
             <th aria-sort={isSortedBy === "devStatus" ? ariaSort : null}>
               <ComponentHeader
-                logo={<ReactLogo />}
+                logo={<ReactLogo role="presentation" />}
                 label="React"
                 isSorted={isSortedBy === "devStatus"}
                 ascendingOrder={hasAscendingOrder}
@@ -180,7 +180,7 @@ const ComponentsList = () => {
             </th>
             <th aria-sort={isSortedBy === "designStatus" ? ariaSort : null}>
               <ComponentHeader
-                logo={<FigmaLogo />}
+                logo={<FigmaLogo role="presentation" />}
                 label="Figma"
                 isSorted={isSortedBy === "designStatus"}
                 ascendingOrder={hasAscendingOrder}

diff --git a/site/docs/getting-started/designing.mdx b/site/docs/getting-started/designing.mdx
@@ -55,7 +55,7 @@ There are two ways of accessing the libraries—as a J.P. Morgan employee or as
 Use the Salt Design System team space to view working files and our comprehensive component guides. You can also instantly add components and styling to your designs.
 
 <InlineCard
-  icon={<JPMLogo />}
+  icon={<JPMLogo role="presentation" />}
   description={
     <p>
       To start using the Salt libraries, enable them directly from the “Assets”
@@ -75,7 +75,7 @@ If you’re not a J.P. Morgan employee, you can still use Salt components. Our a
 To use the libraries, duplicate them to your own Figma account. Once the libraries are in your drafts, publish the Salt components within your own team or organization space to use them in your design work. Read more about [Community files](https://help.figma.com/hc/en-us/articles/360038510873).
 
 <InlineCard
-  icon={<Globe />}
+  icon={<Globe role="presentation" />}
   description={
     <p>
       To start using the Salt libraries, search for the{" "}

diff --git a/site/docs/getting-started/index.mdx b/site/docs/getting-started/index.mdx
@@ -17,7 +17,7 @@ Follow our step-by-step guides to design and develop accessible, responsive, bes
 
 <OverviewCards>
   <OverviewCard
-    icon={<DesignIcon />}
+    icon={<DesignIcon role="presentation" />}
     title="Designing"
     url="/getting-started/designing"
     footerText="Start designing"
@@ -29,7 +29,7 @@ components and apply styling to your designs.
 
   </OverviewCard>
   <OverviewCard
-    icon={<DevelopIcon />}
+    icon={<DevelopIcon role="presentation" />}
     title="Developing"
     url="/getting-started/developing"
     footerText="Start developing"

diff --git a/site/docusaurus.config.js b/site/docusaurus.config.js
@@ -68,7 +68,7 @@ const config = {
     ({
       navbar: {
         logo: {
-          alt: "Salt Site Logo",
+          alt: "Salt Design System by J.P. Morgan",
           src: "img/logo.svg",
         },
         items: [

diff --git a/site/prismLight.mjs b/site/prismLight.mjs
@@ -4,10 +4,46 @@ export default {
   ...lightTheme,
   styles: [
     ...lightTheme.styles,
+    {
+      types: ["comment", "prolog", "doctype", "cdata"],
+      style: {
+        color: "var(--salt-color-gray-200)",
+        fontStyle: "italic",
+      },
+    },
     {
       types: ["font-matter", "string", "attr-value"],
       style: {
-        color: "var(--salt-color-teal-500)",
+        color: "var(--salt-color-teal-600)",
+      },
+    },
+    {
+      types: [
+        "entity",
+        "url",
+        "symbol",
+        "number",
+        "boolean",
+        "variable",
+        "constant",
+        "property",
+        "regex",
+        "inserted",
+      ],
+      style: {
+        color: "var(--salt-color-green-600)",
+      },
+    },
+    {
+      types: ["atrule", "keyword", "attr-name", "selector"],
+      style: {
+        color: "var(--salt-color-blue-500)",
+      },
+    },
+    {
+      types: ["function", "deleted", "tag"],
+      style: {
+        color: "var(--salt-color-red-600)",
       },
     },
   ],

diff --git a/site/src/components/card/Card.tsx b/site/src/components/card/Card.tsx
@@ -53,10 +53,10 @@ const Card = ({
         </div>
       )}
       <div className={styles.cardContent}>
-        <span className={styles.cardTitle}>
+        <div className={styles.cardTitle}>
           {title && <h2>{title}</h2>}
           {inlineIcon && <div className={styles.inlineIcon}>{inlineIcon}</div>}
-        </span>
+        </div>
         <div className={styles.cardDescription}>{description}</div>
         <div className={styles.cardFooter}>
           <p>{footerText}</p>