Add accessibility tests (#2165)

* Add Storybook accessibility tests

* Add aria labels to scroll to buttons

* Add missing label to range input

* Fix aria describedby and labelledby on RadioInput and Modal

* Fix border and focus styles on Textarea

* Update focus styles and remove nested button in Accordion

* Fix contrast violations due to opacity

* Remove hr from OrderableListItem and add labels to stories

* Remove checkbox role on div in Checkbox component

* Fix aria-labels in CodeBlock component

* Add tabindex of 0 on scrollable region in CodeBlock

* Update text-danger color to pass contrast test

* Fix checkbox selector in test

.storybook/test-runner.ts

@@ -0,0 +1,18 @@
+import type { TestRunnerConfig } from '@storybook/test-runner';
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+const config: TestRunnerConfig = {
+  async preVisit(page) {
+    await injectAxe(page);
+  },
+  async postVisit(page) {
+    await checkA11y(page, '#storybook-root', {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true,
+      },
+    });
+  },
+};
+
+export default config;

package.json

@@ -154,6 +154,7 @@
     "@vitest/coverage-v8": "^1.6.0",
     "@vitest/ui": "^1.6.0",
     "autoprefixer": "^10.4.13",
+    "axe-playwright": "^2.0.1",
     "c8": "^7.12.0",
     "chalk": "^4.1.2",
     "concurrently": "^7.6.0",

src/lib/holocene/accordion.svelte

@@ -10,8 +10,6 @@
 
   import type { IconName } from './icon';
 
-  import Button from './button.svelte';
-
   interface $$Props extends HTMLAttributes<HTMLDivElement> {
     title: string;
     id?: string;
@@ -42,7 +40,7 @@
 
 <div
   class={merge(
-    'surface-primary flex w-full cursor-default flex-col rounded-2xl border-2 border-subtle p-4 text-primary hover:bg-interactive-secondary-hover',
+    'surface-primary flex w-full cursor-default flex-col rounded-2xl border-2 border-subtle p-2 text-primary focus-within:ring-4 focus-within:ring-primary/70',
     className,
   )}
   {...$$restProps}
@@ -51,7 +49,7 @@
     id="{id}-trigger"
     aria-expanded={open}
     aria-controls="{id}-content"
-    class="flex w-full flex-col"
+    class="flex w-full flex-col rounded-lg p-2 hover:bg-interactive-secondary-hover focus-visible:bg-interactive-secondary-hover focus-visible:outline-none"
     type="button"
     on:click={toggleAccordion}
   >
@@ -68,11 +66,7 @@
       >
         <slot name="action" />
       </div>
-      <Button
-        leadingIcon={open ? 'chevron-up' : 'chevron-down'}
-        variant="ghost"
-        on:click={toggleAccordion}
-      />
+      <Icon class="m-2" name={open ? 'chevron-up' : 'chevron-down'} />
     </div>
     <p class="flex items-center font-secondary">
       {#if error}
@@ -85,7 +79,7 @@
     id="{id}-content"
     aria-labelledby="{id}-trigger"
     role="textbox"
-    class="mt-8 block w-full"
+    class="mt-6 block w-full p-2"
     class:hidden={!open}
   >
     <slot />

src/lib/holocene/calendar.svelte

@@ -78,7 +78,7 @@
   }
 
   .disabled {
-    @apply cursor-not-allowed bg-interactive opacity-50;
+    @apply cursor-not-allowed bg-interactive/50 text-primary;
   }
 
   .highlight {

src/lib/holocene/checkbox.svelte

@@ -72,9 +72,7 @@
   data-testid={$$restProps['data-testid'] ?? null}
   on:click|stopPropagation
   on:keypress|stopPropagation
-  role="checkbox"
-  aria-checked={checked}
-  tabindex={-1}
+  role="none"
 >
   <Label
     class={merge(

src/lib/holocene/code-block.stories.svelte

@@ -10,6 +10,7 @@
       inline: false,
       language: 'json',
       copyable: false,
+      label: 'JSON content',
     },
     argTypes: {
       editable: {
@@ -61,33 +62,15 @@
 </script>
 
 <Template id="json" let:args>
-  <CodeBlock
-    language="json"
-    copyIconTitle="Click to copy content"
-    copySuccessIconTitle="Content copied to clipboard"
-    {...args}
-    on:change={action('change')}
-  />
+  <CodeBlock language="json" {...args} on:change={action('change')} />
 </Template>
 
 <Template id="shell" let:args>
-  <CodeBlock
-    language="shell"
-    copyIconTitle="Click to copy content"
-    copySuccessIconTitle="Content copied to clipboard"
-    {...args}
-    on:change={action('change')}
-  />
+  <CodeBlock language="shell" {...args} on:change={action('change')} />
 </Template>
 
 <Template id="text" let:args>
-  <CodeBlock
-    language="text"
-    copyIconTitle="Click to copy content"
-    copySuccessIconTitle="Content copied to clipboard"
-    {...args}
-    on:change={action('change')}
-  />
+  <CodeBlock language="text" {...args} on:change={action('change')} />
 </Template>
 
 <Template let:args>
@@ -122,6 +105,8 @@
   args={{
     copyable: true,
     content: stringifyWithBigInt({ hello: 'world' }, null, 2),
+    copyIconTitle: 'Click to copy content',
+    copySuccessIconTitle: 'Content copied to clipboard',
   }}
 />
 
@@ -167,6 +152,8 @@
     language: 'shell',
     copyable: true,
     content: 'echo "Hello, World!"',
+    copyIconTitle: 'Click to copy content',
+    copySuccessIconTitle: 'Content copied to clipboard',
   }}
 />
 
@@ -176,6 +163,8 @@
     language: 'text',
     copyable: true,
     content: 'Hello, World!',
+    copyIconTitle: 'Click to copy content',
+    copySuccessIconTitle: 'Content copied to clipboard',
   }}
 />
 
@@ -185,6 +174,8 @@
     language: 'json',
     copyable: true,
     content: stringifyWithBigInt({ hello: 'world' }, null, 2),
+    copyIconTitle: 'Click to copy content',
+    copySuccessIconTitle: 'Content copied to clipboard',
   }}
   parameters={{
     themes: {

src/lib/holocene/code-block.svelte

@@ -37,6 +37,7 @@
     copyable?: boolean;
     minHeight?: number;
     maxHeight?: number;
+    label?: string;
   };
 
   type CopyableProps = BaseProps & {
@@ -60,6 +61,7 @@
   export let copySuccessIconTitle = '';
   export let minHeight = undefined;
   export let maxHeight = undefined;
+  export let label = '';
 
   const { copy, copied } = copyToClipboard();
 
@@ -112,6 +114,7 @@
       indentOnInput(),
       bracketMatching(),
       EditorState.readOnly.of(!editable),
+      EditorView.contentAttributes.of({ 'aria-label': label }),
     ];
 
     if (language === 'json') {
@@ -139,6 +142,7 @@
           },
         }),
       );
