From 2bbab09a509595e50b3d4684374b3210f4b44c42 Mon Sep 17 00:00:00 2001
From: Andrew Jakubowicz <ajakubowicz@google.com>
Date: Thu, 17 Aug 2023 11:36:30 -0700
Subject: [PATCH] fix(iconbutton): rename selectedAriaLabel to
 ariaLabelSelected along with attribute

PiperOrigin-RevId: 557887242
---
 docs/components/icon-button.md     |  4 ++--
 iconbutton/demo/demo.ts            |  2 +-
 iconbutton/demo/stories.ts         | 18 +++++++++---------
 iconbutton/icon-button_test.ts     |  2 +-
 iconbutton/internal/icon-button.ts |  8 ++++----
 5 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/docs/components/icon-button.md b/docs/components/icon-button.md
index e4d4ab281e..8428c8fa11 100644
--- 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
index c1c8080af6..2f96accbe9 100644
--- 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
index 36b743af80..e88edd7015 100644
--- 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,7 +65,7 @@ const toggle: MaterialStoryInit<StoryKnobs> = {
       icon,
       ariaLabel,
       selectedIcon,
-      selectedAriaLabel,
+      ariaLabelSelected,
       selected,
       disabled,
     } = knobs;
@@ -73,7 +73,7 @@ const toggle: MaterialStoryInit<StoryKnobs> = {
       <md-icon-button
           toggle
           .disabled=${disabled}
-          .selectedAriaLabel=${selectedAriaLabel}
+          .ariaLabelSelected=${ariaLabelSelected}
           .ariaLabel=${ariaLabel}
           .selected=${selected}>
           ${
@@ -121,7 +121,7 @@ const outlinedToggle: MaterialStoryInit<StoryKnobs> = {
       icon,
       ariaLabel,
       selectedIcon,
-      selectedAriaLabel,
+      ariaLabelSelected,
       selected,
       disabled,
     } = knobs;
@@ -129,7 +129,7 @@ const outlinedToggle: MaterialStoryInit<StoryKnobs> = {
       <md-outlined-icon-button
           toggle
           .disabled=${disabled}
-          .selectedAriaLabel=${selectedAriaLabel}
+          .ariaLabelSelected=${ariaLabelSelected}
           .ariaLabel=${ariaLabel}
           .selected=${selected}>
           ${
@@ -177,7 +177,7 @@ const filledToggle: MaterialStoryInit<StoryKnobs> = {
       icon,
       ariaLabel,
       selectedIcon,
-      selectedAriaLabel,
+      ariaLabelSelected,
       selected,
       disabled,
     } = knobs;
@@ -185,7 +185,7 @@ const filledToggle: MaterialStoryInit<StoryKnobs> = {
       <md-filled-icon-button
           toggle
           .disabled=${disabled}
-          .selectedAriaLabel=${selectedAriaLabel}
+          .ariaLabelSelected=${ariaLabelSelected}
           .ariaLabel=${ariaLabel}
           .selected=${selected}>
           ${
@@ -233,7 +233,7 @@ const tonalToggle: MaterialStoryInit<StoryKnobs> = {
       icon,
       ariaLabel,
       selectedIcon,
-      selectedAriaLabel,
+      ariaLabelSelected,
       selected,
       disabled,
     } = knobs;
@@ -241,7 +241,7 @@ const tonalToggle: MaterialStoryInit<StoryKnobs> = {
       <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
index b8a34c2061..a268f5f213 100644
--- 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
index b10913d090..07369d1b09 100644
--- 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}