From 562e40a6afeee3559eae6e5047671a8ed5089d48 Mon Sep 17 00:00:00 2001
From: Esteban Gonzalez <esgonzalez@google.com>
Date: Thu, 12 May 2022 14:18:53 -0700
Subject: [PATCH] feat(fab): Add focus ring support

PiperOrigin-RevId: 448337105
---
 components/fab/lib/fab-shared.ts | 37 +++++++++++++++++++++++++-------
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/components/fab/lib/fab-shared.ts b/components/fab/lib/fab-shared.ts
index 8d25ed7ff..8afba732a 100644
--- a/components/fab/lib/fab-shared.ts
+++ b/components/fab/lib/fab-shared.ts
@@ -4,13 +4,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
 
 import {html, TemplateResult} from 'lit';
-import {property, query} from 'lit/decorators.js';
+import {property, query, state} from 'lit/decorators.js';
 import {ClassInfo, classMap} from 'lit/directives/class-map.js';
 
 import {ActionElement, BeginPressConfig, EndPressConfig} from '../../action-element/action-element.js';
+import {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';
 import {MdRipple} from '../../ripple/ripple.js';
 
 /**
@@ -32,6 +34,8 @@ export class FabShared extends ActionElement {
 
   @query('md-ripple') ripple!: MdRipple;
 
+  @state() protected showFocusRing = false;
+
   /**
    * @soyTemplate
    * @soyClasses fabClasses: .md3-fab
@@ -44,6 +48,8 @@ export class FabShared extends ActionElement {
         class="md3-fab md3-surface ${classMap(this.getRenderClasses())}"
         ?disabled="${this.disabled}"
         aria-label="${ariaLabel}"
+        @focus="${this.handleFocus}"
+        @blur="${this.handleBlur}"
         @pointerdown="${this.handlePointerDown}"
         @pointerup="${this.handlePointerUp}"
         @pointercancel="${this.handlePointerCancel}"
@@ -51,12 +57,15 @@ export class FabShared extends ActionElement {
         @pointerenter="${this.handlePointerEnter}"
         @click="${this.handleClick}"
         @clickmod="${this.handleClick}"
-        @contextmenu="${this.handleContextMenu}"
-      >${this.renderElevationOverlay()}${this.renderRipple()}
+        @contextmenu="${this.handleContextMenu}">
+        ${this.renderElevationOverlay()}
+        ${this.renderFocusRing()}
+        ${this.renderRipple()}
         <span class="material-icons md3-fab__icon">
           <slot name="icon">${this.icon}</slot>
         </span>
-        ${this.renderLabel()}${this.renderTouchTarget()}
+        ${this.renderLabel()}
+        ${this.renderTouchTarget()}
       </button>`;
   }
 
@@ -93,6 +102,12 @@ export class FabShared extends ActionElement {
         this.disabled}"></md-ripple>`;
   }
 
+  /** @soyTemplate */
+  protected renderFocusRing(): TemplateResult {
+    return html`<md-focus-ring .visible="${
+        this.showFocusRing}"></md-focus-ring>`;
+  }
+
   override beginPress({positionEvent}: BeginPressConfig) {
     this.ripple.beginPress(positionEvent);
   }
@@ -104,10 +119,8 @@ export class FabShared extends ActionElement {
 
   override handlePointerDown(e: PointerEvent) {
     super.handlePointerDown(e);
-  }
-
-  override handlePointerUp(e: PointerEvent) {
-    super.handlePointerUp(e);
+    pointerPress();
+    this.showFocusRing = shouldShowStrongFocus();
   }
 
   protected handlePointerEnter(e: PointerEvent) {
@@ -118,4 +131,12 @@ export class FabShared extends ActionElement {
     super.handlePointerLeave(e);
     this.ripple.endHover();
   }
+
+  protected handleFocus() {
+    this.showFocusRing = shouldShowStrongFocus();
+  }
+
+  protected handleBlur() {
+    this.showFocusRing = false;
+  }
 }