fix(docs): update styleguidist internal components to pass WCAG 2.0 compliance

utils/styleguide/ArgumentsRenderer/index.js

@@ -0,0 +1,50 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Argument from 'react-styleguidist/lib/rsg-components/Argument/ArgumentRenderer';
+import {
+  zdFontSizeEpsilon,
+  zdFontWeightSemibold,
+  zdSpacingXs,
+  zdSpacingXxs
+} from '@zendeskgarden/css-variables';
+
+const ArgumentsContainer = styled.div`
+  margin-bottom: ${zdSpacingXs};
+  font-size: inherit;
+`;
+
+const Heading = styled.div`
+  margin-bottom: ${zdSpacingXxs};
+  font-size: ${zdFontSizeEpsilon};
+  font-weight: ${zdFontWeightSemibold};
+`;
+
+const ArgumentsRenderer = ({ args, heading }) => (
+  <ArgumentsContainer>
+    {heading && <Heading>Arguments</Heading>}
+    {args.map(arg => (
+      <Argument key={arg.name} {...arg} />
+    ))}
+  </ArgumentsContainer>
+);
+
+ArgumentsRenderer.propTypes = {
+  args: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      type: PropTypes.object,
+      description: PropTypes.string
+    })
+  ).isRequired,
+  heading: PropTypes.bool
+};
+
+export default ArgumentsRenderer;

utils/styleguide/LogoRenderer/index.js

@@ -16,11 +16,13 @@ const LogoWrapper = styled.div`
 `;
 
 const LogoRenderer = () => (
-  <a href="/">
-    <LogoWrapper>
-      <ZendeskLogo />
-    </LogoWrapper>
-  </a>
+  <div role="navigation">
+    <a href="/" aria-label="Garden Homepage">
+      <LogoWrapper>
+        <ZendeskLogo />
+      </LogoWrapper>
+    </a>
+  </div>
 );
 
 export default LogoRenderer;

utils/styleguide/TableOfContentsRenderer/index.js

@@ -19,6 +19,17 @@ import Spacer from './Spacer';
 import PACKAGE_JSON from 'package.json';
 import CHANGELOG from 'CHANGELOG.md';
 
