Fix accessibility errors from markdown stories

Author: angelikatyborska

.storybook/test-runner.js

@@ -23,9 +23,9 @@ module.exports = {
         axeOptions: {
           rules: {
             // TODO: enable this rule again once all color contrast issues are fixed
-            "color-contrast": {
-              enabled: false
-            }
+            'color-contrast': {
+              enabled: false,
+            },
           },
         },
         detailedReport: true,

scss/bitstyles/atoms/dropdown/dropdown.stories.js

@@ -62,7 +62,7 @@ const menu = `
           colorVariant: ['transparent'],
           shapeVariant: ['menu'],
           children: 'Settings',
-          element: 'a',
+          classname: ['u-width-full'],
         }).outerHTML
       }
     </li>
@@ -72,7 +72,7 @@ const menu = `
           colorVariant: ['transparent'],
           shapeVariant: ['menu'],
           children: 'Help',
-          element: 'a',
+          classname: ['u-width-full'],
         }).outerHTML
       }
     </li>
@@ -82,7 +82,7 @@ const menu = `
           colorVariant: ['transparent'],
           shapeVariant: ['menu'],
           children: 'Privacy',
-          element: 'a',
+          classname: ['u-width-full'],
         }).outerHTML
       }
     </li>
@@ -92,7 +92,7 @@ const menu = `
           colorVariant: ['transparent'],
           shapeVariant: ['menu'],
           children: 'Sign out',
-          element: 'a',
+          classname: ['u-width-full'],
         }).outerHTML
       }
     </li>

scss/bitstyles/base/forms/forms.stories.mdx

