diff --git a/1st-gen/packages/button/clear-button.md b/1st-gen/packages/button/clear-button.md index 722e4a3651..ae5d6dd54e 100644 --- a/1st-gen/packages/button/clear-button.md +++ b/1st-gen/packages/button/clear-button.md @@ -25,34 +25,21 @@ import { ClearButton } from '@spectrum-web-components/button'; ### Anatomy -The clear button is a button with only close icon. +The clear button is a button with only a close icon. ```html -Reset + ``` #### Label -The label for an `` element can be set via it's default slot or with the `label` attribute. With either method, the label will not be visible but still read by screen readers. - - -Default slot - - -```html demo -Clear -``` - - -Label attribute - +An accessible label for an `` must be provided using the `label` attribute. This sets the `aria-label` for screen readers. Unlike other button types, the clear button only displays an icon and does not render slot content, so the `label` attribute is the only way to provide an accessible name. ```html demo -Clear + ``` - - +The `label` attribute is required and will be set as the `aria-label` on the element. ### Options @@ -63,7 +50,7 @@ The label for an `` element can be set via it's default slot or ```html demo -Small + ``` @@ -71,7 +58,7 @@ The label for an `` element can be set via it's default slot or ```html demo -Medium + ``` @@ -79,7 +66,7 @@ The label for an `` element can be set via it's default slot or ```html demo -Large + ``` @@ -87,7 +74,7 @@ The label for an `` element can be set via it's default slot or ```html demo -Extra Large + ``` @@ -119,8 +106,8 @@ While disabled, the `` element will not respond to click events ```html - Normal - Disabled + Normal + Disabled ``` @@ -132,9 +119,10 @@ Events handlers for clicks and other user actions can be registered on a `` as one would on a standard HTML `