fix(list)!: list items are now noninteractive by default

BREAKING CHANGE: the `noninteractive` property has been replaced by the `interactive` property, and by default, a list-item will no longer show a ripple or focus ring.
What to change:
- To preserve prior default behavior, add the `interactive` attribute explicitly.
- Any setting of a truthy `noninteractive` attribute or property can be removed as it's the new default behavior.

PiperOrigin-RevId: 566696782

docs/components/figures/list/usage.html

@@ -3,7 +3,7 @@
     aria-label="Three items in a list. The first item says Apple as its headline. The second one says Banana in its headline as well as Banana is a yellow fruit as its sub header. The third list item says Cucumber in its headline and Cucumbers are long green fruits that are just as long as this multi-line description as its sub header which is on two lines."
   >
     <md-list style="max-width: 300px">
-      <md-list-item headline="Fruits" noninteractive></md-list-item>
+      <md-list-item headline="Fruits"></md-list-item>
       <md-divider></md-divider>
       <md-list-item headline="Apple"></md-list-item>
       <md-list-item headline="Banana" supporting-text="Banana is a yellow fruit"> </md-list-item>
@@ -14,6 +14,7 @@
       >
       </md-list-item>
       <md-list-item
+        interactive
         headline="Shop for Kiwis"
         supporting-text="This will link you out in a new tab"
         href="https://google.com/search?q=buy+kiwis&tbm=shop"

docs/components/list.md

