feat(list,menu): implement forced colors

PiperOrigin-RevId: 520501176

list/lib/listitem/_list-item.scss

@@ -216,10 +216,8 @@
     }
 
     .with-three-line & {
-      /*
-       * In three line, trailing-supporting-text must align with the mid-line of
-       * the headline text.
-       */
+      // In three line, trailing-supporting-text must align with the mid-line of
+      // the headline text.
       padding-block-start: calc(
         (
             var(--_list-item-label-text-line-height) -
@@ -240,7 +238,7 @@
     height: var(--_list-item-leading-image-height);
     width: var(--_list-item-leading-image-width);
     border-radius: var(--_list-item-leading-image-shape);
-    /* Min height is two-line height */
+    // Min height is two-line height
     padding-block: calc(
       (
           var(--_list-item-two-line-container-height) -
@@ -264,7 +262,7 @@
     );
 
     .with-three-line & {
-      /* In three line, icon must align with the mid-line of headline text */
+      // In three line, icon must align with the mid-line of headline text
       padding-block-start: calc(
         (
             var(--_list-item-label-text-line-height) -
@@ -283,7 +281,7 @@
     );
 
     .with-three-line & {
-      /* In three line, icon must align with the mid-line of headline text */
+      // In three line, icon must align with the mid-line of headline text
       padding-block-start: calc(
         (
             var(--_list-item-label-text-line-height) -
@@ -393,25 +391,23 @@
     width: var(--_list-item-leading-video-width);
     border-radius: var(--_list-item-leading-video-shape);
     margin-inline-start: var(--_list-item-leading-video-leading-space);
-    /* Min height is three-line height */
+    // Min height is three-line height
     padding-block: calc(
       (
           var(--_list-item-three-line-container-height) -
             var(--_list-item-small-leading-video-height)
         ) / 2
     );
 
-    /*
-     * Let it auto-layout so that we don't mess with the icons and supporting
-     * text that is supposed to be top-aligned in three-line.
-     */
+    // Let it auto-layout so that we don't mess with the icons and supporting
+    // text that is supposed to be top-aligned in three-line.
     .with-three-line & {
       padding-block: 0;
     }
   }
 
   ::slotted([data-variant='video-large']) {
-    /* Min height is three-line height */
+    // Min height is three-line height
     padding-block: calc(
       (
           var(--_list-item-three-line-container-height) -

list/lib/listitem/forced-colors-styles.scss

@@ -0,0 +1,23 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './list-item';
+// go/keep-sorted end
+
+@media (forced-colors: active) {
+  :host {
+    @include list-item.theme(
+      (
+        list-item-disabled-label-text-color: GrayText,
+        list-item-disabled-label-text-opacity: 1,
+        list-item-disabled-leading-icon-color: GrayText,
+        list-item-disabled-leading-icon-opacity: 1,
+        list-item-disabled-trailing-icon-color: GrayText,
+        list-item-disabled-trailing-icon-opacity: 1,
+      )
+    );
+  }
+}

list/list-item-link.ts

@@ -6,6 +6,7 @@
 
 import {customElement} from 'lit/decorators.js';
 
+import {styles as forcedColors} from './lib/listitem/forced-colors-styles.css.js';
 import {styles} from './lib/listitem/list-item-styles.css.js';
 import {ListItemLink} from './lib/listitemlink/list-item-link.js';
 
@@ -56,5 +57,5 @@ declare global {
  */
 @customElement('md-list-item-link')
 export class MdListItemLink extends ListItemLink {
-  static override styles = [styles];
+  static override styles = [styles, forcedColors];
 }

list/list-item.ts

@@ -6,6 +6,7 @@
 
 import {customElement} from 'lit/decorators.js';
 
+import {styles as forcedColors} from './lib/listitem/forced-colors-styles.css.js';
 import {ListItemEl as ListItem} from './lib/listitem/list-item.js';
 import {styles} from './lib/listitem/list-item-styles.css.js';
 
@@ -57,5 +58,5 @@ declare global {
  */
 @customElement('md-list-item')
 export class MdListItem extends ListItem {
-  static override styles = [styles];
+  static override styles = [styles, forcedColors];
 }

menu/lib/_menu.scss

@@ -81,6 +81,7 @@ $_custom-property-prefix: 'menu';
       display: block;
       overflow: auto;
       min-width: inherit;
+      border-radius: inherit;
     }
 
     &.has-overflow md-list {

menu/lib/forced-colors-styles.scss

@@ -0,0 +1,12 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@media (forced-colors: active) {
+  .menu {
+    border-style: solid;
+    border-color: CanvasText;
+    border-width: 1px;
+  }
+}

menu/lib/menuitem/_menu-item.scss

@@ -41,15 +41,11 @@ $_custom-property-prefix: 'menu';
     }
   }
 
-  /*
-      Set the ripple opacity to 0 if there is a submenu that is hovered.
-    */
+  // Set the ripple opacity to 0 if there is a submenu that is hovered.
   .list-item:has(.submenu:hover) {
-    /*
-        Have to use ripple theme directly because :has selector in this case does
-        not work in this case with the :has selector, thus we cannot override the
-        custom props set in :host
-      */
+    // Have to use ripple theme directly because :has selector in this case does
+    // not work in this case with the :has selector, thus we cannot override the
+    // custom props set in :host
     @include ripple.theme(
       (
         hover-opacity: 0,

menu/lib/menuitem/forced-colors-styles.scss

@@ -0,0 +1,22 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@media (forced-colors: active) {
+  .list-item {
+    position: relative;
+  }
+
+  // Show double border only when selected, and the current list item does not
+  // have a focus ring on it.
+  :host([selected]) .list-item:not(:has(.focus-ring[visible]))::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    box-sizing: border-box;
+    border-radius: inherit;
+    pointer-events: none;
+    border: 3px double CanvasText;
+  }
+}

menu/menu-item-link.ts

@@ -6,8 +6,10 @@
 
 import {customElement} from 'lit/decorators.js';
 
+import {styles as listItemForcedColorsStyles} from '../list/lib/listitem/forced-colors-styles.css.js';
 import {styles as listItemStyles} from '../list/lib/listitem/list-item-styles.css.js';
 
+import {styles as forcedColorsStyles} from './lib/menuitem/forced-colors-styles.css.js';
 import {styles} from './lib/menuitem/menu-item-styles.css.js';
 import {MenuItemLink} from './lib/menuitemlink/menu-item-link.js';
 
@@ -40,5 +42,6 @@ declare global {
  */
 @customElement('md-menu-item-link')
 export class MdMenuItemLink extends MenuItemLink {
-  static override styles = [listItemStyles, styles];
+  static override styles =
+      [listItemStyles, styles, listItemForcedColorsStyles, forcedColorsStyles];
 }

menu/menu-item.ts

@@ -6,10 +6,12 @@
 
 import {customElement} from 'lit/decorators.js';
 
+import {styles as listItemForcedColorsStyles} from '../list/lib/listitem/forced-colors-styles.css.js';
 import {styles as listItemStyles} from '../list/lib/listitem/list-item-styles.css.js';
 
-import {styles} from './lib/menuitem/menu-item-styles.css.js';
+import {styles as forcedColorsStyles} from './lib/menuitem/forced-colors-styles.css.js';
 import {MenuItemEl} from './lib/menuitem/menu-item.js';
+import {styles} from './lib/menuitem/menu-item-styles.css.js';
 
 export {ListItem} from '../list/lib/listitem/list-item.js';
 export {CloseMenuEvent, DeactivateItemsEvent, MenuItem} from './lib/shared.js';
@@ -37,5 +39,6 @@ declare global {
  */
 @customElement('md-menu-item')
 export class MdMenuItem extends MenuItemEl {
-  static override styles = [listItemStyles, styles];
+  static override styles =
+      [listItemStyles, styles, listItemForcedColorsStyles, forcedColorsStyles];
 }

menu/menu.ts

@@ -6,6 +6,7 @@
 
 import {customElement} from 'lit/decorators.js';
 
+import {styles as forcedColors} from './lib/forced-colors-styles.css.js';
 import {Menu} from './lib/menu.js';
 import {styles} from './lib/menu-styles.css.js';
 
@@ -63,5 +64,5 @@ declare global {
  */
 @customElement('md-menu')
 export class MdMenu extends Menu {
-  static override styles = [styles];
+  static override styles = [styles, forcedColors];
 }

menu/sub-menu-item.ts

@@ -6,8 +6,10 @@
 
 import {customElement} from 'lit/decorators.js';
 
+import {styles as listItemForcedColorsStyles} from '../list/lib/listitem/forced-colors-styles.css.js';
 import {styles as listItemStyles} from '../list/lib/listitem/list-item-styles.css.js';
 
+import {styles as forcedColorsStyles} from './lib/menuitem/forced-colors-styles.css.js';
 import {styles} from './lib/menuitem/menu-item-styles.css.js';
 import {SubMenuItem} from './lib/submenuitem/sub-menu-item.js';
 
@@ -66,5 +68,6 @@ declare global {
  */
 @customElement('md-sub-menu-item')
 export class MdSubMenuItem extends SubMenuItem {
-  static override styles = [listItemStyles, styles];
+  static override styles =
+      [listItemStyles, styles, listItemForcedColorsStyles, forcedColorsStyles];
 }

menu/test/window_size.json

@@ -1,13 +1,13 @@
 {
   "capabilities": {
     "goog:chromeOptions": {
-      "args": ["--window-position=0,0", "--window-size=3325,2215"]
+      "args": ["--window-position=0,0", "--window-size=3400,2215"]
     },
     "moz:firefoxOptions": {
-      "args": ["-width=3325","-height=2215"]
+      "args": ["-width=3400","-height=2215"]
     }
   },
   "extension": {
-    "xvfbResolution": "3325x2215x24"
+    "xvfbResolution": "3400x2215x24"
   }
 }