kopia lustrzana https://github.com/shoelace-style/shoelace
Improve icon button accessibility
Cory LaViska
rodzic
ee2c18d51c
commit
f32b8b3cfb
|
|
@ -7,9 +7,9 @@ Icons buttons are simple, icon-only buttons that can be used for actions and in
|
|||
For a full list of icons that come bundled with Shoelace, refer to the [icon component](/components/icon).
|
||||
|
||||
```html preview
|
||||
<sl-icon-button name="gear"></sl-icon-button>
|
||||
<sl-icon-button name="sliders"></sl-icon-button>
|
||||
<sl-icon-button name="x"></sl-icon-button>
|
||||
<sl-icon-button name="gear" label="Settings"></sl-icon-button>
|
||||
<sl-icon-button name="sliders" label="Options"></sl-icon-button>
|
||||
<sl-icon-button name="x" label="Close"></sl-icon-button>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
|
@ -19,9 +19,9 @@ For a full list of icons that come bundled with Shoelace, refer to the [icon com
|
|||
Icon buttons inherit their parent element's `font-size`.
|
||||
|
||||
```html preview
|
||||
<sl-icon-button name="pencil" style="font-size: 1.5rem;"></sl-icon-button>
|
||||
<sl-icon-button name="pencil" style="font-size: 2rem;"></sl-icon-button>
|
||||
<sl-icon-button name="pencil" style="font-size: 2.5rem;"></sl-icon-button>
|
||||
<sl-icon-button name="pencil" label="Edit" style="font-size: 1.5rem;"></sl-icon-button>
|
||||
<sl-icon-button name="pencil" label="Edit" style="font-size: 2rem;"></sl-icon-button>
|
||||
<sl-icon-button name="pencil" label="Edit" style="font-size: 2.5rem;"></sl-icon-button>
|
||||
```
|
||||
|
||||
### Colors
|
||||
|
|
@ -30,9 +30,9 @@ Icon buttons are designed to have a uniform appearance, so their color is not in
|
|||
|
||||
```html preview
|
||||
<div class="icon-button-color">
|
||||
<sl-icon-button name="type-bold"></sl-icon-button>
|
||||
<sl-icon-button name="type-italic"></sl-icon-button>
|
||||
<sl-icon-button name="type-underline"></sl-icon-button>
|
||||
<sl-icon-button name="type-bold" label="Bold"></sl-icon-button>
|
||||
<sl-icon-button name="type-italic" label="Italic"></sl-icon-button>
|
||||
<sl-icon-button name="type-underline" label="Underline"></sl-icon-button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
@ -57,13 +57,13 @@ Wrap a tooltip around an icon button to provide contextual information to the us
|
|||
|
||||
```html preview
|
||||
<sl-tooltip content="Settings">
|
||||
<sl-icon-button name="gear"></sl-icon-button>
|
||||
<sl-icon-button name="gear" label="Settings"></sl-icon-button>
|
||||
</sl-tooltip>
|
||||
```
|
||||
|
||||
### Disabled
|
||||
```html preview
|
||||
<sl-icon-button name="gear" disabled></sl-icon-button>
|
||||
<sl-icon-button name="gear" label="Settings" disabled></sl-icon-button>
|
||||
```
|
||||
|
||||
[component-metadata:sl-icon-button]
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
|
|||
- Fixed a bug where `disabled` could be set when buttons are rendered as links
|
||||
- Fixed a bug where hoisted dropdowns would render in the wrong position when place inside an `sl-dialog`
|
||||
- Fixed a bug where boolean aria attributes didn't explicitly set `true|false` string values in the DOM
|
||||
- Improved `sl-icon-button` accessibility by encouraging proper use of `label` and hiding the internal icon from screen readers
|
||||
- Improved `sl-dropdown` accessibility by attaching `aria-haspopup` and `aria-expanded` to the slotted trigger
|
||||
- Removed `console.log` from modal utility
|
||||
- 🚨 BREAKING CHANGE: Refactored `sl-menu` and `sl-menu-item` to improve accessibility by using proper focus states
|
||||
|
|
|
|||
|
|
@ -493,7 +493,7 @@ export namespace Components {
|
|||
*/
|
||||
"disabled": boolean;
|
||||
/**
|
||||
* An alternative description to use for accessibility. If omitted, the name or src will be used to generate it.
|
||||
* A description that gets read by screen readers and other assistive devices. For optimal acessibility, you should always include a label that describes what the icon button does.
|
||||
*/
|
||||
"label": string;
|
||||
/**
|
||||
|
|
@ -2006,7 +2006,7 @@ declare namespace LocalJSX {
|
|||
*/
|
||||
"disabled"?: boolean;
|
||||
/**
|
||||
* An alternative description to use for accessibility. If omitted, the name or src will be used to generate it.
|
||||
* A description that gets read by screen readers and other assistive devices. For optimal acessibility, you should always include a label that describes what the icon button does.
|
||||
*/
|
||||
"label"?: string;
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -25,7 +25,10 @@ export class IconButton {
|
|||
/** An external URL of an SVG file. */
|
||||
@Prop({ reflect: true }) src: string;
|
||||
|
||||
/** An alternative description to use for accessibility. If omitted, the name or src will be used to generate it. */
|
||||
/**
|
||||
* A description that gets read by screen readers and other assistive devices. For optimal acessibility, you should
|
||||
* always include a label that describes what the icon button does.
|
||||
*/
|
||||
@Prop({ reflect: true }) label: string;
|
||||
|
||||
/** Set to true to disable the button. */
|
||||
|
|
@ -49,8 +52,9 @@ export class IconButton {
|
|||
'icon-button--disabled': this.disabled
|
||||
}}
|
||||
type="button"
|
||||
aria-label={this.label}
|
||||
>
|
||||
<sl-icon library={this.library} name={this.name} src={this.src} label={this.label} />
|
||||
<sl-icon library={this.library} name={this.name} src={this.src} aria-hidden="true" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue