material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-08-16 17:10:22 +03:00
Code Issues Projects Releases Wiki Activity

chore(button): add unique aria labels to buttons with icons

Browse Source 
PiperOrigin-RevId: 602512735
This commit is contained in:
Elizabeth Mitchell 2024-01-29 15:09:43 -08:00 committed by Copybara-Service
parent 6ecda49749
commit e18d913eb3
1 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
button/demo/stories.ts
View File

@ -63,27 +63,37 @@ const buttons: MaterialStoryInit<StoryKnobs> = {
</md-text-button> </md-text-button>
</div> </div>
<div class="row"> <div class="row">
<md-filled-button ?disabled=${disabled}> <md-filled-button
?disabled=${disabled}
aria-label="${label || 'Filled'} button with icon">
<md-icon slot="icon">upload</md-icon> <md-icon slot="icon">upload</md-icon>
${label || 'Filled'} ${label || 'Filled'}
</md-filled-button> </md-filled-button>
<md-outlined-button ?disabled=${disabled}> <md-outlined-button
?disabled=${disabled}
aria-label="${label || 'Outlined'} button with icon">
<md-icon slot="icon">upload</md-icon> <md-icon slot="icon">upload</md-icon>
${label || 'Outlined'} ${label || 'Outlined'}
</md-outlined-button> </md-outlined-button>
<md-elevated-button ?disabled=${disabled}> <md-elevated-button
?disabled=${disabled}
aria-label="${label || 'Elevated'} button with icon">
<md-icon slot="icon">upload</md-icon> <md-icon slot="icon">upload</md-icon>
${label || 'Elevated'} ${label || 'Elevated'}
</md-elevated-button> </md-elevated-button>
<md-filled-tonal-button ?disabled=${disabled}> <md-filled-tonal-button
?disabled=${disabled}
aria-label="${label || 'Tonal'} button with icon">
<md-icon slot="icon">upload</md-icon> <md-icon slot="icon">upload</md-icon>
${label || 'Tonal'} ${label || 'Tonal'}
</md-filled-tonal-button> </md-filled-tonal-button>
<md-text-button ?disabled=${disabled}> <md-text-button
?disabled=${disabled}
aria-label="${label || 'Text'} button with icon">
<md-icon slot="icon">upload</md-icon> <md-icon slot="icon">upload</md-icon>
${label || 'Text'} ${label || 'Text'}
</md-text-button> </md-text-button>
@ -137,6 +147,7 @@ const links: MaterialStoryInit<StoryKnobs> = {
</div> </div>
<div class="row"> <div class="row">
<md-filled-button <md-filled-button
aria-label="${label || 'Filled'} link with trailing icon"
href="https://google.com" href="https://google.com"
target="_blank" target="_blank"
trailing-icon> trailing-icon>
@ -145,6 +156,7 @@ const links: MaterialStoryInit<StoryKnobs> = {
</md-filled-button> </md-filled-button>
<md-outlined-button <md-outlined-button
aria-label="${label || 'Outlined'} link with trailing icon"
href="https://google.com" href="https://google.com"
target="_blank" target="_blank"
trailing-icon> trailing-icon>
@ -153,6 +165,7 @@ const links: MaterialStoryInit<StoryKnobs> = {
</md-outlined-button> </md-outlined-button>
<md-elevated-button <md-elevated-button
aria-label="${label || 'Elevated'} link with trailing icon"
href="https://google.com" href="https://google.com"
target="_blank" target="_blank"
trailing-icon> trailing-icon>
@ -161,6 +174,7 @@ const links: MaterialStoryInit<StoryKnobs> = {
</md-elevated-button> </md-elevated-button>
<md-filled-tonal-button <md-filled-tonal-button
aria-label="${label || 'Tonal'} link with trailing icon"
href="https://google.com" href="https://google.com"
target="_blank" target="_blank"
trailing-icon> trailing-icon>
@ -169,6 +183,7 @@ const links: MaterialStoryInit<StoryKnobs> = {
</md-filled-tonal-button> </md-filled-tonal-button>
<md-text-button <md-text-button
aria-label="${label || 'Text'} link with trailing icon"
href="https://google.com" href="https://google.com"
target="_blank" target="_blank"
trailing-icon> trailing-icon>