add disabled focusable click handling

microsoft · Mar 30, 2023 · 01d20ab · 01d20ab
1 parent 8d7afc2
commit 01d20ab
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/packages/web-components/src/button/button.stories.ts b/packages/web-components/src/button/button.stories.ts
@@ -14,9 +14,9 @@ const storyTemplate = html<ButtonStoryArgs>`
     shape="${x => x.shape}"
     size="${x => x.size}"
     ?disabled="${x => x.disabled}"
-    ?disabledFocusable="${x => x.disabledFocusable}"
+    ?disabled-focusable="${x => x.disabledFocusable}"
     ?icon-only="${x => x.iconOnly}"
-    ?icon="${x => x.icon}
+    ?icon="${x => x.icon}"
   >
     ${x => x.content}
   </fluent-button>

diff --git a/packages/web-components/src/button/button.ts b/packages/web-components/src/button/button.ts
@@ -68,10 +68,36 @@ export class Button extends FASTButton {
   @attr({ attribute: 'disabled-focusable', mode: 'boolean' })
   public disabledFocusable?: boolean = false;
   protected disabledFocusableChanged(prev: boolean, next: boolean): void {
+    if (!this.$fastController.isConnected) {
+      return;
+    }
+
     if (this.disabledFocusable) {
-      ((this as unknown) as HTMLElement).setAttribute('aria-disabled', 'true');
+      this.ariaDisabled = true;
     } else {
-      ((this as unknown) as HTMLElement).removeAttribute('aria-disabled');
+      this.ariaDisabled = false;
+    }
+  }
+
+  /**
+   * Prevents disabledFocusable click events
+   */
+  private handleDisabledFocusableClick = (e: MouseEvent): void => {
+    if (e && this.disabledFocusable) {
+      e.stopImmediatePropagation();
+      return;
     }
+  };
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+
+    ((this as unknown) as HTMLElement).addEventListener('click', this.handleDisabledFocusableClick);
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+
+    ((this as unknown) as HTMLElement).removeEventListener('click', this.handleDisabledFocusableClick);
   }
 }