feat(list): Add new adapter methods for accessibility (#1586)

Author: trimox

packages/drawer/drawer.ts

@@ -141,7 +141,7 @@ export class MdcDrawer implements AfterViewInit, OnDestroy {
   get dismissible(): boolean { return this.drawer === 'dismissible'; }
   get permanent(): boolean { return this.drawer === 'permanent'; }
 
-  createAdapter() {
+  private _createAdapter() {
     return {
       addClass: (className: string) => this._getHostElement().classList.add(className),
       removeClass: (className: string) => this._getHostElement().classList.remove(className),
@@ -186,7 +186,7 @@ export class MdcDrawer implements AfterViewInit, OnDestroy {
     isOpen(): boolean,
     handleKeydown(evt: KeyboardEvent): void,
     handleTransitionEnd(evt: TransitionEvent): void
-  } = new MDCDismissibleDrawerFoundation(this.createAdapter());
+  } = new MDCDismissibleDrawerFoundation(this._createAdapter());
 
   constructor(
     private _platform: Platform,
@@ -263,9 +263,9 @@ export class MdcDrawer implements AfterViewInit, OnDestroy {
     this._removeDrawerModifiers();
 
     if (this.modal) {
-      this._foundation = new MDCModalDrawerFoundation(this.createAdapter());
+      this._foundation = new MDCModalDrawerFoundation(this._createAdapter());
     } else {
-      this._foundation = new MDCDismissibleDrawerFoundation(this.createAdapter());
+      this._foundation = new MDCDismissibleDrawerFoundation(this._createAdapter());
     }
 
     if (!this.permanent) {

packages/list/list.ts

@@ -38,9 +38,7 @@ export class MdcListItemChange {
   moduleId: module.id,
   selector: '[mdcListGroup], mdc-list-group',
   exportAs: 'mdcListGroup',
-  host: {
-    'class': 'mdc-list-group'
-  },
+  host: { 'class': 'mdc-list-group' },
   template: `
   <h3 class="mdc-list-group__subheader" *ngIf="subheader">{{subheader}}</h3>
   <ng-content></ng-content>
@@ -57,9 +55,7 @@ export class MdcListGroup {
 @Directive({
   selector: '[mdcListGroupSubheader], mdc-list-group-subheader',
   exportAs: 'mdcListGroupSubheader',
-  host: {
-    'class': 'mdc-list-group__subheader'
-  }
+  host: { 'class': 'mdc-list-group__subheader' }
 })
 export class MdcListGroupSubheader {
   constructor(public elementRef: ElementRef) { }
@@ -211,22 +207,30 @@ export class MdcList implements AfterViewInit, OnDestroy {
           listItem.getListItemElement().click();
         }
       },
-      toggleCheckbox: (index: number) => {
-        let checkboxOrRadioExists = false;
-        const listItem = this._listItems.toArray()[index];
-        const elementsToToggle = [].slice.call(listItem.getListItemElement().querySelectorAll(strings.CHECKBOX_RADIO_SELECTOR));
-        elementsToToggle.forEach((element: any) => {
+      hasCheckboxAtIndex: (index: number) => {
+        const listItem = this._listItems.toArray()[index].getListItemElement();
+        return !!listItem.querySelector(strings.CHECKBOX_SELECTOR);
+      },
+      hasRadioAtIndex: (index: number) => {
+        const listItem = this._listItems.toArray()[index].getListItemElement();
+        return !!listItem.querySelector(strings.RADIO_SELECTOR);
+      },
+      isCheckboxCheckedAtIndex: (index: number) => {
+        const listItem = this._listItems.toArray()[index].getListItemElement();
+        const toggleEl = listItem.querySelector(strings.CHECKBOX_SELECTOR);
+        return toggleEl.checked;
+      },
+      setCheckedCheckboxOrRadioAtIndex: (index: number, isChecked: boolean) => {
+        const listItem = this._listItems.toArray()[index].getListItemElement();
+        const toggleEl = listItem.querySelector(strings.CHECKBOX_RADIO_SELECTOR);
+        toggleEl.checked = isChecked;
+
+        if (this._platform.isBrowser) {
           const event = document.createEvent('Event');
           event.initEvent('change', true, true);
-
-          if (!element.checked || element.type !== 'radio') {
-            element.checked = !element.checked;
-            element.dispatchEvent(event);
-          }
-          checkboxOrRadioExists = true;
-        });
-        return checkboxOrRadioExists;
-      },
+          toggleEl.dispatchEvent(event);
+        }
+      }
     };
   }