resolve A11y warnings

Author: hobbitronics

components/mdc/Card/Card.svelte

@@ -6,7 +6,7 @@ export let color = 'white'
 export let isClickable = false
 export let noPadding = false
 
-$: tabindex = isClickable ? '0' : undefined
+$: tabindex = isClickable ? 0 : undefined
 </script>
 
 <style>

components/mdc/Datatable/DatatableCheckbox.svelte

@@ -9,7 +9,7 @@ onMount(() => dispatch('mounted'))
 const dispatch = createEventDispatcher()
 </script>
 
-<td class="mdc-data-table__cell mdc-data-table__cell--checkbox" on:click>
+<td class="mdc-data-table__cell mdc-data-table__cell--checkbox" on:click on:keypress on:keyup on:keydown>
   <div class="mdc-checkbox mdc-data-table__row-checkbox">
     <input type="checkbox" class="mdc-checkbox__native-control" aria-labelledby={rowId} {disabled} />
     <div class="mdc-checkbox__background">

components/mdc/Drawer/Drawer.svelte

@@ -66,8 +66,10 @@ const showAppropriateDrawer = () => {
 }
 
 const onListClick = (e) => {
-  modal && closeDrawer()
-  dismissible && mainContentEl.querySelector('input, button').focus()
+  if (e.type === 'click' || e.key === 'Enter' || e.key === ' ') {
+    modal && closeDrawer()
+    dismissible && mainContentEl.querySelector('input, button').focus()
+  }
 }
 
 const showAppropriateSizeMenu = () => (isNotMini = isAboveMobile() || !miniMenu)
@@ -124,7 +126,13 @@ main {
     <slot name="drawer-content-top" />
     <!-- override built-in padding so height 100 works correctly without creating a vertical scroller -->
     <!-- changing the list to flex causes the margins to not collapse -->
-    <nav class="mdc-deprecated-list flex column p-0" class:h-100={isFullHeightMenu} on:click={onListClick} bind:this={listElement}>
+    <nav
+      class="mdc-deprecated-list flex column p-0"
+      class:h-100={isFullHeightMenu}
+      on:click={onListClick}
+      on:keyup={onListClick}
+      bind:this={listElement}
+    >
       {#each menuItems as { icon, label, url, urlPattern, hide, button, tooltip }, i}
         {#if label === '--break--'}
           <span class="grow-1" />
@@ -152,7 +160,9 @@ main {
                 {/if}
               </a>
             {:else}
-              <hr class="mdc-deprecated-list-divider mdc-deprecated-list-divider--inset-leading mdc-deprecated-list-divider--inset-trailing" />
+              <hr
+                class="mdc-deprecated-list-divider mdc-deprecated-list-divider--inset-leading mdc-deprecated-list-divider--inset-trailing"
+              />
             {/if}
           </Tooltip.Wrapper>
           {#if tooltip}

components/mdc/List/Item.svelte

@@ -41,6 +41,9 @@ img {
   class:mdc-deprecated-list-item--disabled={nonInteractive}
   data-mdc-dialog-action={$$props['data-mdc-dialog-action']}
   on:click
+  on:keydown
+  on:keypress
+  on:keyup
   {tabindex}
 >
   {#if graphicURL}

components/mdc/Select/Select.svelte

@@ -26,6 +26,8 @@ $: if (options && mdcSelect.layoutOptions) mdcSelect.layoutOptions()
 
 const recordSelectedID = (event) => (selectedID = event.detail.value)
 
+const isOptionSelected = (option) => option.id === selectedID
+
 onMount(() => {
   mdcSelect = new MDCSelect(element)
   mdcSelect.listen('MDCSelect:change', recordSelectedID)
@@ -77,7 +79,7 @@ afterUpdate(() => {
   <div class="mdc-select__menu mdc-menu mdc-menu-surface" style="width: {width}" role="listbox">
     <ul class="mdc-deprecated-list">
       {#each options as { id, name } (id)}
-        <li class="mdc-deprecated-list-item" data-value={id} role="option">
+        <li class="mdc-deprecated-list-item" data-value={id} role="option" aria-selected={isOptionSelected(id)}>
           <span class="mdc-deprecated-list-item__text">{name}</span>
         </li>
       {/each}

stories/Button.stories.svelte

@@ -3,8 +3,6 @@ import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
 import { Button } from '../components/mdc'
 import { copyAndModifyArgs } from './helpers.js'
 
-let content = 'Button slot'
-
 const args = {
   raised: true,
   class: '',
@@ -15,7 +13,7 @@ const args = {
 <Meta title="Atoms/Button" component={Button} />
 
 <Template let:args>
-  <Button {...args} on:click={args['on:click']}>{content}</Button>
+  <Button {...args} on:click={args['on:click']}>Button slot</Button>
 </Template>
 
 <Story name="Primary" {args} />
@@ -27,3 +25,8 @@ const args = {
 <Story name="Icon After" args={copyAndModifyArgs(args, { appendIcon: 'arrow_forward' })} />
 
 <Story name="Icon Before" args={copyAndModifyArgs(args, { prependIcon: 'work' })} />
+
+<Story
+  name="Url"
+  args={copyAndModifyArgs(args, { url: 'https://github.com/silinternational', raised: false, 'on:click': () => {} })}
+/>