@@ -143,7 +143,7 @@ This includes all standard `type="text"` inputs, plus all the text-based inputs
   <Story name="Select and label (invalid)">
     {`
       <label for="input_d2">Invalid select</label>
-      <select required>
+      <select id="input_d2" required>
         <option value="" disabled hidden selected>Please select</option>
         <option value="value2">Value 2</option>
         <option value="value3">Value 3</option>

scss/bitstyles/base/forms/inputs.stories.mdx

@@ -32,12 +32,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - color">
     {`
-      <input type="color">
+      <label><input type="color"> label</label>
     `}
   </Story>
   <Story name="Input - color (disabled)">
     {`
-      <input type="color" disabled>
+      <label><input type="color" disabled> label</label>
     `}
   </Story>
 </Canvas>
@@ -47,12 +47,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - date">
     {`
-      <input type="date">
+      <label>label <input type="date"></label>
     `}
   </Story>
   <Story name="Input - date (disabled)">
     {`
-      <input type="date" disabled>
+      <label>label <input type="date" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -62,12 +62,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - datetime-local">
     {`
-      <input type="datetime-local">
+      <label>label <input type="datetime-local"></label>
     `}
   </Story>
   <Story name="Input - datetime-local (disabled)">
     {`
-      <input type="datetime-local" disabled>
+      <label>label <input type="datetime-local" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -77,12 +77,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - file">
     {`
-      <input type="file">
+      <label>label <input type="file"></label>
     `}
   </Story>
   <Story name="Input - file (disabled)">
     {`
-      <input type="file" disabled>
+      <label>label <input type="file" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -107,12 +107,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - month">
     {`
-      <input type="month">
+      <label>label <input type="month"></label>
     `}
   </Story>
   <Story name="Input - month (disabled)">
     {`
-      <input type="month" disabled>
+      <label>label <input type="month" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -122,12 +122,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - week">
     {`
-      <input type="week">
+      <label>label <input type="week"></label>
     `}
   </Story>
   <Story name="Input - week (disabled)">
     {`
-      <input type="week" disabled>
+      <label>label <input type="week" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -137,12 +137,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - password">
     {`
-      <input type="password" value="Password">
+      <label>label <input type="password" value="Password"></label>
     `}
   </Story>
   <Story name="Input - password (disabled)">
     {`
-      <input type="password" value="Password" disabled>
+      <label>label <input type="password" value="Password" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -167,12 +167,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - search">
     {`
-      <input type="search">
+      <label>label <input type="search"></label>
     `}
   </Story>
   <Story name="Input - search (disabled)">
     {`
-      <input type="search" (disabled)>
+      <label>label <input type="search" (disabled)></label>
     `}
   </Story>
 </Canvas>
@@ -197,12 +197,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - tel">
     {`
-      <input type="tel">
+      <label>label <input type="tel"></label>
     `}
   </Story>
   <Story name="Input - tel (disabled)">
     {`
-      <input type="tel" disabled>
+      <label>label <input type="tel" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -212,12 +212,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - time">
     {`
-      <input type="time">
+      <label>label <input type="time"></label>
     `}
   </Story>
   <Story name="Input - time (disabled)">
     {`
-      <input type="time" disabled>
+      <label>label <input type="time" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -227,12 +227,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - url">
     {`
-      <input type="url">
+      <label>label <input type="url"></label>
     `}
   </Story>
   <Story name="Input - url (disabled)">
     {`
-      <input type="url" disabled>
+      <label>label <input type="url" disabled></label>
     `}
   </Story>
 </Canvas>

scss/bitstyles/base/input-checkbox/input-checkbox.stories.mdx

@@ -7,22 +7,22 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - checkbox">
     {`
-      <input type="checkbox">
+      <label><input type="checkbox"> label</label>
     `}
   </Story>
   <Story name="Input - checkbox (disabled)">
     {`
-      <input type="checkbox" disabled>
+      <label><input type="checkbox" disabled> label</label>
     `}
   </Story>
   <Story name="Input - checkbox (checked)">
     {`
-      <input type="checkbox" checked>
+      <label><input type="checkbox" checked> label</label>
     `}
   </Story>
   <Story name="Input - checkbox (checked, disabled">
     {`
-      <input type="checkbox" checked disabled>
+      <label><input type="checkbox" checked disabled> label</label>
     `}
   </Story>
 </Canvas>

scss/bitstyles/base/input-radio/input-radio.stories.mdx

@@ -7,22 +7,22 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - radio">
     {`
-      <input type="radio">
+      <label><input type="radio"> label</label>
     `}
   </Story>
   <Story name="Input - radio (disabled)">
     {`
-      <input type="radio" disabled>
+      <label><input type="radio" disabled> label</label>
     `}
   </Story>
   <Story name="Input - radio (checked)">
     {`
-      <input type="radio" checked>
+      <label><input type="radio" checked> label</label>
     `}
   </Story>
   <Story name="Input - radio (checked, disabled)">
     {`
-      <input type="radio" checked disabled>
+      <label><input type="radio" checked disabled> label</label>
     `}
   </Story>
 </Canvas>

scss/bitstyles/base/input-text/input-text.stories.mdx

@@ -13,12 +13,12 @@ You may find [Base/Forms](/docs/base-forms--fieldset) more informative.
 <Canvas isColumn>
   <Story name="Input - text">
     {`
-      <input type="text" placeholder="Jelly cake marshmallow">
+      <label>label <input type="text" placeholder="Jelly cake marshmallow"></label>
     `}
   </Story>
   <Story name="Input - text (disabled)">
     {`
-      <input type="text" placeholder="Jelly cake marshmallow" disabled>
+      <label>label <input type="text" placeholder="Jelly cake marshmallow" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -28,12 +28,12 @@ You may find [Base/Forms](/docs/base-forms--fieldset) more informative.
 <Canvas isColumn>
   <Story name="Input - email">
     {`
-      <input type="email" placeholder="jellycake@marshmallow.com">
+      <label>label <input type="email" placeholder="jellycake@marshmallow.com"></label>
     `}
   </Story>
   <Story name="Input - email (disabled)">
     {`
-      <input type="email" placeholder="jellycake@marshmallow.com" disabled>
+      <label>label <input type="email" placeholder="jellycake@marshmallow.com" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -43,12 +43,12 @@ You may find [Base/Forms](/docs/base-forms--fieldset) more informative.
 <Canvas isColumn>
   <Story name="Input - number">
     {`
-      <input type="number" placeholder="123456789">
+      <label>label <input type="number" placeholder="123456789"></label>
     `}
   </Story>
   <Story name="Input - number (disabled)">
     {`
-      <input type="number" placeholder="123456789" disabled>
+      <label>label <input type="number" placeholder="123456789" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -58,12 +58,12 @@ You may find [Base/Forms](/docs/base-forms--fieldset) more informative.
 <Canvas isColumn>
   <Story name="Input - range">
     {`
-      <input type="range" min="0" max="10" step="1">
+      <label>label <input type="range" min="0" max="10" step="1"></label>
     `}
   </Story>
   <Story name="Input - range (disabled)">
     {`
-      <input type="range" min="0" max="10" step="1" disabled>
+      <label>label <input type="range" min="0" max="10" step="1" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -73,12 +73,12 @@ You may find [Base/Forms](/docs/base-forms--fieldset) more informative.
 <Canvas isColumn>
   <Story name="Textarea">
     {`
-      <textarea rows="5" cols="30" placeholder="Placeholder text">Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</textarea>
+      <label>label <textarea rows="5" cols="30" placeholder="Placeholder text">Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</textarea></label>
     `}
   </Story>
   <Story name="Textarea (disabled)">
     {`
-      <textarea rows="5" cols="30" placeholder="Placeholder text" disabled>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</textarea>
+      <label>label <textarea rows="5" cols="30" placeholder="Placeholder text" disabled>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</textarea></label>
     `}
   </Story>
 </Canvas>