mirror of
https://github.com/material-components/material-web.git
synced 2024-08-16 17:10:22 +03:00
chore(button): add unique aria labels to buttons with icons
PiperOrigin-RevId: 602512735
This commit is contained in:
parent
6ecda49749
commit
e18d913eb3
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user