mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(modal): remove close button title attribute, add aria-hidden to icons (#1308)

Browse source 
* fix(modal): close button should not have a title

* fix(modal): close icon should not have aria-label

* fix(modal): close button icons should have `aria-hidden="true"
This commit is contained in:
metonym 2022-05-18 19:00:21 -07:00 • committed by GitHub
commit cae1f1939e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/ComposedModal/ModalHeader.svelte
View file

@ -50,13 +50,16 @@
<slot /> <slot />
<button <button
type="button" type="button"
title="{iconDescription}"
aria-label="{iconDescription}" aria-label="{iconDescription}"
class:bx--modal-close="{true}" class:bx--modal-close="{true}"
class="{closeClass}" class="{closeClass}"
on:click on:click
on:click="{closeModal}" on:click="{closeModal}"
> >
<Close size="{20}" class="bx--modal-close__icon {closeIconClass}" /> <Close
size="{20}"
class="bx--modal-close__icon {closeIconClass}"
aria-hidden="true"
/>
</button> </button>
</div> </div>

14
src/Modal/Modal.svelte
View file

@ -222,17 +222,12 @@
bind:this="{buttonRef}" bind:this="{buttonRef}"
type="button" type="button"
aria-label="{iconDescription}" aria-label="{iconDescription}"
title="{iconDescription}"
class:bx--modal-close="{true}" class:bx--modal-close="{true}"
on:click="{() => { on:click="{() => {
open = false; open = false;
}}" }}"
> >
<Close <Close size="{20}" class="bx--modal-close__icon" aria-hidden="true" />
size="{20}"
aria-label="{iconDescription}"
class="bx--modal-close__icon"
/>
</button> </button>
{/if} {/if}
{#if modalLabel} {#if modalLabel}
@ -248,17 +243,12 @@
bind:this="{buttonRef}" bind:this="{buttonRef}"
type="button" type="button"
aria-label="{iconDescription}" aria-label="{iconDescription}"
title="{iconDescription}"
class:bx--modal-close="{true}" class:bx--modal-close="{true}"
on:click="{() => { on:click="{() => {
open = false; open = false;
}}" }}"
> >
<Close <Close size="{20}" class="bx--modal-close__icon" aria-hidden="true" />
size="{20}"
aria-label="{iconDescription}"
class="bx--modal-close__icon"
/>
</button> </button>
{/if} {/if}
</div> </div>