+      extensions.push(EditorView.contentAttributes.of({ tabindex: '0' }));
     }
 
     return EditorState.create({

src/lib/holocene/input/chip-input.svelte

@@ -100,7 +100,7 @@
     bind:this={inputContainer}
     class={merge(
       'input-container',
-      disabled && 'cursor-not-allowed opacity-50',
+      disabled && 'cursor-not-allowed opacity-65',
       invalid && 'invalid',
     )}
   >

src/lib/holocene/input/range-input.svelte

@@ -83,6 +83,7 @@
           for="range">{value ?? ''}</output
         >
         <input
+          id="{id}-range"
           name="range"
           type="range"
           class="h-0 w-full cursor-pointer appearance-none rounded border-y-2 border-primary"
@@ -93,6 +94,7 @@
           {step}
           {...omit($$restProps, 'class')}
         />
+        <Label hidden {label} for="{id}-range" />
       </div>
       <span class="absolute -bottom-6 right-0 text-xs font-normal">
         {max}

src/lib/holocene/main-content-container.svelte

@@ -60,5 +60,7 @@
     {scrollToBottomHidden}
     {onScrollToTopClick}
     {onScrollToBottomClick}
+    scrollToTopAriaLabel="Scroll to top"
+    scrollToBottomAriaLabel="Scroll to bottom"
   />
 </div>

src/lib/holocene/modal.svelte

@@ -87,7 +87,7 @@
   class:large
   class:hightlightNav
   aria-modal="true"
-  aria-labelledby="modal-title"
+  aria-labelledby="modal-title-{id}"
   data-testid={$$props['data-testid']}
   {...$$restProps}
   use:focusTrap={true}

src/lib/holocene/orderable-list/orderable-list-item.svelte

@@ -141,11 +141,10 @@
     {/if}
   {/if}
 </li>
-<hr />
 
 <style lang="postcss">
   .orderable-item {
-    @apply flex select-none list-none flex-row items-center justify-between p-2 text-sm font-medium first-of-type:rounded-tl-lg first-of-type:rounded-tr-lg last-of-type:rounded-bl-lg last-of-type:rounded-br-lg;
+    @apply flex select-none list-none flex-row items-center justify-between border-b border-subtle p-2 text-sm font-medium first-of-type:rounded-tl-lg first-of-type:rounded-tr-lg last-of-type:rounded-bl-lg last-of-type:rounded-br-lg last-of-type:border-b-0;
   }
 
   .orderable-item[draggable='true'] {
@@ -156,10 +155,6 @@
     @apply surface-secondary;
   }
 
-  hr {
-    @apply pointer-events-none border-subtle last-of-type:hidden;
-  }
-
   :global(.orderable-item.dragging-over:not(.locked)) {
     @apply bg-gradient-to-br from-blue-100 to-purple-100;
 

src/lib/holocene/orderable-list/orderable-list.stories.svelte

@@ -52,6 +52,9 @@
         static={false}
         label={item.label}
         pinned={item.pinned}
+        moveUpButtonLabel="Move Up"
+        moveDownButtonLabel="Move Down"
+        removeButtonLabel="Remove"
         {index}
       />
     {/each}
@@ -77,6 +80,9 @@
         static={false}
         label={item.label}
         pinned={item.pinned}
+        moveUpButtonLabel="Move Up"
+        moveDownButtonLabel="Move Down"
+        removeButtonLabel="Remove"
         {index}
       />
     {/each}