From 3202f39a4fc5c5a043ec12f7c90247edd42ae52d Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 14 Sep 2020 06:39:51 -0700
Subject: [PATCH 1/7] fix(progress-step): use button element

- set tabIndex to "-1" if disabled
---
 src/ProgressIndicator/ProgressStep.svelte | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/ProgressIndicator/ProgressStep.svelte b/src/ProgressIndicator/ProgressStep.svelte
index 94620731..7fd1819b 100644
--- a/src/ProgressIndicator/ProgressStep.svelte
+++ b/src/ProgressIndicator/ProgressStep.svelte
@@ -71,9 +71,10 @@
   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="{() => {
@@ -112,5 +113,5 @@
       <p class:bx--progress-optional="{true}">{secondaryLabel}</p>
     {/if}
     <span class:bx--progress-line="{true}"></span>
-  </div>
+  </button>
 </li>

From 6cb877ede13edce75601f6f19629df87d1271108 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 14 Sep 2020 06:43:27 -0700
Subject: [PATCH 2/7] fix(progress-step): forward click event

---
 src/ProgressIndicator/ProgressIndicator.Story.svelte | 5 ++++-
 src/ProgressIndicator/ProgressStep.svelte            | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/ProgressIndicator/ProgressIndicator.Story.svelte b/src/ProgressIndicator/ProgressIndicator.Story.svelte
index c11c2c59..45de086f 100644
--- a/src/ProgressIndicator/ProgressIndicator.Story.svelte
+++ b/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"
diff --git a/src/ProgressIndicator/ProgressStep.svelte b/src/ProgressIndicator/ProgressStep.svelte
index 7fd1819b..dd34a308 100644
--- a/src/ProgressIndicator/ProgressStep.svelte
+++ b/src/ProgressIndicator/ProgressStep.svelte
@@ -77,6 +77,7 @@
     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);
     }}"

From a4d68e7e00dcd92dec9486a3030f7239d8ad4286 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 14 Sep 2020 06:49:42 -0700
Subject: [PATCH 3/7] fix(side-nav-menu): fix a11y warnings

- remove role attributes from SideNavMenuItem
- remove "aria-haspopup" from SideNavMenu
---
 src/UIShell/SideNav/SideNavMenu.svelte     | 1 -
 src/UIShell/SideNav/SideNavMenuItem.svelte | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/UIShell/SideNav/SideNavMenu.svelte b/src/UIShell/SideNav/SideNavMenu.svelte
index de3cbe23..dc239ca6 100644
--- a/src/UIShell/SideNav/SideNavMenu.svelte
+++ b/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}
diff --git a/src/UIShell/SideNav/SideNavMenuItem.svelte b/src/UIShell/SideNav/SideNavMenuItem.svelte
index 9c38fbfc..8f6ebcfa 100644
--- a/src/UIShell/SideNav/SideNavMenuItem.svelte
+++ b/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}"

From 17d97d1dbf118188c57a1c33d4dd310883e8e064 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 14 Sep 2020 06:54:35 -0700
Subject: [PATCH 4/7] fix(radio-tile): move keydown, tabindex to input element

---
 src/Tile/RadioTile.svelte  | 18 +++++++++---------
 src/Tile/Tile.Story.svelte |  5 ++++-
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/Tile/RadioTile.svelte b/src/Tile/RadioTile.svelte
index 8f09c51d..e2438b32 100644
--- a/src/Tile/RadioTile.svelte
+++ b/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}"
diff --git a/src/Tile/Tile.Story.svelte b/src/Tile/Tile.Story.svelte
index dc236fe7..3de43a8d 100644
--- a/src/Tile/Tile.Story.svelte
+++ b/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}

From 192f98dc5deb68013c2eecfffdf60f6c59e2c688 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 14 Sep 2020 07:16:01 -0700
Subject: [PATCH 5/7] fix(pagination): use correct size icons for buttons

- use 16 instead of 24 variant for Caret icons
- use icon ghost Button
---
 src/Pagination/Pagination.svelte | 43 ++++++++++++++++----------------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/Pagination/Pagination.svelte b/src/Pagination/Pagination.svelte
index f23f8659..83af6f2e 100644
--- a/src/Pagination/Pagination.svelte
+++ b/src/Pagination/Pagination.svelte
@@ -91,10 +91,11 @@
    */
   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 { Select, SelectItem } from "../Select";
   import { afterUpdate, 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";
 
   const dispatch = createEventDispatcher();
 
@@ -154,29 +155,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>

From 01389100771bb130d3451f0c1331744de9fa140c Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 14 Sep 2020 07:20:48 -0700
Subject: [PATCH 6/7] fix(pagination): convert page variable to number type

The Select component coerces the page value into a string, which affects other components.
---
 src/Pagination/Pagination.Story.svelte |  8 +++++++-
 src/Pagination/Pagination.svelte       | 11 ++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/Pagination/Pagination.Story.svelte b/src/Pagination/Pagination.Story.svelte
index 217ffd12..acbf7fb5 100644
--- a/src/Pagination/Pagination.Story.svelte
+++ b/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>
diff --git a/src/Pagination/Pagination.svelte b/src/Pagination/Pagination.svelte
index 83af6f2e..3e9145bb 100644
--- a/src/Pagination/Pagination.svelte
+++ b/src/Pagination/Pagination.svelte
@@ -100,9 +100,18 @@
   const dispatch = createEventDispatcher();
 
   afterUpdate(() => {
-    dispatch("update", { pageSize: parseInt(pageSize), page: parseInt(page) });
+    dispatch("update", { pageSize, page });
   });
 
+  $: {
+    if (typeof page !== "number") {
+      page = Number(page);
+    }
+
+    if (typeof pageSize !== "number") {
+      pageSize = Number(pageSize);
+    }
+  }
   $: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
   $: selectItems = Array.from({ length: totalPages }, (_, i) => i);
   $: backButtonDisabled = disabled || page === 1;

From 458d1b52c87ac073d138d91dfa5cc095baacd0b5 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 14 Sep 2020 07:23:02 -0700
Subject: [PATCH 7/7] fix(pagination): remove update event from afterUpdate
 cycle

It should only be called when page, pageSize values change after mounting.
---
 src/Pagination/Pagination.svelte | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/Pagination/Pagination.svelte b/src/Pagination/Pagination.svelte
index 3e9145bb..36270087 100644
--- a/src/Pagination/Pagination.svelte
+++ b/src/Pagination/Pagination.svelte
@@ -91,7 +91,7 @@
    */
   export let id = "ccs-" + Math.random().toString(36);
 
-  import { afterUpdate, createEventDispatcher } from "svelte";
+  import { createEventDispatcher } from "svelte";
   import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16";
   import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16";
   import { Button } from "../Button";
@@ -99,10 +99,6 @@
 
   const dispatch = createEventDispatcher();
 
-  afterUpdate(() => {
-    dispatch("update", { pageSize, page });
-  });
-
   $: {
     if (typeof page !== "number") {
       page = Number(page);
@@ -111,6 +107,8 @@
     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);