feat(list): Update selection -> activation

demos/list.html

@@ -1137,7 +1137,7 @@ <h3>Example - Interactive List</h3>
           list.wrapFocus = true;
 
           if (ele.parentElement.classList.contains('hero')) {
-            list.singleSelection = true;
+            list.singleActivation = true;
           }
         });
 

packages/mdc-list/README.md

@@ -131,9 +131,9 @@ OR
 </ul>
 ```
 
-### Single Selection List
+### Single Activation List
 
-MDC List can handle selecting/deselecting list elements based on click or keyboard action. When enabled, the `space` and `enter` keys (or `click` event) will trigger an 
+MDC List can handle activating/deactivating list elements based on click or keyboard action. When enabled, the `space` and `enter` keys (or `click` event) will trigger an 
 single list item to become activated or deactivated. 
 
 ```html
@@ -147,12 +147,12 @@ single list item to become activated or deactivated.
 ```js
 var listEle = document.getElementById('my-list');
 var list = new mdc.list.MDCList(listEle);
-list.singleSelection = true;
+list.singleActivation = true;
 ```
 
-#### Pre-selected list item
+#### Pre-activated list item
 
-When rendering the list with a pre-selected list item, the list item that needs to be selected should contain
+When rendering the list with a pre-activated list item, the list item that needs to be activated should contain
 the `mdc-list-item--activated` class and `aria-selected="true"` attribute before creating the list.
 
 ```html
@@ -166,7 +166,7 @@ the `mdc-list-item--activated` class and `aria-selected="true"` attribute before
 ```js
 var listEle = document.getElementById('my-list');
 var list = new mdc.list.MDCList(listEle);
-list.singleSelection = true;
+list.singleActivation = true;
 ```
 
 ## Style Customization
@@ -225,7 +225,7 @@ As the user navigates through the list, any `button` or `a` elements within the
 when the list item is not focused. When the list item receives focus, the child `button` and `a` elements will 
 receive `tabIndex="0"`. This allows for the user to tab through list item elements and then tab to the
 first element after the list. The `Arrow`, `Home`, and `End` keys should be used for navigating internal list elements.
-If `singleSelection=true`, the list will allow the user to use the `Space` or `Enter` keys to select or deselect
+If `singleActivation=true`, the list will allow the user to use the `Space` or `Enter` keys to select or deselect
 a list item. The MDCList will perform the following actions for each key press
 
 Key | Action
@@ -236,16 +236,16 @@ Key | Action
 `ArrowRight` | When the list is in a horizontal orientation (default), it will cause the next list item to receive focus.
 `Home` | Will cause the first list item in the list to receive focus.
 `End` | Will cause the last list item in the list to receive focus.
-`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`.
+`Space` | Will cause the currently focused list item to become activated/deactivated if `singleActivation=true`.
+`Enter` | Will cause the currently focused list item to become activated/deactivated if `singleActivation=true`.
 
 ## 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).
 
 ### Considerations for Advanced Approach
 
-The `MDCListFoundation` expects the HTML to be setup a certain way before being used. This setup is a part of the `layout()` and `singleSelection()` functions within the `index.js`.
+The `MDCListFoundation` expects the HTML to be setup a certain way before being used. This setup is a part of the `layout()` and `singleActivation()` functions within the `index.js`.
 
 #### Setup in `layout()`
 
@@ -264,12 +264,12 @@ these should also receive `tabIndex="-1"`.
 </ul>
 ```
 
-#### Setup in `singleSelection()`
+#### Setup in `singleActivation`
 
 When implementing a component that will use the single selection variant, the HTML should be modified to include
 the `aria-selected` attribute, the `mdc-list-item--activated` class should be added, and the `tabindex` of the activated
 element should be `0`. The first list item should have the `tabindex` updated to `-1`. The foundation method 
