feat(iconbutton): add soft-disabled attribute for focusable disable…

…d icon buttons PiperOrigin-RevId: 651858380
material-components · Jul 12, 2024 · 281c092 · 281c092
1 parent 48124ba
commit 281c092
Show file tree

Hide file tree

Showing 9 changed files with 160 additions and 46 deletions.
diff --git a/iconbutton/demo/demo.ts b/iconbutton/demo/demo.ts
@@ -23,6 +23,7 @@ const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
     new Knob('disabled', {ui: boolInput(), defaultValue: false}),
     new Knob('icon', {ui: textInput(), defaultValue: ''}),
     new Knob('selectedIcon', {ui: textInput(), defaultValue: ''}),
+    new Knob('softDisabled', {ui: boolInput(), defaultValue: false}),
   ],
 );
 

diff --git a/iconbutton/demo/stories.ts b/iconbutton/demo/stories.ts
@@ -19,6 +19,7 @@ export interface StoryKnobs {
   icon: string;
   selectedIcon: string;
   disabled: boolean;
+  softDisabled: boolean;
 }
 
 const styles = [
@@ -44,26 +45,35 @@ const styles = [
 const buttons: MaterialStoryInit<StoryKnobs> = {
   name: 'Icon button variants',
   styles,
-  render({icon, disabled}) {
+  render({icon, disabled, softDisabled}) {
     return html`
       <div class="row md-typescale-body-medium">
         <div class="column">
           <p>Standard</p>
-          <md-icon-button aria-label="Open settings" ?disabled=${disabled}>
+          <md-icon-button
+            aria-label="Open settings"
+            ?disabled=${disabled}
+            ?soft-disabled=${softDisabled}>
             <md-icon>${icon || 'settings'}</md-icon>
           </md-icon-button>
         </div>
 
         <div class="column">
           <p>Outlined</p>
-          <md-outlined-icon-button aria-label="Search" ?disabled=${disabled}>
+          <md-outlined-icon-button
+            aria-label="Search"
+            ?disabled=${disabled}
+            ?soft-disabled=${softDisabled}>
             <md-icon>${icon || 'search'}</md-icon>
           </md-outlined-icon-button>
         </div>
 
         <div class="column">
           <p>Filled</p>
-          <md-filled-icon-button aria-label="Complete" ?disabled=${disabled}>
+          <md-filled-icon-button
+            aria-label="Complete"
+            ?disabled=${disabled}
+            ?soft-disabled=${softDisabled}>
             <md-icon>${icon || 'done'}</md-icon>
           </md-filled-icon-button>
         </div>
@@ -72,7 +82,8 @@ const buttons: MaterialStoryInit<StoryKnobs> = {
           <p>Filled tonal</p>
           <md-filled-tonal-icon-button
             aria-label="Add new"
-            ?disabled=${disabled}>
+            ?disabled=${disabled}
+            ?soft-disabled=${softDisabled}>
             <md-icon>${icon || 'add'}</md-icon>
           </md-filled-tonal-icon-button>
         </div>
@@ -84,7 +95,7 @@ const buttons: MaterialStoryInit<StoryKnobs> = {
 const toggles: MaterialStoryInit<StoryKnobs> = {
   name: 'Toggle icon buttons',
   styles,
-  render({icon, selectedIcon, disabled}) {
+  render({icon, selectedIcon, disabled, softDisabled}) {
     return html`
       <div class="row">
         <div class="column">
@@ -93,7 +104,8 @@ const toggles: MaterialStoryInit<StoryKnobs> = {
             aria-label="Show password"
             aria-label-selected="Hide password"
             toggle
-            ?disabled=${disabled}>
+            ?disabled=${disabled}
+            ?soft-disabled=${softDisabled}>
             <md-icon>${icon || 'visibility'}</md-icon>
             <md-icon slot="selected">
               ${selectedIcon || 'visibility_off'}
@@ -107,7 +119,8 @@ const toggles: MaterialStoryInit<StoryKnobs> = {
             aria-label="Play"
             aria-label-selected="Pause"
             toggle
-            ?disabled=${disabled}>
+            ?disabled=${disabled}
+            ?soft-disabled=${softDisabled}>
             <md-icon>${icon || 'play_arrow'}</md-icon>
             <md-icon slot="selected">${selectedIcon || 'pause'}</md-icon>
           </md-outlined-icon-button>
@@ -119,7 +132,8 @@ const toggles: MaterialStoryInit<StoryKnobs> = {
             aria-label="Show more"
             aria-label-selected="Show less"
             toggle
-            ?disabled=${disabled}>
+            ?disabled=${disabled}
+            ?soft-disabled=${softDisabled}>
             <md-icon>${icon || 'expand_more'}</md-icon>
             <md-icon slot="selected">${selectedIcon || 'expand_less'}</md-icon>
           </md-filled-icon-button>
@@ -131,7 +145,8 @@ const toggles: MaterialStoryInit<StoryKnobs> = {
             aria-label="Open menu"
             aria-label-selected="Close menu"
             toggle
-            ?disabled=${disabled}>
+            ?disabled=${disabled}
+            ?soft-disabled=${softDisabled}>
             <md-icon>${icon || 'menu'}</md-icon>
             <md-icon slot="selected">${selectedIcon || 'close'}</md-icon>
           </md-filled-tonal-icon-button>

diff --git a/iconbutton/icon-button_test.ts b/iconbutton/icon-button_test.ts
@@ -61,6 +61,66 @@ describe('icon button tests', () => {
       },
     );
 
+    it('should not be focusable when disabled', async () => {
+      // Arrange
+      const {element} = await setUpTest('button');
+      element.disabled = true;
+      await element.updateComplete;
+
+      // Act
+      element.focus();
+
+      // Assert
+      expect(document.activeElement)
+        .withContext('disabled button should not be focused')
+        .not.toBe(element);
+    });
+
+    it('should be focusable when soft-disabled', async () => {
+      // Arrange
+      const {element} = await setUpTest('button');
+      element.softDisabled = true;
+      await element.updateComplete;
+
+      // Act
+      element.focus();
+
+      // Assert
+      expect(document.activeElement)
+        .withContext('soft-disabled button should be focused')
+        .toBe(element);
+    });
+
+    it('should not be clickable when disabled', async () => {
+      // Arrange
+      const clickListener = jasmine.createSpy('clickListener');
+      const {element} = await setUpTest('button');
+      element.disabled = true;
+      element.addEventListener('click', clickListener);
+      await element.updateComplete;
+
+      // Act
+      element.click();
+
+      // Assert
+      expect(clickListener).not.toHaveBeenCalled();
+    });
+
+    it('should not be clickable when soft-disabled', async () => {
+      // Arrange
+      const clickListener = jasmine.createSpy('clickListener');
+      const {element} = await setUpTest('button');
+      element.softDisabled = true;
+      element.addEventListener('click', clickListener);
+      await element.updateComplete;
+
+      // Act
+      element.click();
+
+      // Assert
+      expect(clickListener).not.toHaveBeenCalled();
+    });
+
     it(
       'setting `ariaLabel` updates the aria-label attribute on the native ' +
         'button element',

diff --git a/iconbutton/internal/_filled-icon-button.scss b/iconbutton/internal/_filled-icon-button.scss
@@ -53,7 +53,7 @@
       color: var(--_pressed-icon-color);
     }
 
-    &:disabled {
+    &:is(:disabled, [aria-disabled='true']) {
       color: var(--_disabled-icon-color);
     }
 
@@ -77,17 +77,17 @@
     z-index: -1; // place behind content
   }
 
-  .icon-button:disabled::before {
+  .icon-button:is(:disabled, [aria-disabled='true'])::before {
     background-color: var(--_disabled-container-color);
     opacity: var(--_disabled-container-opacity);
   }
 
-  .icon-button:disabled .icon {
+  .icon-button:is(:disabled, [aria-disabled='true']) .icon {
     opacity: var(--_disabled-icon-opacity);
   }
 
   .toggle-filled {
-    &:not(:disabled) {
+    &:not(:disabled, [aria-disabled='true']) {
       color: var(--_toggle-icon-color);
 
       &:hover {
@@ -111,14 +111,14 @@
     );
   }
 
-  .toggle-filled:not(:disabled)::before {
+  .toggle-filled:not(:disabled, [aria-disabled='true'])::before {
     // Note: filled icon buttons have three container colors,
     // "container-color" for regular, then selected/unselected for toggle.
     background-color: var(--_unselected-container-color);
   }
 
   .selected {
-    &:not(:disabled) {
+    &:not(:disabled, [aria-disabled='true']) {
       color: var(--_toggle-selected-icon-color);
 
       &:hover {
@@ -142,7 +142,7 @@
     );
   }
 
-  .selected:not(:disabled)::before {
+  .selected:not(:disabled, [aria-disabled='true'])::before {
     background-color: var(--_selected-container-color);
   }
 }
diff --git a/iconbutton/internal/_filled-tonal-icon-button.scss b/iconbutton/internal/_filled-tonal-icon-button.scss
@@ -12,8 +12,6 @@
 @use '../../tokens';
 // go/keep-sorted end
 
-$_custom-property-prefix: 'filled-tonal-icon-button';
-
 @mixin theme($tokens) {
   $supported-tokens: tokens.$md-comp-filled-tonal-icon-button-supported-tokens;
   @each $token, $value in $tokens {
@@ -55,7 +53,7 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
       color: var(--_pressed-icon-color);
     }
 
-    &:disabled {
+    &:is(:disabled, [aria-disabled='true']) {
       color: var(--_disabled-icon-color);
     }
 
@@ -79,17 +77,17 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
     z-index: -1; // place behind content
   }
 
-  .icon-button:disabled::before {
+  .icon-button:is(:disabled, [aria-disabled='true'])::before {
     background-color: var(--_disabled-container-color);
     opacity: var(--_disabled-container-opacity);
   }
 
-  .icon-button:disabled .icon {
+  .icon-button:is(:disabled, [aria-disabled='true']) .icon {
     opacity: var(--_disabled-icon-opacity);
   }
 
   .toggle-filled-tonal {
-    &:not(:disabled) {
+    &:not(:disabled, [aria-disabled='true']) {
       color: var(--_toggle-icon-color);
 
       &:hover {
@@ -113,14 +111,14 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
     );
   }
 
-  .toggle-filled-tonal:not(:disabled)::before {
+  .toggle-filled-tonal:not(:disabled, [aria-disabled='true'])::before {
     // Note: filled tonal icon buttons have three container colors,
     // "container-color" for regular, then selected/unselected for toggle.
     background-color: var(--_unselected-container-color);
   }
 
   .selected {
-    &:not(:disabled) {
+    &:not(:disabled, [aria-disabled='true']) {
       color: var(--_toggle-selected-icon-color);
 
       &:hover {
@@ -144,7 +142,7 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
     );
   }
 
-  .selected:not(:disabled)::before {
+  .selected:not(:disabled, [aria-disabled='true'])::before {
     background-color: var(--_selected-container-color);
   }
 }
diff --git a/iconbutton/internal/_icon-button.scss b/iconbutton/internal/_icon-button.scss
@@ -91,7 +91,7 @@
       color: var(--_pressed-icon-color);
     }
 
-    &:disabled {
+    &:is(:disabled, [aria-disabled='true']) {
       color: var(--_disabled-icon-color);
     }
   }
@@ -100,12 +100,12 @@
     border-radius: var(--_state-layer-shape);
   }
 
-  .standard:disabled .icon {
+  .standard:is(:disabled, [aria-disabled='true']) {
     opacity: var(--_disabled-icon-opacity);
   }
 
   .selected {
-    &:not(:disabled) {
+    &:not(:disabled, [aria-disabled='true']) {
       color: var(--_selected-icon-color);
 
       &:hover {

diff --git a/iconbutton/internal/_outlined-icon-button.scss b/iconbutton/internal/_outlined-icon-button.scss
@@ -69,7 +69,7 @@
       color: var(--_pressed-icon-color);
     }
 
-    &:disabled {
+    &:is(:disabled, [aria-disabled='true']) {
       color: var(--_disabled-icon-color);
 
       &::before {
@@ -79,7 +79,7 @@
     }
   }
 
-  .outlined:disabled .icon {
+  .outlined:is(:disabled, [aria-disabled='true']) .icon {
     opacity: var(--_disabled-icon-opacity);
   }
 
@@ -103,7 +103,7 @@
 
   // Selected icon button toggle.
   .selected {
-    &:not(:disabled) {
+    &:not(:disabled, [aria-disabled='true']) {
       color: var(--_selected-icon-color);
 
       &:hover {
@@ -129,17 +129,17 @@
     );
   }
 
-  .selected:not(:disabled)::before {
+  .selected:not(:disabled, [aria-disabled='true'])::before {
     background-color: var(--_selected-container-color);
   }
 
-  .selected:disabled::before {
+  .selected:is(:disabled, [aria-disabled='true'])::before {
     background-color: var(--_disabled-selected-container-color);
     opacity: var(--_disabled-selected-container-opacity);
   }
 
   @media (forced-colors: active) {
-    :host([disabled]) {
+    :host(:is([disabled], [soft-disabled])) {
       --_disabled-outline-opacity: 1;
     }
 
@@ -150,7 +150,7 @@
         border-width: var(--_outline-width);
       }
 
-      &:disabled::before {
+      &:is(:disabled, [aria-disabled='true'])::before {
         border-color: GrayText;
         opacity: 1;
       }