feat(list): Add focusItemAtIndex (#1558)

Sets focus (not selection) to the element at the given index in a list.

- Adds `focusItemAtIndex(index: number)`
- Update documentation
- Include unit test

Closes #1557

Author: trimox

demos/components/list-demo/list-demo.html

@@ -125,6 +125,10 @@ <h2>Design & API Documentation</h2>
             <td>getSelectedIndex(): number</td>
             <td>Returns the currently selected item index.</td>
           </tr>
+          <tr>
+            <td>focusItemAtIndex(index: number)</td>
+            <td>Sets focus to the element at the given index in a list.</td>
+          </tr>
           <tr>
             <td>focusFirstElement()</td>
             <td>Sets focus to the first element in a list.</td>

packages/list/list.ts

@@ -199,7 +199,7 @@ export class MdcList implements AfterViewInit, OnDestroy {
         this._listItems.toArray()[index].getListItemElement().classList.add(className),
       removeClassForElementIndex: (index: number, className: string) =>
         this._listItems.toArray()[index].getListItemElement().classList.remove(className),
-      focusItemAtIndex: (index: number) => this._listItems.toArray()[index].getListItemElement().focus(),
+      focusItemAtIndex: (index: number) => this.focusItemAtIndex(index),
       setTabIndexForListItemChildren: (listItemIndex: number, tabIndexValue: number) => {
         const listItemChildren = [].slice.call(this._listItems.toArray()[listItemIndex].getListItemElement()
           .querySelectorAll(strings.CHILD_ELEMENTS_TO_TOGGLE_TABINDEX));
@@ -347,6 +347,10 @@ export class MdcList implements AfterViewInit, OnDestroy {
     return this._listItems.toArray().findIndex(_ => _.selected || _.activated);
   }
 
+  focusItemAtIndex(index: number): void {
+    this._listItems.toArray()[index].getListItemElement().focus();
+  }
+
   focusFirstElement(): void {
     this._foundation.focusFirstElement();
   }

test/list/list.test.ts

@@ -148,6 +148,14 @@ describe('MdcListModule', () => {
       fixture.detectChanges();
     });
 
+    it('#should set focus to list item index (0)', () => {
+      const listItemDebugElement = fixture.debugElement.query(By.directive(MdcListItem));
+
+      testInstance.focusItemAtIndex(0);
+      fixture.detectChanges();
+      expect(document.activeElement).toBe(listItemDebugElement.nativeElement, 'Expected focus to be on list item');
+    });
+
     it('#should set focus to list item', () => {
       const listItemDebugElement = fixture.debugElement.query(By.directive(MdcListItem));
       const listItemInstance = listItemDebugElement.injector.get<MdcListItem>(MdcListItem);