-`setSelectedIndex()` should be called with the initially activated element immediately after the foundation is 
+`setActivatedIndex()` should be called with the initially activated element immediately after the foundation is 
 instantiated.
 
 ```html
@@ -301,7 +301,7 @@ 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 `activated` state of the list item at index `index`. 
+`setActivatedIndex(index: Number) => void` | Toggles the `activated` state of the list item at index `index`. 
 `setUseSelectedClass(useSelected: boolean) => void` | Sets the selection logic to apply/remove the `mdc-list-item--selected` class.
 `handleFocusIn(evt: Event) => void` | Handles the changing of `tabindex` to `0` for all `button` and `a` elements when a list item receives focus. 
 `handleFocusOut(evt: Event) => void` | Handles the changing of `tabindex` to `-1` for all `button` and `a` elements when a list item loses focus.

packages/mdc-list/foundation.js

@@ -62,7 +62,7 @@ class MDCListFoundation extends MDCFoundation {
     /** {boolean} */
     this.isSingleSelectionList_ = false;
     /** {number} */
-    this.selectedIndex_ = -1;
+    this.activatedIndex_ = -1;
     /** {boolean} */
     this.useSelectedClass_ = false;
   }
@@ -87,7 +87,7 @@ class MDCListFoundation extends MDCFoundation {
    * Sets the isSingleSelectionList_ private variable.
    * @param {boolean} value
    */
-  setSingleSelection(value) {
+  setSingleActivation(value) {
     this.isSingleSelectionList_ = value;
   }
 
@@ -100,27 +100,27 @@ class MDCListFoundation extends MDCFoundation {
   }
 
   /** @param {number} index */
-  setSelectedIndex(index) {
-    if (index === this.selectedIndex_) {
+  setActivatedIndex(index) {
+    if (index === this.activatedIndex_) {
       return;
     }
 
     const className = this.useSelectedClass_
       ? cssClasses.LIST_ITEM_SELECTED_CLASS : cssClasses.LIST_ITEM_ACTIVATED_CLASS;
 
-    if (this.selectedIndex_ >= 0) {
-      this.adapter_.removeAttributeForElementIndex(this.selectedIndex_, strings.ARIA_SELECTED);
-      this.adapter_.removeClassForElementIndex(this.selectedIndex_, className);
-      this.adapter_.setAttributeForElementIndex(this.selectedIndex_, 'tabindex', -1);
+    if (this.activatedIndex_ >= 0) {
+      this.adapter_.removeAttributeForElementIndex(this.activatedIndex_, strings.ARIA_SELECTED);
+      this.adapter_.removeClassForElementIndex(this.activatedIndex_, className);
+      this.adapter_.setAttributeForElementIndex(this.activatedIndex_, 'tabindex', -1);
     }
 
     if (index >= 0 && this.adapter_.getListItemCount() > index) {
-      this.selectedIndex_ = index;
-      this.adapter_.setAttributeForElementIndex(this.selectedIndex_, strings.ARIA_SELECTED, true);
-      this.adapter_.addClassForElementIndex(this.selectedIndex_, className);
-      this.adapter_.setAttributeForElementIndex(this.selectedIndex_, 'tabindex', 0);
+      this.activatedIndex_ = index;
+      this.adapter_.setAttributeForElementIndex(this.activatedIndex_, strings.ARIA_SELECTED, true);
+      this.adapter_.addClassForElementIndex(this.activatedIndex_, className);
+      this.adapter_.setAttributeForElementIndex(this.activatedIndex_, 'tabindex', 0);
 
-      if (this.selectedIndex_ !== 0) {
+      if (this.activatedIndex_ !== 0) {
         this.adapter_.setAttributeForElementIndex(0, 'tabindex', -1);
       }
     }
@@ -197,7 +197,7 @@ class MDCListFoundation extends MDCFoundation {
       this.preventDefaultEvent_(evt);
       // Check if the space key was pressed on the list item or a child element.
       if (this.adapter_.isListItem(evt.target)) {
-        this.setSelectedIndex(currentIndex);
+        this.setActivatedIndex(currentIndex);
       }
     }
   }
@@ -210,7 +210,7 @@ class MDCListFoundation extends MDCFoundation {
 
     if (currentIndex === -1) return;
 
-    this.setSelectedIndex(currentIndex);
+    this.setActivatedIndex(currentIndex);
   }
 
   /**

packages/mdc-list/index.js

@@ -93,19 +93,19 @@ class MDCList extends MDCComponent {
     this.foundation_.setWrapFocus(value);
   }
 
-  /** @param {boolean} isSingleSelectionList */
-  set singleSelection(isSingleSelectionList) {
-    if (isSingleSelectionList) {
+  /** @param {boolean} isSingleActivationList */
+  set singleActivation(isSingleActivationList) {
+    if (isSingleActivationList) {
       this.root_.addEventListener('click', this.handleClick_);
     } else {
       this.root_.removeEventListener('click', this.handleClick_);
     }
 
-    this.foundation_.setSingleSelection(isSingleSelectionList);
-    const selectedElement = this.root_.querySelector('.mdc-list-item--selected');
+    this.foundation_.setSingleActivation(isSingleActivationList);
+    const activatedElement = this.root_.querySelector('.mdc-list-item--activated');
 
-    if (selectedElement) {
-      this.selectedIndex = this.listElements_.indexOf(selectedElement);
+    if (activatedElement) {
+      this.activatedIndex = this.listElements_.indexOf(activatedElement);
     }
   }
 
@@ -115,8 +115,8 @@ class MDCList extends MDCComponent {
   }
 
   /** @param {number} index */
-  set selectedIndex(index) {
-    this.foundation_.setSelectedIndex(index);
+  set activatedIndex(index) {
+    this.foundation_.setActivatedIndex(index);
   }
 
   /** @return {!MDCListFoundation} */