mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
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
This commit is contained in:
parent
74e883a47c
commit
48012b9ca0
3 changed files with 11 additions and 7 deletions
|
@ -43,7 +43,6 @@
|
||||||
<Search
|
<Search
|
||||||
size="sm"
|
size="sm"
|
||||||
tabindex="{expanded ? tabindex : '-1'}"
|
tabindex="{expanded ? tabindex : '-1'}"
|
||||||
aria-hidden="{!expanded}"
|
|
||||||
{...$$restProps}
|
{...$$restProps}
|
||||||
bind:ref
|
bind:ref
|
||||||
bind:value
|
bind:value
|
||||||
|
|
|
@ -95,6 +95,7 @@
|
||||||
value = nextValue;
|
value = nextValue;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$: labelId = `label-${id}`;
|
||||||
$: range = max - min;
|
$: range = max - min;
|
||||||
$: left = ((value - min) / range) * 100;
|
$: left = ((value - min) / range) * 100;
|
||||||
$: {
|
$: {
|
||||||
|
@ -132,6 +133,7 @@
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
for="{id}"
|
for="{id}"
|
||||||
|
id="{labelId}"
|
||||||
class:bx--label="{true}"
|
class:bx--label="{true}"
|
||||||
class:bx--label--disabled="{disabled}"
|
class:bx--label--disabled="{disabled}"
|
||||||
>
|
>
|
||||||
|
@ -160,6 +162,7 @@
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
class:bx--slider__thumb="{true}"
|
class:bx--slider__thumb="{true}"
|
||||||
style="left: {left}%"
|
style="left: {left}%"
|
||||||
|
aria-labelledby="{labelId}"
|
||||||
aria-valuemax="{max}"
|
aria-valuemax="{max}"
|
||||||
aria-valuemin="{min}"
|
aria-valuemin="{min}"
|
||||||
aria-valuenow="{value}"
|
aria-valuenow="{value}"
|
||||||
|
|
|
@ -1,17 +1,19 @@
|
||||||
<script>
|
<script>
|
||||||
/**
|
/**
|
||||||
* Specify the ARIA label for the nav
|
* Specify the ARIA label for the nav
|
||||||
|
* @deprecated use "aria-label" instead
|
||||||
* @type {string}
|
* @type {string}
|
||||||
*/
|
*/
|
||||||
export let ariaLabel = undefined;
|
export let ariaLabel = undefined;
|
||||||
|
|
||||||
|
$: props = {
|
||||||
|
"aria-label": ariaLabel || $$props["aria-label"],
|
||||||
|
"aria-labelledby": $$props["aria-labelledby"],
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<nav aria-label="{ariaLabel}" class:bx--header__nav="{true}" {...$$restProps}>
|
<nav {...props} class:bx--header__nav="{true}" {...$$restProps}>
|
||||||
<ul
|
<ul {...props} class:bx--header__menu-bar="{true}">
|
||||||
role="menubar"
|
|
||||||
aria-label="{ariaLabel}"
|
|
||||||
class:bx--header__menu-bar="{true}"
|
|
||||||
>
|
|
||||||
<slot />
|
<slot />
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue