diff --git a/docs/components/button.md b/docs/components/button.md index 2db15a1c2a..98036d9f8e 100644 --- a/docs/components/button.md +++ b/docs/components/button.md @@ -236,6 +236,28 @@ attribute to buttons whose labels need a more descriptive label. Add ``` +### Focusable and disabled + +By default, disabled buttons are not focusable with the keyboard, while +"soft-disabled" buttons are. Some use cases encourage focusability of disabled +toolbar items to increase their discoverability. + +See the +[ARIA guidelines on focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls) +for guidance on when this is recommended. + +```html +
+ Copy + Cut + + Paste +
+``` + ## Elevated button @@ -703,7 +725,6 @@ Token | Default value ## API - ### MdElevatedButton <md-elevated-button> #### Properties @@ -713,6 +734,7 @@ Token | Default value | Property | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. | +| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether the button is "soft-disabled" (disabled but still focusable). | | `href` | `href` | `string` | `''` | The URL that the link button points to. | | `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. | | `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.
_Note:_ Link buttons cannot have trailing icons. | diff --git a/docs/components/icon-button.md b/docs/components/icon-button.md index e0196cdf03..f67cab02bd 100644 --- a/docs/components/icon-button.md +++ b/docs/components/icon-button.md @@ -196,6 +196,34 @@ more descriptive label when selected. ``` +### Focusable and disabled + +By default, disabled icon buttons are not focusable with the keyboard, while +"soft-disabled" icon buttons are. Some use cases encourage focusability of +disabled toolbar items to increase their discoverability. + +See the +[ARIA guidelines on focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls) +for guidance on when this is recommended. + +```html +
+ + copy + + + cut + + + + paste + +
+``` + ## Icon Button Standard icon buttons do not have a background or outline, and have the lowest @@ -319,7 +347,7 @@ Token | Default value ### Filled Icon Button tokens Token | Default value --------------------------------------------------- | ------------------------ +-------------------------------------------------- | ------------- `--md-filled-icon-button-selected-container-color` | `--md-sys-color-primary` `--md-filled-icon-button-container-shape` | `--md-sys-shape-corner-full` `--md-filled-icon-button-container-width` | `40px` @@ -391,7 +419,7 @@ Token | Default value ### Outlined Icon Button tokens Token | Default value --------------------------------------------- | ------------------------ +-------------------------------------------- | ---------------------------- `--md-outlined-icon-button-outline-color` | `--md-sys-color-outline` `--md-outlined-icon-button-outline-width` | `1px` `--md-outlined-icon-button-container-shape` | `--md-sys-shape-corner-full` @@ -428,7 +456,6 @@ Token | Default value ## API - ### MdIconButton <md-icon-button> #### Properties @@ -472,6 +499,7 @@ Token | Default value | Property | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | `disabled` | `disabled` | `boolean` | `false` | Disables the icon button and makes it non-interactive. | +| `softDisabled` | `soft-disabled` | `boolean` | `false` | "Soft-disables" the icon button (disabled but still focusable). | | `flipIconInRtl` | `flip-icon-in-rtl` | `boolean` | `false` | Flips the icon if it is in an RTL context at startup. | | `href` | `href` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. | | `target` | `target` | `string` | `''` | Sets the underlying `HTMLAnchorElement`'s `target` attribute. |