Merge pull request #5787 from material-components:disabled-link-support

PiperOrigin-RevId: 742326684

Author: copybara-github

button/demo/stories.ts

@@ -120,39 +120,49 @@ const buttons: MaterialStoryInit<StoryKnobs> = {
 const links: MaterialStoryInit<StoryKnobs> = {
   name: 'Links',
   styles,
-  render({label}) {
+  render({label, disabled, softDisabled}) {
     return html`
       <div class="column">
         <div class="row">
           <md-filled-button
+            ?disabled=${disabled}
+            ?soft-disabled=${softDisabled}
             href="https://google.com"
             target="_blank"
             trailing-icon>
             ${label || 'Filled'}
           </md-filled-button>
 
           <md-outlined-button
+            ?disabled=${disabled}
+            ?soft-disabled=${softDisabled}
             href="https://google.com"
             target="_blank"
             trailing-icon>
             ${label || 'Outlined'}
           </md-outlined-button>
 
           <md-elevated-button
+            ?disabled=${disabled}
+            ?soft-disabled=${softDisabled}
             href="https://google.com"
             target="_blank"
             trailing-icon>
             ${label || 'Elevated'}
           </md-elevated-button>
 
           <md-filled-tonal-button
+            ?disabled=${disabled}
+            ?soft-disabled=${softDisabled}
             href="https://google.com"
             target="_blank"
             trailing-icon>
             ${label || 'Tonal'}
           </md-filled-tonal-button>
 
           <md-text-button
+            ?disabled=${disabled}
+            ?soft-disabled=${softDisabled}
             href="https://google.com"
             target="_blank"
             trailing-icon>
@@ -162,6 +172,8 @@ const links: MaterialStoryInit<StoryKnobs> = {
         <div class="row">
           <md-filled-button
             aria-label="${label || 'Filled'} link with trailing icon"
+            ?disabled=${disabled}
+            ?soft-disabled=${softDisabled}
             href="https://google.com"
             target="_blank"
             trailing-icon>
@@ -171,6 +183,8 @@ const links: MaterialStoryInit<StoryKnobs> = {
 
           <md-outlined-button
             aria-label="${label || 'Outlined'} link with trailing icon"
+            ?disabled=${disabled}
+            ?soft-disabled=${softDisabled}
             href="https://google.com"
             target="_blank"
             trailing-icon>
@@ -180,6 +194,8 @@ const links: MaterialStoryInit<StoryKnobs> = {
 
           <md-elevated-button
             aria-label="${label || 'Elevated'} link with trailing icon"
+            ?disabled=${disabled}
+            ?soft-disabled=${softDisabled}
             href="https://google.com"
             target="_blank"
             trailing-icon>
@@ -189,6 +205,8 @@ const links: MaterialStoryInit<StoryKnobs> = {
 
           <md-filled-tonal-button
             aria-label="${label || 'Tonal'} link with trailing icon"
+            ?disabled=${disabled}
+            ?soft-disabled=${softDisabled}
             href="https://google.com"
             target="_blank"
             trailing-icon>
@@ -198,6 +216,8 @@ const links: MaterialStoryInit<StoryKnobs> = {
 
           <md-text-button
             aria-label="${label || 'Text'} link with trailing icon"
+            ?disabled=${disabled}
+            ?soft-disabled=${softDisabled}
             href="https://google.com"
             target="_blank"
             trailing-icon>

button/internal/button.ts

@@ -142,8 +142,7 @@ export abstract class Button extends buttonBaseClass implements FormSubmitter {
   }
 
   protected override render() {
-    // Link buttons may not be disabled
-    const isRippleDisabled = !this.href && (this.disabled || this.softDisabled);
+    const isRippleDisabled = this.disabled || this.softDisabled;
     const buttonOrLink = this.href ? this.renderLink() : this.renderButton();
     // TODO(b/310046938): due to a limitation in focus ring/ripple, we can't use
     // the same ID for different elements, so we change the ID instead.
@@ -190,6 +189,8 @@ export abstract class Button extends buttonBaseClass implements FormSubmitter {
       aria-label="${ariaLabel || nothing}"
       aria-haspopup="${ariaHasPopup || nothing}"
       aria-expanded="${ariaExpanded || nothing}"
+      aria-disabled=${this.disabled || this.softDisabled || nothing}
+      tabindex="${this.disabled && !this.softDisabled ? -1 : nothing}"
       href=${this.href}
       download=${this.download || nothing}
       target=${this.target || nothing}
@@ -211,10 +212,10 @@ export abstract class Button extends buttonBaseClass implements FormSubmitter {
   }
 
   private handleClick(event: MouseEvent) {
-    // If the button is soft-disabled, we need to explicitly prevent the click
-    // from propagating to other event listeners as well as prevent the default
-    // action.
-    if (!this.href && this.softDisabled) {
+    // If the button is soft-disabled or a disabled link, we need to explicitly
+    // prevent the click from propagating to other event listeners as well as
+    // prevent the default action.
+    if (this.softDisabled || (this.disabled && this.href)) {
       event.stopImmediatePropagation();
       event.preventDefault();
       return;