feat(list): Add setEnabled to foundation (#5049)

packages/mdc-list/README.md

@@ -463,6 +463,7 @@ Method Signature | Description
 --- | ---
 `layout() => void` | Recalculates layout and orientation.
 `initializeListType() => void` | Initialize `selectedIndex` value based on pre-selected checkbox list items, single selection or radio.
+`setEnabled(itemIndex: number, isEnabled: boolean) => void` | Updates the list item at `itemIndex` to the desired `isEnabled` state.
 
 ### Events
 
@@ -564,3 +565,4 @@ Method Signature | Description
 `focusPrevElement(index: number) => number` | Handles focusing the previous element using the current `index`. Returns focused element index.
 `focusFirstElement() => number` | Handles focusing the first element in a list. Returns focused element index.
 `focusLastElement() => number` | Handles focusing the last element in a list. Returns focused element index.
+`setEnabled(itemIndex: number, isEnabled: Boolean) => void` | Updates the list item's disabled state.

packages/mdc-list/component.ts

@@ -129,6 +129,15 @@ export class MDCList extends MDCComponent<MDCListFoundation> {
     }
   }
 
+  /**
+   * Updates the list item at itemIndex to the desired isEnabled state.
+   * @param itemIndex Index of the list item
+   * @param isEnabled Sets the list item to enabled or disabled.
+   */
+  setEnabled(itemIndex: number, isEnabled: boolean) {
+    this.foundation_.setEnabled(itemIndex, isEnabled);
+  }
+
   getDefaultFoundation() {
     // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
     // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.

packages/mdc-list/constants.ts

@@ -35,6 +35,7 @@ const strings = {
   ARIA_CHECKED_CHECKBOX_SELECTOR: '[role="checkbox"][aria-checked="true"]',
   ARIA_CHECKED_RADIO_SELECTOR: '[role="radio"][aria-checked="true"]',
   ARIA_CURRENT: 'aria-current',
+  ARIA_DISABLED: 'aria-disabled',
   ARIA_ORIENTATION: 'aria-orientation',
   ARIA_ORIENTATION_HORIZONTAL: 'horizontal',
   ARIA_ROLE_CHECKBOX_SELECTOR: '[role="checkbox"]',

packages/mdc-list/foundation.ts

@@ -304,6 +304,24 @@ export class MDCListFoundation extends MDCFoundation<MDCListAdapter> {
     return lastIndex;
   }
 
+  /**
+   * @param itemIndex Index of the list item
+   * @param isEnabled Sets the list item to enabled or disabled.
+   */
+  setEnabled(itemIndex: number, isEnabled: boolean): void {
+    if (!this.isIndexValid_(itemIndex)) {
+      return;
+    }
+
+    if (isEnabled) {
+      this.adapter_.removeClassForElementIndex(itemIndex, cssClasses.LIST_ITEM_DISABLED_CLASS);
+      this.adapter_.setAttributeForElementIndex(itemIndex, strings.ARIA_DISABLED, 'false');
+    } else {
+      this.adapter_.addClassForElementIndex(itemIndex, cssClasses.LIST_ITEM_DISABLED_CLASS);
+      this.adapter_.setAttributeForElementIndex(itemIndex, strings.ARIA_DISABLED, 'true');
+    }
+  }
+
   /**
    * Ensures that preventDefault is only called if the containing element doesn't
    * consume the event, and it will cause an unintended scroll.

test/unit/mdc-list/foundation.test.js

@@ -996,3 +996,23 @@ test('#getSelectedIndex should be in-sync with setter method for multi-select ch
   foundation.setSelectedIndex([0, 2, 3]);
   assert.deepEqual([0, 2, 3], foundation.getSelectedIndex());
 });
+
+test('#setEnabled should remove disabled class and set aria-disabled to false', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.getListItemCount()).thenReturn(5);
+  foundation.layout();
+
+  foundation.setEnabled(3, true);
+  td.verify(mockAdapter.removeClassForElementIndex(3, cssClasses.LIST_ITEM_DISABLED_CLASS), {times: 1});
+  td.verify(mockAdapter.setAttributeForElementIndex(3, strings.ARIA_DISABLED, 'false'), {times: 1});
+});
+
+test('#setEnabled should add disabled class and set aria-disabled to true', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.getListItemCount()).thenReturn(5);
+  foundation.layout();
+
+  foundation.setEnabled(3, false);
+  td.verify(mockAdapter.addClassForElementIndex(3, cssClasses.LIST_ITEM_DISABLED_CLASS), {times: 1});
+  td.verify(mockAdapter.setAttributeForElementIndex(3, strings.ARIA_DISABLED, 'true'), {times: 1});
+});

test/unit/mdc-list/mdc-list.test.js

@@ -156,6 +156,12 @@ test('#initializeListType does not populate selectedIndex when no item is select
   td.verify(mockFoundation.setSelectedIndex(td.matchers.anything()), {times: 0});
 });
 
+test('#setEnabled calls foundation method setEnabled with given index and enabled state.', () => {
+  const {component, mockFoundation} = setupTest();
+  component.setEnabled(1, true);
+  td.verify(mockFoundation.setEnabled(1, true), {times: 1});
+});
+
 test('adapter#getListItemCount returns correct number of list items', () => {
   const {root, component} = setupTest();
   document.body.appendChild(root);