mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 19:46:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(header-search): resolve a11y warnings

Browse source
This commit is contained in:
Eric Liu 2022-09-05 07:23:18 -07:00
commit 09f417a28d
1 changed files with 5 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/UIShell/HeaderSearch.svelte
View file

@ -61,10 +61,11 @@
<div bind:this="{refSearch}" role="search" class:active> <div bind:this="{refSearch}" role="search" class:active>
<label for="search-input" id="search-label">Search</label> <label for="search-input" id="search-label">Search</label>
<div role="combobox" aria-expanded="{active}"> <div aria-owns="search-menu" aria-haspopup="menu">
<button <button
type="button" type="button"
aria-label="Search" aria-label="Search"
aria-expanded="{active}"
tabindex="{active ? '-1' : '0'}" tabindex="{active ? '-1' : '0'}"
class:bx--header__action="{true}" class:bx--header__action="{true}"
class:disabled="{active}" class:disabled="{active}"
@ -83,6 +84,8 @@
class:active class:active
{...$$restProps} {...$$restProps}
id="search-input" id="search-input"
aria-autocomplete="list"
aria-controls="search-menu"
aria-activedescendant="{selectedId}" aria-activedescendant="{selectedId}"
bind:value bind:value
on:change on:change
@ -133,7 +136,7 @@
{#if active && results.length > 0} {#if active && results.length > 0}
<ul aria-labelledby="search-label" role="menu" id="search-menu"> <ul aria-labelledby="search-label" role="menu" id="search-menu">
{#each results as result, i} {#each results as result, i}
<li> <li role="none">
<a <a
tabindex="-1" tabindex="-1"
id="search-menuitem-{i}" id="search-menuitem-{i}"