@@ -71,7 +71,7 @@ header which is on two lines.](images/list/usage.webp)
 
 ```html
 <md-list style="max-width: 300px;">
-  <md-list-item headline="Fruits" noninteractive></md-list-item>
+  <md-list-item headline="Fruits"></md-list-item>
   <md-divider></md-divider>
   <md-list-item headline="Apple"></md-list-item>
   <md-list-item headline="Banana" supporting-text="Banana is a yellow fruit">
@@ -82,6 +82,7 @@ header which is on two lines.](images/list/usage.webp)
       supporting-text="Cucumbers are long green fruits that are just as long as this multi-line description">
   </md-list-item>
   <md-list-item
+      interactive
       headline="Shop for Kiwis"
       supporting-text="This will link you out in a new tab"
       href="https://google.com/search?q=buy+kiwis&tbm=shop"

list/demo/demo.ts

@@ -38,7 +38,7 @@ const collection =
     new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('List', [
       new Knob('md-list-item', {ui: title()}),
       new Knob('disabled', {ui: boolInput(), defaultValue: false}),
-      new Knob('noninteractive', {ui: boolInput(), defaultValue: false}),
+      new Knob('interactive', {ui: boolInput(), defaultValue: false}),
       new Knob(
           'multiLineSupportingText', {ui: boolInput(), defaultValue: false}),
       new Knob('headline', {ui: textInput(), defaultValue: 'Headline'}),

list/demo/stories.ts

@@ -16,7 +16,7 @@ import {css, html} from 'lit';
 export interface StoryKnobs {
   'md-list-item': void;
   disabled: boolean;
-  noninteractive: boolean;
+  interactive: boolean;
   multiLineSupportingText: boolean;
   headline: string;
   supportingText: string;
@@ -58,7 +58,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
   render(knobs) {
     const {
       disabled,
-      noninteractive,
+      interactive,
       multiLineSupportingText,
       headline,
       supportingText,
@@ -76,7 +76,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
               .multiLineSupportingText=${multiLineSupportingText}
               .trailingSupportingText=${trailingSupportingText}
               .disabled=${disabled}
-              .noninteractive=${noninteractive}>
+              .interactive=${interactive}>
           </md-list-item>
 
           <md-list-item
@@ -85,7 +85,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
               .multiLineSupportingText=${multiLineSupportingText}
               .trailingSupportingText=${trailingSupportingText}
               .disabled=${disabled}
-              .noninteractive=${noninteractive}>
+              .interactive=${interactive}>
             <md-icon slot="start-icon">
               ${knobs['start icon']}
             </md-icon>
@@ -100,7 +100,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
               .multiLineSupportingText=${multiLineSupportingText}
               .trailingSupportingText=${trailingSupportingText}
               .disabled=${disabled}
-              .noninteractive=${noninteractive}
+              .interactive=${interactive}
               .href=${href}
               .target=${target as '' | '_blank' | '_parent' | '_self' | '_top'}>
             <md-icon slot="end-icon">${knobs['link end icon']}</md-icon>
@@ -114,7 +114,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
               .multiLineSupportingText=${multiLineSupportingText}
               .trailingSupportingText=${trailingSupportingText}
               .disabled=${disabled}
-              .noninteractive=${noninteractive}>
+              .interactive=${interactive}>
             <img src=${knobs['avatar img']} slot="start-avatar">
           </md-list-item>
 
@@ -124,7 +124,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
               .multiLineSupportingText=${multiLineSupportingText}
               .trailingSupportingText=${trailingSupportingText}
               .disabled=${disabled}
-              .noninteractive=${noninteractive}>
+              .interactive=${interactive}>
             <span slot="start-avatar">
               ${knobs['avatar label']}
             </span>
@@ -136,7 +136,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
               .multiLineSupportingText=${multiLineSupportingText}
               .trailingSupportingText=${trailingSupportingText}
               .disabled=${disabled}
-              .noninteractive=${noninteractive}>
+              .interactive=${interactive}>
             <img .src=${image} slot="start-image">
           </md-list-item>
 
@@ -146,7 +146,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
               .multiLineSupportingText=${multiLineSupportingText}
               .trailingSupportingText=${trailingSupportingText}
               .disabled=${disabled}
-              .noninteractive=${noninteractive}>
+              .interactive=${interactive}>
             <video
                 muted
                 autoplay

list/internal/listitem/_list-item.scss

@@ -80,7 +80,7 @@
     // hide android tap color since we have ripple
     -webkit-tap-highlight-color: transparent;
 
-    &:not(.disabled):not(.noninteractive) {
+    &:not(.disabled).interactive {
       cursor: pointer;
     }
 

list/internal/listitem/list-item-only.ts

@@ -12,23 +12,24 @@ import {createRequestActivationEvent, ListItemEl} from './list-item.js';
 // tslint:disable-next-line:enforce-comments-on-exported-symbols
 export class ListItemOnly extends ListItemEl {
   /**
-   * Removes the hover and click ripples from the item when true.
+   * Enables focusing the list item, and adds hover and click ripples when set
+   * to true. By default `interactive` is false.
    */
-  @property({type: Boolean}) noninteractive = false;
+  @property({type: Boolean}) interactive = false;
 
   override getRenderClasses() {
     return {
       ...super.getRenderClasses(),
-      'noninteractive': this.noninteractive,
+      'interactive': this.interactive,
     };
   }
 
   override renderRipple() {
-    return this.noninteractive ? nothing : super.renderRipple();
+    return this.interactive ? super.renderRipple() : nothing;
   }
 
   override renderFocusRing() {
-    return this.noninteractive ? nothing : super.renderFocusRing();
+    return this.interactive ? super.renderFocusRing() : nothing;
   }
 
   override onFocus() {

list/internal/listitem/list-item.ts

@@ -129,9 +129,6 @@ export class ListItemEl extends LitElement implements ListItem {
    */
   @property() target: '_blank'|'_parent'|'_self'|'_top'|'' = '';
 
-  // Use a lit property to handle reflecting with preset attributes
-  @property({type: Number, reflect: true}) override tabIndex = 0;
-
   @query('.list-item') protected readonly listItemRoot!: HTMLElement|null;
 
   protected override render() {

list/list_test.ts

@@ -1087,7 +1087,7 @@ describe('<md-list-item>', () => {
     expect(rootEl.classList.contains('with-three-line')).toBeTrue();
   });
 
-  it('ripple and focus ring not rendered on noninteractive', async () => {
+  it('ripple and focus ring rendered on interactive', async () => {
     const root = env.render(html`<md-list-item></md-list-item>`);
 
     const listItem = root.querySelector('md-list-item')!;
@@ -1097,18 +1097,18 @@ describe('<md-list-item>', () => {
     let rippleEl = listItem.renderRoot.querySelector('md-ripple');
     let focusRingEl = listItem.renderRoot.querySelector('md-focus-ring');
 
-    expect(rippleEl).toBeTruthy();
-    expect(focusRingEl).toBeTruthy();
+    expect(rippleEl).toBeNull();
+    expect(focusRingEl).toBeNull();
 
-    listItem.noninteractive = true;
+    listItem.interactive = true;
 
     await env.waitForStability();
 
     rippleEl = listItem.renderRoot.querySelector('md-ripple');
     focusRingEl = listItem.renderRoot.querySelector('md-focus-ring');
 
-    expect(rippleEl).toBeNull();
-    expect(focusRingEl).toBeNull();
+    expect(rippleEl).toBeTruthy();
+    expect(focusRingEl).toBeTruthy();
   });
 });