+const TableOfContentsChildrenWrapper = styled.div`
+  a:hover {
+    text-decoration: underline;
+  }
+
+  a:focus {
+    outline: none;
+    text-decoration: underline;
+  }
+`;
+
 const RTLContainer = styled.div`
   margin-top: 16px;
   padding-right: 16px;
@@ -57,70 +68,72 @@ class TableOfContents extends Component {
     const { isChangelogModalOpen } = this.state;
 
     return (
-      <TableOfContentsRenderer {...other}>
-        {children}
-        <ThemeProvider>
-          <RTLContainer>
-            <ChangelogButton
-              link
-              size="small"
-              onClick={() => this.setState({ isChangelogModalOpen: true })}
-            >
-              View Changelog
-            </ChangelogButton>
-            {isChangelogModalOpen && (
-              <ChangelogModal
-                onClose={() => this.setState({ isChangelogModalOpen: false })}
-                name={PACKAGE_JSON.name}
-                htmlContent={CHANGELOG}
-              />
-            )}
-            <BadgeContainer>
-              <a href={githubPackageUrl}>
-                <img alt="View package on GitHub" src="images/github.svg" />
-              </a>
-            </BadgeContainer>
-            <Spacer height="20px" />
-            <Tooltip
-              placement="end"
-              popperModifiers={{
-                preventOverflow: {
-                  boundariesElement: 'viewport'
-                },
-                hide: { enabled: false }
-              }}
-              appendToBody
-              type="light"
-              size="extra-large"
-              trigger={
-                <div>
-                  <Toggle
-                    checked={isRtl}
-                    onChange={() => {
-                      if (isRtl) {
-                        location.search = '';
-                      } else {
-                        location.search = '?isRtl';
-                      }
-                    }}
-                  >
-                    <Label>RTL Locale</Label>
-                  </Toggle>
-                </div>
-              }
-            >
-              <Title>RTL in Garden</Title>
-              <p>
-                All Garden components are RTL locale aware when used with the {'<ThemeProvider />'}{' '}
-                component.
-              </p>
-              <p>
-                <Anchor href="../theming">View Garden Theming Package</Anchor>
-              </p>
-            </Tooltip>
-          </RTLContainer>
-        </ThemeProvider>
-      </TableOfContentsRenderer>
+      <div role="navigation">
+        <TableOfContentsRenderer {...other}>
+          <TableOfContentsChildrenWrapper>{children}</TableOfContentsChildrenWrapper>
+          <ThemeProvider>
+            <RTLContainer>
+              <ChangelogButton
+                link
+                size="small"
+                onClick={() => this.setState({ isChangelogModalOpen: true })}
+              >
+                View Changelog
+              </ChangelogButton>
+              {isChangelogModalOpen && (
+                <ChangelogModal
+                  onClose={() => this.setState({ isChangelogModalOpen: false })}
+                  name={PACKAGE_JSON.name}
+                  htmlContent={CHANGELOG}
+                />
+              )}
+              <BadgeContainer>
+                <a href={githubPackageUrl}>
+                  <img alt="View package on GitHub" src="images/github.svg" />
+                </a>
+              </BadgeContainer>
+              <Spacer height="20px" />
+              <Tooltip
+                placement="end"
+                popperModifiers={{
+                  preventOverflow: {
+                    boundariesElement: 'viewport'
+                  },
+                  hide: { enabled: false }
+                }}
+                appendToBody
+                type="light"
+                size="extra-large"
+                trigger={
+                  <div>
+                    <Toggle
+                      checked={isRtl}
+                      onChange={() => {
+                        if (isRtl) {
+                          location.search = '';
+                        } else {
+                          location.search = '?isRtl';
+                        }
+                      }}
+                    >
+                      <Label>RTL Locale</Label>
+                    </Toggle>
+                  </div>
+                }
+              >
+                <Title>RTL in Garden</Title>
+                <p>
+                  All Garden components are RTL locale aware when used with the{' '}
+                  {'<ThemeProvider />'} component.
+                </p>
+                <p>
+                  <Anchor href="../theming">View Garden Theming Package</Anchor>
+                </p>
+              </Tooltip>
+            </RTLContainer>
+          </ThemeProvider>
+        </TableOfContentsRenderer>
+      </div>
     );
   }
 }

utils/styleguide/TableRenderer/index.js

@@ -0,0 +1,60 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+/**
+ * Original implementation is based off of the logic shown in
+ * https://github.com/styleguidist/react-styleguidist/blob/46156bb932121df5a176852d0fcdfd43cad83ef3/src/rsg-components/Table/TableRenderer.js
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Table, Head, Row, HeaderCell, Body, Cell } from '../../../packages/tables/src';
+
+const AutoTable = styled(Table)`
+  && {
+    table-layout: auto;
+  }
+`;
+
+const TableRenderer = ({ columns, rows, getRowKey }) => {
+  return (
+    <AutoTable size="small">
+      <Head>
+        <Row header>
+          {columns.map(({ caption }) => (
+            <HeaderCell key={caption} scope="col">
+              {caption}
+            </HeaderCell>
+          ))}
+        </Row>
+      </Head>
+      <Body>
+        {rows.map(row => (
+          <Row key={getRowKey(row)}>
+            {columns.map(({ render }, index) => (
+              <Cell key={index}>{render(row) || <span>-</span>}</Cell>
+            ))}
+          </Row>
+        ))}
+      </Body>
+    </AutoTable>
+  );
+};
+
+TableRenderer.propTypes = {
+  columns: PropTypes.arrayOf(
+    PropTypes.shape({
+      caption: PropTypes.string.isRequired,
+      render: PropTypes.func.isRequired
+    })
+  ).isRequired,
+  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  getRowKey: PropTypes.func.isRequired
+};
+
+export default TableRenderer;

utils/styleguide/github-hljs-theme.css

@@ -0,0 +1,90 @@
+.hljs {
+  color: #2F3941 !important; /* GREY-800 */
+  background: #F8F9F9 !important; /* GREY-100 */
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #68737D !important; /* GREY-600 */
+  font-style: italic !important;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: #2F3941 !important; /* GREY-800 */
+  font-weight: bold !important;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag .hljs-attr {
+  color: #335D63 !important; /* KALE-500 */
+}
+
+.hljs-string,
+.hljs-doctag {
+  color: #d14 !important;  /* GREY-100 */
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+  color: #8C232C !important; /* RED-700 */
+  font-weight: bold !important;
+}
+
+.hljs-subst {
+  font-weight: normal !important;
+}
+
+.hljs-type,
+.hljs-class .hljs-title {
+  color: #56777A !important; /* KALE-400 */
+  font-weight: bold !important;
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+  color: #1F73B7 !important; /* BLUE-600 */
+  font-weight: normal !important;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #038153 !important; /* GREEN-100 */
+}
+
+.hljs-symbol,
+.hljs-bullet {
+  color: #990073 !important;
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+  color: #5293C7 !important; /* BLUE-400 */
+}
+
+.hljs-meta {
+  color: #999 !important;
+  font-weight: bold !important;
+}
+
+.hljs-deletion {
+  background: #F5B5BA !important; /* RED-300 */
+}
+
+.hljs-addition {
+  background: #AECFC2 !important; /* GREEN-300 */
+}
+
+.hljs-emphasis {
+  font-style: italic !important;
+}
+
+.hljs-strong {
+  font-weight: bold !important;
+}