From 48012b9ca0ed9011a99da742f70c0d6c2d92968c Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 21 Jan 2021 15:28:34 -0800
Subject: [PATCH] Minor fixes to align with v10.26 (#490)

* fix(data-table): remove aria-hidden prop from ToolbarSearch

* fix(ui-shell): deprecate ariaLabel prop in HeaderNav

- remove menubar role from HeaderNav
- obtain "aria-label" and "aria-labelledby" from $$props

* fix(slider): add label id
---
 src/DataTable/ToolbarSearch.svelte        |  1 -
 src/Slider/Slider.svelte                  |  3 +++
 src/UIShell/GlobalHeader/HeaderNav.svelte | 14 ++++++++------
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/DataTable/ToolbarSearch.svelte b/src/DataTable/ToolbarSearch.svelte
index a34b89b0..c19a5961 100644
--- a/src/DataTable/ToolbarSearch.svelte
+++ b/src/DataTable/ToolbarSearch.svelte
@@ -43,7 +43,6 @@
   <Search
     size="sm"
     tabindex="{expanded ? tabindex : '-1'}"
-    aria-hidden="{!expanded}"
     {...$$restProps}
     bind:ref
     bind:value
diff --git a/src/Slider/Slider.svelte b/src/Slider/Slider.svelte
index e66040e9..091ea54a 100644
--- a/src/Slider/Slider.svelte
+++ b/src/Slider/Slider.svelte
@@ -95,6 +95,7 @@
     value = nextValue;
   }
 
+  $: labelId = `label-${id}`;
   $: range = max - min;
   $: left = ((value - min) / range) * 100;
   $: {
@@ -132,6 +133,7 @@
 >
   <label
     for="{id}"
+    id="{labelId}"
     class:bx--label="{true}"
     class:bx--label--disabled="{disabled}"
   >
@@ -160,6 +162,7 @@
         tabindex="0"
         class:bx--slider__thumb="{true}"
         style="left: {left}%"
+        aria-labelledby="{labelId}"
         aria-valuemax="{max}"
         aria-valuemin="{min}"
         aria-valuenow="{value}"
diff --git a/src/UIShell/GlobalHeader/HeaderNav.svelte b/src/UIShell/GlobalHeader/HeaderNav.svelte
index 85f19fc3..d7dd5e98 100644
--- a/src/UIShell/GlobalHeader/HeaderNav.svelte
+++ b/src/UIShell/GlobalHeader/HeaderNav.svelte
@@ -1,17 +1,19 @@
 <script>
   /**
    * Specify the ARIA label for the nav
+   * @deprecated use "aria-label" instead
    * @type {string}
    */
   export let ariaLabel = undefined;
+
+  $: props = {
+    "aria-label": ariaLabel || $$props["aria-label"],
+    "aria-labelledby": $$props["aria-labelledby"],
+  };
 </script>
 
-<nav aria-label="{ariaLabel}" class:bx--header__nav="{true}" {...$$restProps}>
-  <ul
-    role="menubar"
-    aria-label="{ariaLabel}"
-    class:bx--header__menu-bar="{true}"
-  >
+<nav {...props} class:bx--header__nav="{true}" {...$$restProps}>
+  <ul {...props} class:bx--header__menu-bar="{true}">
     <slot />
   </ul>
 </nav>