fix(list): Accept array of index for selectedIndex API (#4124)

BREAKING CHANGE: Introduced new adapter `isFocusInsideList` for MDC List for improved accessibility.

Author: abhiomkar

packages/mdc-list/README.md

@@ -359,6 +359,8 @@ When rendering list with checkbox items all pre-selected list items should conta
 </ul>
 ```
 
+The `selectedIndex` (that proxies foundation's `setSelectedState()`) accepts list of indexes in array format for list with checkbox items to set the selection state. It overwrites the current state with new selected state.
+
 ## Style Customization
 
 ### CSS Classes
@@ -509,6 +511,7 @@ Method Signature | Description
 `hasCheckboxAtIndex(index: number) => boolean` | Returns true if checkbox is present at given list item index.
 `isCheckboxCheckedAtIndex(index: number) => boolean` | Returns true if checkbox inside a list item is checked.
 `setCheckedCheckboxOrRadioAtIndex(index: number, isChecked: boolean) => void` | Sets the checked status of checkbox or radio at given list item index.
+`isFocusInsideList() => boolean` | Returns true if the current focused element is inside list root.
 
 ### `MDCListFoundation`
 
@@ -517,13 +520,14 @@ Method Signature | Description
 `setWrapFocus(value: Boolean) => void` | Sets the list to allow the up arrow on the first element to focus the last element of the list and vice versa.
 `setVerticalOrientation(value: Boolean) => void` | Sets the list to an orientation causing the keys used for navigation to change. `true` results in the Up/Down arrow keys being used. `false` results in the Left/Right arrow keys being used.
 `setSingleSelection(value: Boolean) => void` | Sets the list to be a selection list. Enables the `enter` and `space` keys for selecting/deselecting a list item.
-`setSelectedIndex(index: Number) => void` | Toggles the `selected` state of the list item at index `index`.
+`getSelectedIndex() => Index` | Gets the current selection state by returning selected index or list of indexes for checkbox based list. See [constants.js](./constants.js) for `Index` type definition.
+`setSelectedIndex(index: Index) => void` | Sets the selection state to given index or list of indexes if it is checkbox based list. See [constants.js](./constants.js) for `Index` type definition.
 `setUseActivated(useActivated: boolean) => void` | Sets the selection logic to apply/remove the `mdc-list-item--activated` class.
 `handleFocusIn(evt: Event) => void` | Handles the changing of `tabindex` to `0` for all button and anchor elements when a list item receives focus.
 `handleFocusOut(evt: Event) => void` | Handles the changing of `tabindex` to `-1` for all button and anchor elements when a list item loses focus.
 `handleKeydown(evt: Event) => void` | Handles determining if a focus action should occur when a key event is triggered.
 `handleClick(evt: Event) => void` | Handles toggling the selected/deselected state for a list item when clicked. This method is only used by the single selection list.
-`focusNextElement(index: Number) => void` | Handles focusing the next element using the current `index`.
-`focusPrevElement(index: Number) => void` | Handles focusing the previous element using the current `index`.
-`focusFirstElement() => void` | Handles focusing the first element in a list.
-`focusLastElement() => void` | Handles focusing the last element in a list.
+`focusNextElement(index: number) => number` | Handles focusing the next element using the current `index`. Returns focused element index.
+`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.

packages/mdc-list/adapter.js

@@ -113,6 +113,11 @@ class MDCListAdapter {
    * @param {boolean} isChecked
    */
   setCheckedCheckboxOrRadioAtIndex(index, isChecked) {}
+
+  /**
+   * @return {boolean} Returns true when the current focused element is inside list root.
+   */
+  isFocusInsideList() {}
 }
 
 export default MDCListAdapter;

packages/mdc-list/constants.js

@@ -36,6 +36,8 @@ const strings = {
   ARIA_SELECTED: 'aria-selected',
   ARIA_CHECKED: 'aria-checked',
   ARIA_CHECKED_RADIO_SELECTOR: '[role="radio"][aria-checked="true"]',
+  ARIA_ROLE_CHECKBOX_SELECTOR: '[role="checkbox"]',
+  ARIA_CHECKED_CHECKBOX_SELECTOR: '[role="checkbox"][aria-checked="true"]',
   RADIO_SELECTOR: 'input[type="radio"]:not(:disabled)',
   CHECKBOX_SELECTOR: 'input[type="checkbox"]:not(:disabled)',
   CHECKBOX_RADIO_SELECTOR: 'input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled)',
@@ -47,4 +49,7 @@ const strings = {
   ENABLED_ITEMS_SELECTOR: '.mdc-list-item:not(.mdc-list-item--disabled)',
 };
 
-export {strings, cssClasses};
+/** @typedef {number|!Array<number>} */
+let Index;
+
+export {strings, cssClasses, Index};