fix(iconbutton): rename selectedAriaLabel to ariaLabelSelected along …

…with attribute PiperOrigin-RevId: 557887242
material-components · Aug 17, 2023 · 2bbab09 · 2bbab09
1 parent 5d0cbf5
commit 2bbab09
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 17 deletions.
diff --git a/docs/components/icon-button.md b/docs/components/icon-button.md
@@ -180,13 +180,13 @@ attribute to buttons whose labels need a more descriptive label.
 
 ### Toggle
 
-Add a `selected-aria-label` attribute to toggle buttons whose labels need a more
+Add a `aria-label-selected` attribute to toggle buttons whose labels need a more
 descriptive label when selected.
 
 ```html
 <md-icon-button toggle
   aria-label="Unselected"
-  selected-aria-label="Selected">
+  aria-label-selected="Selected">
   <md-icon>close</md-icon>
   <md-icon slot="selectedIcon">check</md-icon>
 </md-icon-button>

diff --git a/iconbutton/demo/demo.ts b/iconbutton/demo/demo.ts
@@ -28,7 +28,7 @@ const collection =
         defaultValue: '_blank'
       }),
       new Knob('selectedIcon', {ui: textInput(), defaultValue: 'star'}),
-      new Knob('selectedAriaLabel', {ui: textInput(), defaultValue: ''}),
+      new Knob('ariaLabelSelected', {ui: textInput(), defaultValue: ''}),
       new Knob('selected', {ui: boolInput(), defaultValue: false}),
       new Knob('disabled', {ui: boolInput(), defaultValue: false}),
       new Knob('flipIconInRtl', {ui: boolInput(), defaultValue: false}),

diff --git a/iconbutton/demo/stories.ts b/iconbutton/demo/stories.ts
@@ -22,7 +22,7 @@ export interface StoryKnobs {
   href: string;
   target: '_blank'|'_parent'|'_self'|'_top'|'';
   selectedIcon: string;
-  selectedAriaLabel: string;
+  ariaLabelSelected: string;
   selected: boolean;
   disabled: boolean;
   flipIconInRtl: boolean;
@@ -65,15 +65,15 @@ const toggle: MaterialStoryInit<StoryKnobs> = {
       icon,
       ariaLabel,
       selectedIcon,
-      selectedAriaLabel,
+      ariaLabelSelected,
       selected,
       disabled,
     } = knobs;
     return html`
       <md-icon-button
           toggle
           .disabled=${disabled}
-          .selectedAriaLabel=${selectedAriaLabel}
+          .ariaLabelSelected=${ariaLabelSelected}
           .ariaLabel=${ariaLabel}
           .selected=${selected}>
           ${
@@ -121,15 +121,15 @@ const outlinedToggle: MaterialStoryInit<StoryKnobs> = {
       icon,
       ariaLabel,
       selectedIcon,
-      selectedAriaLabel,
+      ariaLabelSelected,
       selected,
       disabled,
     } = knobs;
     return html`
       <md-outlined-icon-button
           toggle
           .disabled=${disabled}
-          .selectedAriaLabel=${selectedAriaLabel}
+          .ariaLabelSelected=${ariaLabelSelected}
           .ariaLabel=${ariaLabel}
           .selected=${selected}>
           ${
@@ -177,15 +177,15 @@ const filledToggle: MaterialStoryInit<StoryKnobs> = {
       icon,
       ariaLabel,
       selectedIcon,
-      selectedAriaLabel,
+      ariaLabelSelected,
       selected,
       disabled,
     } = knobs;
     return html`
       <md-filled-icon-button
           toggle
           .disabled=${disabled}
-          .selectedAriaLabel=${selectedAriaLabel}
+          .ariaLabelSelected=${ariaLabelSelected}
           .ariaLabel=${ariaLabel}
           .selected=${selected}>
           ${
@@ -233,15 +233,15 @@ const tonalToggle: MaterialStoryInit<StoryKnobs> = {
       icon,
       ariaLabel,
       selectedIcon,
-      selectedAriaLabel,
+      ariaLabelSelected,
       selected,
       disabled,
     } = knobs;
     return html`
       <md-filled-tonal-icon-button
           toggle
           .disabled=${disabled}
-          .selectedAriaLabel=${selectedAriaLabel}
+          .ariaLabelSelected=${ariaLabelSelected}
           .ariaLabel=${ariaLabel}
           .selected=${selected}>
         ${

diff --git a/iconbutton/icon-button_test.ts b/iconbutton/icon-button_test.ts
@@ -145,7 +145,7 @@ describe('icon button tests', () => {
 
     it('button with toggled aria label toggles aria label', async () => {
       const {element} = await setUpTest('toggle');
-      element.selectedAriaLabel = 'aria label on';
+      element.ariaLabelSelected = 'aria label on';
       element.ariaLabel = 'aria label off';
       await element.updateComplete;
 

diff --git a/iconbutton/internal/icon-button.ts b/iconbutton/internal/icon-button.ts
@@ -60,8 +60,8 @@ export class IconButton extends LitElement implements FormSubmitter {
   /**
    * The `aria-label` of the button when the button is toggleable and selected.
    */
-  @property({attribute: 'selected-aria-label', reflect: true})
-  selectedAriaLabel!: string;
+  @property({attribute: 'aria-label-selected', reflect: true})
+  ariaLabelSelected = '';
 
   /**
    * When true, the button will toggle between selected and unselected
@@ -97,12 +97,12 @@ export class IconButton extends LitElement implements FormSubmitter {
     const tag = this.href ? literal`div` : literal`button`;
     // Needed for closure conformance
     const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;
-    const hasToggledAriaLabel = ariaLabel && this.selectedAriaLabel;
+    const hasToggledAriaLabel = ariaLabel && this.ariaLabelSelected;
     const ariaPressedValue = hasToggledAriaLabel ? nothing : this.selected;
     let ariaLabelValue: string|null|typeof nothing = nothing;
     if (!this.href) {
       ariaLabelValue = (hasToggledAriaLabel && this.selected) ?
-          this.selectedAriaLabel :
+          this.ariaLabelSelected :
           ariaLabel;
     }
     return staticHtml`<${tag}