Merge pull request #250 from IBM/fixes

Fixes

src/Pagination/Pagination.Story.svelte

@@ -12,6 +12,12 @@
   {:else if story === 'skeleton'}
     <PaginationSkeleton />
   {:else}
-    <Pagination {...$$props}>Pagination</Pagination>
+    <Pagination
+      {...$$props}
+      on:update="{({ detail }) => {
+        console.log(detail);
+      }}">
+      Pagination
+    </Pagination>
   {/if}
 </div>

src/Pagination/Pagination.svelte

@@ -91,17 +91,25 @@
    */
   export let id = "ccs-" + Math.random().toString(36);
 
-  import CaretLeft24 from "carbon-icons-svelte/lib/CaretLeft24";
-  import CaretRight24 from "carbon-icons-svelte/lib/CaretRight24";
+  import { createEventDispatcher } from "svelte";
+  import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16";
+  import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16";
+  import { Button } from "../Button";
   import { Select, SelectItem } from "../Select";
-  import { afterUpdate, createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
 
-  afterUpdate(() => {
-    dispatch("update", { pageSize: parseInt(pageSize), page: parseInt(page) });
-  });
+  $: {
+    if (typeof page !== "number") {
+      page = Number(page);
+    }
 
+    if (typeof pageSize !== "number") {
+      pageSize = Number(pageSize);
+    }
+
+    dispatch("update", { pageSize, page });
+  }
   $: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
   $: selectItems = Array.from({ length: totalPages }, (_, i) => i);
   $: backButtonDisabled = disabled || page === 1;
@@ -154,29 +162,29 @@
         {:else}{pageRangeText(page, totalPages)}{/if}
       </span>
     {/if}
-    <button
-      type="button"
-      aria-label="{backwardText}"
+    <Button
+      hasIconOnly
+      kind="ghost"
+      tooltipAlignment="center"
+      tooltipPosition="top"
+      icon="{CaretLeft16}"
+      iconDescription="{backwardText}"
       disabled="{backButtonDisabled}"
-      class:bx--pagination__button="{true}"
-      class:bx--pagination__button--backward="{true}"
-      class:bx--pagination__button--no-index="{backButtonDisabled}"
+      class="bx--pagination__button bx--pagination__button--backward {backButtonDisabled ? 'bx--pagination__button--no-index' : ''}"
       on:click="{() => {
         page--;
-      }}">
-      <CaretLeft24 />
-    </button>
-    <button
-      type="button"
-      aria-label="{forwardText}"
+      }}" />
+    <Button
+      hasIconOnly
+      kind="ghost"
+      tooltipAlignment="end"
+      tooltipPosition="top"
+      icon="{CaretRight16}"
+      iconDescription="{forwardText}"
       disabled="{forwardButtonDisabled}"
-      class:bx--pagination__button="{true}"
-      class:bx--pagination__button--forward="{true}"
-      class:bx--pagination__button--no-index="{forwardButtonDisabled}"
+      class="bx--pagination__button bx--pagination__button--forward {forwardButtonDisabled ? 'bx--pagination__button--no-index' : ''}"
       on:click="{() => {
         page++;
-      }}">
-      <CaretRight24 />
-    </button>
+      }}" />
   </div>
 </div>

src/ProgressIndicator/ProgressIndicator.Story.svelte

@@ -26,7 +26,10 @@
       <ProgressStep
         label="First step"
         description="Step 1: Getting started with Carbon Design System"
-        secondaryLabel="Optional label" />
+        secondaryLabel="Optional label"
+        on:click="{() => {
+          console.log('click');
+        }}" />
       <ProgressStep
         label="Second step with tooltip"
         description="Step 2: Getting started with Carbon Design System"

src/ProgressIndicator/ProgressStep.svelte

@@ -71,11 +71,13 @@
   class:bx--progress-step--incomplete="{!complete && !current}"
   class:bx--progress-step--disabled="{disabled}"
   {...$$restProps}>
-  <div
-    role="button"
-    tabindex="{current ? '-1' : '0'}"
+  <button
+    disabled="{disabled}"
+    aria-disabled="{disabled}"
+    tabindex="{!current && !disabled ? '0' : '-1'}"
     class:bx--progress-step-button="{true}"
     class:bx--progress-step-button--unclickable="{current}"
+    on:click
     on:click="{() => {
       change(step.index);
     }}"
@@ -112,5 +114,5 @@
       <p class:bx--progress-optional="{true}">{secondaryLabel}</p>
     {/if}
     <span class:bx--progress-line="{true}"></span>
-  </div>
+  </button>
 </li>

src/Tile/RadioTile.svelte

@@ -57,14 +57,21 @@
   name="{name}"
   value="{value}"
   checked="{checked}"
+  tabindex="{tabindex}"
   class:bx--tile-input="{true}"
   on:change
   on:change="{() => {
     update(value);
+  }}"
+  on:keydown
+  on:keydown="{(e) => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      update(value);
+    }
   }}" />
 <label
   for="{id}"
-  tabindex="{tabindex}"
   class:bx--tile="{true}"
   class:bx--tile--selectable="{true}"
   class:bx--tile--is-selected="{checked}"
@@ -73,14 +80,7 @@
   on:click
   on:mouseover
   on:mouseenter
-  on:mouseleave
-  on:keydown
-  on:keydown="{(e) => {
-    if (e.key === ' ' || e.key === 'Enter') {
-      e.preventDefault();
-      update(value);
-    }
-  }}">
+  on:mouseleave>
   <span class:bx--tile__checkmark="{true}">
     <CheckmarkFilled16
       aria-label="{iconDescription}"

src/Tile/Tile.Story.svelte

@@ -52,7 +52,10 @@
           {...$$props}
           value="{value}"
           id="{id}"
-          labelText="{labelText}">
+          labelText="{labelText}"
+          on:keydown="{() => {
+            console.log('keydown');
+          }}">
           Selectable Tile
         </RadioTile>
       {/each}

src/UIShell/SideNav/SideNavMenu.svelte

@@ -24,7 +24,6 @@
 <li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}">
   <button
     type="button"
-    aria-haspopup="true"
     aria-expanded="{expanded}"
     class:bx--side-nav__submenu="{true}"
     {...$$restProps}

src/UIShell/SideNav/SideNavMenuItem.svelte

@@ -18,9 +18,8 @@
   export let text = undefined;
 </script>
 
-<li role="none" class:bx--side-nav__menu-item="{true}">
+<li class:bx--side-nav__menu-item="{true}">
   <a
-    role="menuitem"
     aria-current="{isSelected ? 'page' : undefined}"
     href="{href}"
     class:bx--side-nav__link="{true}"