feat(list): Added focus ring to list item

PiperOrigin-RevId: 465970848
material-components · Aug 8, 2022 · 2d2b3bb · 2d2b3bb
1 parent c293a8d
commit 2d2b3bb
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 5 deletions.
diff --git a/list/lib/_list.scss b/list/lib/_list.scss
@@ -22,9 +22,9 @@
 
 @mixin root() {
   display: block;
-  margin: 0;
-  padding: 0;
-  padding-block: 8px;
   list-style-type: none;
+  margin: 0;
   min-width: 300px;
+  outline: none;
+  padding: 8px 0;
 }
diff --git a/list/lib/listitem/_list-item.scss b/list/lib/listitem/_list-item.scss
@@ -6,9 +6,17 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
+@use '@material/web/focus/lib/focus-ring-theme';
+
 @mixin static-styles() {
   :host {
     @include host-root;
+    @include focus-ring-theme.theme(
+      (
+        container-outer-padding-vertical: -2px,
+        container-outer-padding-horizontal: -2px,
+      )
+    );
   }
 
   .md3-list-item {
@@ -33,6 +41,10 @@
     position: absolute;
     z-index: 0;
   }
+
+  .md3-list-item__focus-ring {
+    z-index: 1;
+  }
 }
 
 @mixin host-root() {
@@ -43,8 +55,9 @@
   align-items: center;
   box-sizing: border-box;
   display: flex;
-  width: 100%;
+  outline: none;
   position: relative;
+  width: 100%;
 
   &.md3-list-item--enabled {
     cursor: pointer;

diff --git a/list/lib/listitem/list-item.ts b/list/lib/listitem/list-item.ts
@@ -5,12 +5,14 @@
  */
 
 import '@material/web/ripple/ripple';
+import '@material/web/focus/focus-ring';
 
 import {ActionElement, BeginPressConfig, EndPressConfig} from '@material/web/actionelement/action-element';
+import {pointerPress, shouldShowStrongFocus} from '@material/web/focus/strong-focus';
 import {MdRipple} from '@material/web/ripple/ripple';
 import {ARIARole} from '@material/web/types/aria';
 import {html, TemplateResult} from 'lit';
-import {property, query} from 'lit/decorators';
+import {property, query, state} from 'lit/decorators';
 import {ClassInfo, classMap} from 'lit/directives/class-map';
 
 /** @soyCompatible */
@@ -23,6 +25,7 @@ export class ListItem extends ActionElement {
   @property({type: String}) headline = '';
   @query('md-ripple') ripple!: MdRipple;
   @query('[data-query-md3-list-item]') listItemRoot!: HTMLElement;
+  @state() protected showFocusRing = false;
 
   /** @soyTemplate */
   override render(): TemplateResult {
@@ -41,13 +44,18 @@ export class ListItem extends ActionElement {
           @keyup=${this.handleKeyUp}
           @click=${this.handleClick}
           @contextmenu=${this.handleContextMenu}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
           >
         ${this.renderStart()}
         ${this.renderBody()}
         ${this.renderEnd()}
         <div class="md3-list-item__ripple">
           ${this.renderRipple()}
         </div>
+        <div class="md3-list-item__focus-ring">
+          ${this.renderFocusRing()}
+        </div>
       </li>`;
   }
 
@@ -56,6 +64,12 @@ export class ListItem extends ActionElement {
     return html`<md-ripple ?disabled="${this.disabled}"></md-ripple>`;
   }
 
+  /** @soyTemplate */
+  protected renderFocusRing(): TemplateResult {
+    return html`<md-focus-ring .visible="${
+        this.showFocusRing}"></md-focus-ring>`;
+  }
+
   /** @soyTemplate */
   protected getAriaRole(): ARIARole {
     return 'listitem';
@@ -144,6 +158,21 @@ export class ListItem extends ActionElement {
     super.endPress({cancelled, actionData: {item: this}});
   }
 
+  protected handleFocus() {
+    this.showFocusRing = shouldShowStrongFocus();
+  }
+
+  protected handleBlur() {
+    this.showFocusRing = false;
+  }
+
+  override handlePointerDown(e: PointerEvent) {
+    super.handlePointerDown(e);
+
+    pointerPress();
+    this.showFocusRing = shouldShowStrongFocus();
+  }
+
   protected handlePointerEnter(e: PointerEvent) {
     this.ripple.beginHover(e);
   }