Fix some of the a11y violations

examples/official-storybook/storyshots-puppeteer/axe-tests.runner.js

@@ -3,27 +3,17 @@
  * `yarn run storyshots-puppeteer` generates the static build & uses storyshots-puppeteer.
  * */
 import path from 'path';
-import fs from 'fs';
 import initStoryshots from '@storybook/addon-storyshots';
 import { axeTest } from '@storybook/addon-storyshots-puppeteer';
-import { logger } from '@storybook/node-logger';
+import getStorybookUrl from './getStorybookUrl';
 
-// We run puppeteer tests on the static build of the storybook.
-// For this test to be meaningful, you must build the static version of the storybook *before* running this test suite.
-const pathToStorybookStatic = path.join(__dirname, '../', 'storybook-static');
-
-if (!fs.existsSync(pathToStorybookStatic)) {
-  logger.error(
-    'You are running puppeteer tests without having the static build of storybook. Please run "yarn run build-storybook" before running tests.'
-  );
-} else {
+const storybookUrl = getStorybookUrl();
+if (storybookUrl != null) {
   initStoryshots({
     suite: 'Puppeteer tests',
     storyKindRegex: /^Basics|UI/,
     framework: 'react',
     configPath: path.join(__dirname, '..'),
-    test: axeTest({
-      storybookUrl: `file://${pathToStorybookStatic}`,
-    }),
+    test: axeTest({ storybookUrl }),
   });
 }

examples/official-storybook/storyshots-puppeteer/getStorybookUrl.js

@@ -0,0 +1,18 @@
+import path from 'path';
+import fs from 'fs';
+import { logger } from '@storybook/node-logger';
+
+export default function getStorybookUrl() {
+  if (process.env.USE_DEV_SERVER) {
+    return 'http://localhost:9011';
+  }
+
+  const pathToStorybookStatic = path.join(__dirname, '../', 'storybook-static');
+  if (!fs.existsSync(pathToStorybookStatic)) {
+    logger.error(
+      'You are running puppeteer tests without having the static build of storybook. Please run "yarn run build-storybook" before running tests.'
+    );
+    return null;
+  }
+  return `file://${pathToStorybookStatic}`;
+}

examples/official-storybook/storyshots-puppeteer/puppeteer-tests.runner.js

@@ -3,27 +3,17 @@
  * `yarn run storyshots-puppeteer` generates the static build & uses storyshots-puppeteer.
  * */
 import path from 'path';
-import fs from 'fs';
 import initStoryshots from '@storybook/addon-storyshots';
 import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer';
-import { logger } from '@storybook/node-logger';
+import getStorybookUrl from './getStorybookUrl';
 
-// We run puppeteer tests on the static build of the storybook.
-// For this test to be meaningful, you must build the static version of the storybook *before* running this test suite.
-const pathToStorybookStatic = path.join(__dirname, '../', 'storybook-static');
-
-if (!fs.existsSync(pathToStorybookStatic)) {
-  logger.error(
-    'You are running puppeteer tests without having the static build of storybook. Please run "yarn run build-storybook" before running tests.'
-  );
-} else {
+const storybookUrl = getStorybookUrl();
+if (storybookUrl != null) {
   initStoryshots({
     suite: 'Puppeteer tests',
     storyKindRegex: /^Addons\/Storyshots/,
     framework: 'react',
     configPath: path.join(__dirname, '..'),
-    test: puppeteerTest({
-      storybookUrl: `file://${pathToStorybookStatic}`,
-    }),
+    test: puppeteerTest({ storybookUrl }),
   });
 }

examples/official-storybook/storyshots-puppeteer/storyshots-image.runner.js

@@ -3,28 +3,19 @@
  * `yarn run storyshots-puppeteer` generates the static build & uses storyshots-puppeteer.
  * */
 import path from 'path';
-import fs from 'fs';
 import initStoryshots from '@storybook/addon-storyshots';
 import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
-import { logger } from '@storybook/node-logger';
+import getStorybookUrl from './getStorybookUrl';
 
-// Image snapshots
-// We do screenshots against the static build of the storybook.
-// For this test to be meaningful, you must build the static version of the storybook *before* running this test suite.
-const pathToStorybookStatic = path.join(__dirname, '../', 'storybook-static');
-
-if (!fs.existsSync(pathToStorybookStatic)) {
-  logger.error(
-    'You are running image snapshots without having the static build of storybook. Please run "yarn run build-storybook" before running tests.'
-  );
-} else {
+const storybookUrl = getStorybookUrl();
+if (storybookUrl != null) {
   initStoryshots({
     suite: 'Image snapshots',
     storyKindRegex: /^Addons\/Storyshots/,
     framework: 'react',
     configPath: path.join(__dirname, '..'),
     test: imageSnapshot({
-      storybookUrl: `file://${pathToStorybookStatic}`,
+      storybookUrl,
       getMatchOptions: () => ({
         failureThreshold: 0.02, // 2% threshold,
         failureThresholdType: 'percent',

lib/components/src/Button/Button.stories.tsx

@@ -15,7 +15,7 @@ storiesOf('Basics/Button', module).add('all buttons', () => (
     <p>Buttons that are used for everything else</p>
     <Button primary>Primary</Button>
     <Button secondary>Secondary</Button>
-    <Button outline containsIcon>
+    <Button outline containsIcon title="link">
       <Icons icon="link" />
     </Button>
     <br />
@@ -42,7 +42,7 @@ storiesOf('Basics/Button', module).add('all buttons', () => (
     <Button primary disabled small>
       Disabled
     </Button>
-    <Button outline small containsIcon>
+    <Button outline small containsIcon title="link">
       <Icons icon="link" />
     </Button>
     <Button outline small>

lib/components/src/ScrollArea/ScrollArea.tsx

@@ -13,9 +13,9 @@ export interface ScrollProps {
   [key: string]: any;
 }
 
-const Scroll = styled(({ vertical, horizontal, ...rest }: ScrollProps) => <SimpleBar {...rest} />)<
-  ScrollProps
->(
+const Scroll = styled(({ vertical, horizontal, ...rest }: ScrollProps) => (
+  <SimpleBar {...rest} scrollableNodeProps={{ tabIndex: 0 }} />
+))<ScrollProps>(
   ({ vertical }) =>
     !vertical
       ? {

lib/components/src/form/form.stories.tsx

@@ -7,7 +7,7 @@ import { Input, Button, Select, Textarea } from './input/input';
 import { Field } from './field/field';
 import { Spaced } from '../spaced/Spaced';
 
-const Flexed = styled.div({ display: 'flex' });
+const Flexed = styled(Field)({ display: 'flex' });
 
 storiesOf('Basics/Form/Field', module).add('field', () => (
   <Field key="key" label="label">
@@ -23,7 +23,7 @@ storiesOf('Basics/Form/Select', module)
   .add('sizes', () => (
     <Spaced>
       {['auto', 'flex', '100%'].map(size => (
-        <Flexed key={size}>
+        <Flexed key={size} label={size}>
           <Select value="val2" onChange={action('onChange')} size={size}>
             <option value="val1">Value 1</option>
             <option value="val2">Value 2</option>
@@ -37,18 +37,28 @@ storiesOf('Basics/Form/Select', module)
     <div>
       <Spaced>
         {['error', 'warn', 'valid', null].map(valid => (
-          <Select key={valid} value="val2" onChange={action('onChange')} size="100%" valid={valid}>
-            <option value="val1">Value 1</option>
-            <option value="val2">Value 2</option>
-            <option value="val3">Value 3</option>
-          </Select>
+          <Field label={String(valid)}>
+            <Select
+              key={valid}
+              value="val2"
+              onChange={action('onChange')}
+              size="100%"
+              valid={valid}
+            >
+              <option value="val1">Value 1</option>
+              <option value="val2">Value 2</option>
+              <option value="val3">Value 3</option>
+            </Select>
+          </Field>
         ))}
       </Spaced>
-      <Select value="val2" onChange={action('onChange')} size="100%" disabled>
-        <option value="val1">Value 1</option>
-        <option value="val2">Value 2</option>
-        <option value="val3">Value 3</option>
-      </Select>
+      <Field label="select">
+        <Select value="val2" onChange={action('onChange')} size="100%" disabled>
+          <option value="val1">Value 1</option>
+          <option value="val2">Value 2</option>
+          <option value="val3">Value 3</option>
+        </Select>
+      </Field>
     </div>
   ));
 
@@ -56,7 +66,7 @@ storiesOf('Basics/Form/Button', module)
   .add('sizes', () => (
     <Spaced>
       {['auto', 'flex', '100%'].map(size => (
-        <Flexed key={size}>
+        <Flexed key={size} label={size}>
           <Button size={size}>click this button</Button>
         </Flexed>
       ))}
@@ -65,7 +75,7 @@ storiesOf('Basics/Form/Button', module)
   .add('validations', () => (
     <Spaced>
       {['error', 'warn', 'valid', null].map(valid => (
-        <Flexed key={valid}>
+        <Flexed key={valid} label={String(valid)}>
           <Button size="100%" valid={valid}>
             click this button
           </Button>
@@ -78,7 +88,7 @@ storiesOf('Basics/Form/Textarea', module)
   .add('sizes', () => (
     <Spaced>
       {['auto', 'flex', '100%'].map(size => (
-        <Flexed key={size}>
+        <Flexed key={size} label={size}>
           <Textarea defaultValue="textarea" size={size} />
         </Flexed>
       ))}
@@ -87,7 +97,7 @@ storiesOf('Basics/Form/Textarea', module)
   .add('validations', () => (
     <Spaced>
       {['error', 'warn', 'valid', null].map(valid => (
-        <Flexed key={valid}>
+        <Flexed key={valid} label={String(valid)}>
           <Textarea defaultValue="textarea" size="100%" valid={valid} />
         </Flexed>
       ))}
@@ -96,7 +106,7 @@ storiesOf('Basics/Form/Textarea', module)
   .add('alignment', () => (
     <Spaced>
       {['end', 'center', 'start'].map(align => (
-        <Flexed key={align}>
+        <Flexed key={align} label={align}>
           <Textarea defaultValue="textarea" size="100%" align={align} />
         </Flexed>
       ))}
@@ -107,7 +117,7 @@ storiesOf('Basics/Form/Input', module)
   .add('sizes', () => (
     <Spaced>
       {['auto', 'flex', '100%'].map(size => (
-        <Flexed key={size}>
+        <Flexed key={size} label={size}>
           <Input defaultValue="text" size={size} />
         </Flexed>
       ))}
@@ -116,7 +126,7 @@ storiesOf('Basics/Form/Input', module)
   .add('validations', () => (
     <Spaced>
       {['error', 'warn', 'valid', null].map(valid => (
-        <Flexed key={valid}>
+        <Flexed key={valid} label={String(valid)}>
           <Input defaultValue="text" size="100%" valid={valid} />
         </Flexed>
       ))}
@@ -125,7 +135,7 @@ storiesOf('Basics/Form/Input', module)
   .add('alignment', () => (
     <Spaced>
       {['end', 'center', 'start'].map(align => (
-        <Flexed key={align}>
+        <Flexed key={align} label={align}>
           <Input defaultValue="text" size="100%" align={align} />
         </Flexed>
       ))}

lib/components/src/tabs/tabs.stories.tsx

@@ -141,7 +141,7 @@ storiesOf('Basics/Tabs', module)
   .add('stateful - static with set button text colors', () => (
     <div>
       <TabsState initial="test2">
-        <div id="test1" title="With a function" color="red">
+        <div id="test1" title="With a function" color="#e00000">
           {({ active, selected }: { active: boolean; selected: string }) =>
             active ? <div>{selected} is selected</div> : null
           }
@@ -155,7 +155,7 @@ storiesOf('Basics/Tabs', module)
   .add('stateful - static with set backgroundColor', () => (
     <div>
       <TabsState initial="test2" backgroundColor="rgba(0,0,0,.05)">
-        <div id="test1" title="With a function" color="red">
+        <div id="test1" title="With a function" color="#e00000">
           {({ active, selected }: { active: boolean; selected: string }) =>
             active ? <div>{selected} is selected</div> : null
           }

lib/components/src/tabs/tabs.tsx

@@ -171,7 +171,7 @@ export const Tabs: FunctionComponent<TabsProps> = memo(
           </TabBar>
           {tools ? <Fragment>{tools}</Fragment> : null}
         </FlexBar>
-        <Content absolute={absolute}>
+        <Content absolute={absolute} tabIndex={0}>
           {list.map(({ id, active, render }) => render({ key: id, active }))}
         </Content>
       </Wrapper>

lib/components/src/typography/link/link.stories.tsx

@@ -48,7 +48,7 @@ storiesOf('Basics/Link', module)
         With icon in front
       </Link>
       <br />
-      <Link containsIcon href="http://google.com">
+      <Link title="Toggle sidebar" containsIcon href="http://google.com">
         {/* A linked icon by itself   */}
         <Icons icon="sidebar" />
       </Link>

lib/ui/src/components/sidebar/SidebarHeading.tsx

@@ -86,7 +86,7 @@ const Brand = withTheme(
     }
     if (image === undefined && url) {
       return (
-        <LogoLink href={url} target={targetValue}>
+        <LogoLink title={title} href={url} target={targetValue}>
           <Logo alt={title} />
         </LogoLink>
       );
@@ -104,7 +104,7 @@ const Brand = withTheme(
     }
     if (image && url) {
       return (
-        <LogoLink href={url} target={targetValue}>
+        <LogoLink title={title} href={url} target={targetValue}>
           <Img src={image} alt={title} />
         </LogoLink>
       );

lib/ui/src/components/sidebar/SidebarSearch.stories.tsx

@@ -8,7 +8,7 @@ export default {
   title: 'UI/Sidebar/SidebarSearch',
   decorators: [
     (storyFn: any) => (
-      <div style={{ width: '240px', margin: '1rem', padding: '1rem', background: '#999' }}>
+      <div style={{ width: '240px', margin: '1rem', padding: '1rem', background: 'white' }}>
         {storyFn()}
       </div>
     ),

lib/ui/src/settings/about.js

@@ -130,6 +130,7 @@ const AboutScreen = ({ latest, current, onClose }) => {
                 e.preventDefault();
                 return onClose();
               }}
+              title="close"
             >
               <Icons icon="close" />
             </IconButton>