fix(list): Update default notifyAction impl to emit object

packages/mdc-list/README.md

@@ -439,6 +439,28 @@ Key | Action
 `Space` | Will cause the currently focused list item to become selected/deselected if `singleSelection=true`.
 `Enter` | Will cause the currently focused list item to become selected/deselected if `singleSelection=true`.
 
+
+## `MDCList` Properties and Methods
+
+Property | Value Type | Description
+--- | --- | ---
+`vertical` | `boolean` (write-only) | Proxies to the foundation's `setVerticalOrientation()` method.
+`listElements` | `Array<Element>` (read-only) | Returns all enabled list item elements.
+`wrapFocus` | `boolean` (write-only) | Proxies to the foundation's `setWrapFocus()` method.
+`singleSelection` | `boolean` (write-only) | Proxies to the foundation's `setSingleSelection()` method.
+`selectedIndex` | `boolean` | Proxies to the foundation's `getSelectedIndex()` and `setSelectedIndex()` methods.
+
+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.
+
+### Events
+
+Event Name | `event.detail` | Description
+--- | --- | ---
+`MDCList:action` | `{index: number}` | Indicates that a list item with the specified index has been activated.
+
 ## Usage within Web Frameworks
 
 If you are using a JavaScript framework, such as React or Angular, you can create a List for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).

packages/mdc-list/index.js

@@ -277,7 +277,7 @@ class MDCList extends MDCComponent {
         toggleEl.dispatchEvent(event);
       },
       notifyAction: (index) => {
-        this.emit(strings.ACTION_EVENT, index, /** shouldBubble */ true);
+        this.emit(strings.ACTION_EVENT, {index}, /** shouldBubble */ true);
       },
       isFocusInsideList: () => {
         return this.root_.contains(document.activeElement);

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

@@ -449,11 +449,12 @@ test('adapter#setCheckedCheckboxOrRadioAtIndex toggles the radio on list item',
 test('adapter#notifyAction emits action event', () => {
   const {component} = setupTest();
 
-  const handler = td.func('notifyActionHandler');
+  let detail = null;
+  const handler = (evt) => detail = evt.detail;
 
   component.listen(strings.ACTION_EVENT, handler);
   component.getDefaultFoundation().adapter_.notifyAction(3);
   component.unlisten(strings.ACTION_EVENT, handler);
 
-  td.verify(handler(td.matchers.anything()));
+  assert.deepEqual(detail, {index: 3});
 });