fix(tabs): high contrast and reduced motion styling; improve tab mars…

…haling PiperOrigin-RevId: 532180388
material-components · May 15, 2023 · 6116c34 · 6116c34
1 parent 2317c5a
commit 6116c34
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 20 deletions.
diff --git a/tabs/lib/_tab.scss b/tabs/lib/_tab.scss
@@ -286,4 +286,11 @@
   ::slotted(*) {
     white-space: nowrap;
   }
+
+  @media (forced-colors: active) {
+    :host,
+    :host([variant]) {
+      --_active-indicator-color: CanvasText;
+    }
+  }
 }
diff --git a/tabs/lib/tab.ts b/tabs/lib/tab.ts
@@ -145,8 +145,7 @@ export class Tab extends LitElement {
   };
 
   private shouldAnimate() {
-    return this.canAnimate && !this.disabled &&
-        !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    return this.canAnimate && !this.disabled;
   }
 
   private readonly getRipple = () => {
@@ -173,8 +172,9 @@ export class Tab extends LitElement {
   }
 
   private getKeyframes() {
+    const reduceMotion = shouldReduceMotion();
     if (!this.selected) {
-      return null;
+      return reduceMotion ? [{'opacity': 1}, {'transform': 'none'}] : null;
     }
     const from: Keyframe = {};
     const isVertical = this.variant.includes('vertical');
@@ -189,7 +189,8 @@ export class Tab extends LitElement {
     const toExtent = isVertical ? toRect.height : toRect.width;
     const axis = isVertical ? 'Y' : 'X';
     const scale = fromExtent / toExtent;
-    if (fromPos !== undefined && toPos !== undefined && !isNaN(scale)) {
+    if (!reduceMotion && fromPos !== undefined && toPos !== undefined &&
+        !isNaN(scale)) {
       from['transform'] = `translate${axis}(${
           (fromPos - toPos).toFixed(4)}px) scale${axis}(${scale.toFixed(4)})`;
     } else {
@@ -200,3 +201,7 @@ export class Tab extends LitElement {
     return [from, {'transform': 'none'}];
   }
 }
+
+function shouldReduceMotion() {
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
diff --git a/tabs/lib/tabs.ts b/tabs/lib/tabs.ts
@@ -5,18 +5,9 @@
  */
 
 import {html, isServer, LitElement, PropertyValues} from 'lit';
-import {property, state} from 'lit/decorators.js';
+import {property, query} from 'lit/decorators.js';
 
-import {Variant} from './tab.js';
-
-/**
- * Type for list items.
- */
-export interface Tab extends HTMLElement {
-  disabled?: boolean;
-  selected?: boolean;
-  variant?: string;
-}
+import {Tab, Variant} from './tab.js';
 
 const NAVIGATION_KEYS = new Map([
   ['default', new Set(['Home', 'End', 'Space'])],
@@ -76,11 +67,15 @@ export class Tabs extends LitElement {
    */
   @property({type: Boolean}) selectOnFocus = false;
 
+  @query('slot') private readonly itemsSlot?: HTMLSlotElement;
+
   private previousSelected = -1;
   private orientation = 'horizontal';
   private readonly scrollMargin = 48;
-  // note, populated via slotchange.
-  @state() private items: Tab[] = [];
+
+  private get items() {
+    return this.itemsSlot?.assignedElements({flatten: true}) as Tab[] ?? [];
+  }
 
   private readonly selectedAttribute = `selected`;
 
@@ -298,9 +293,7 @@ export class Tabs extends LitElement {
   }
 
   private handleSlotChange(e: Event) {
-    this.items =
-        (e.target as HTMLSlotElement).assignedElements({flatten: true}) as
-        Tab[];
+    this.requestUpdate();
   }
 
   // ensures the given item is visible in view; defaults to the selected item