Add MdNavList

Author: tinayuangao

src/demo-app/a11y/list/list-a11y.html

@@ -10,18 +10,13 @@ <h2> Seasoning </h2>
 
   <section>
     <h2>Mailbox navigation</h2>
-    <p>Showing a navigation list with links to google search, and "more information" icon button</p>
+    <p>Showing a navigation list with links to google search</p>
     <md-nav-list>
-      <md-list-item *ngFor="let link of links">
-        <a md-line href="https://www.google.com/search?q={{link.name}}">{{ link.name }}</a>
-        <button md-icon-button aria-label="Show info" (click)="showInfo(link.name)">
-          <md-icon>info</md-icon>
-        </button>
-      </md-list-item>
+      <a md-list-item *ngFor="let link of links"
+         href="https://www.google.com/search?q={{link.name}}">
+        {{link.name}}
+      </a>
     </md-nav-list>
-    <div *ngIf="infoClicked">
-      More information about {{infoClicked}}!
-    </div>
   </section>
 
   <section>

src/demo-app/a11y/list/list-a11y.ts

@@ -13,8 +13,6 @@ export class ListAccessibilityDemo {
     'Paprika'
   ];
 
-  infoClicked: string | undefined;
-
   messages: any[] = [
     {
       from: 'Nancy',
@@ -54,12 +52,4 @@ export class ListAccessibilityDemo {
     {name: 'Update screenshots', updated: 'Kara'},
     {name: 'Install new application', updated: 'Andrew'},
   ];
-
-  showInfo(name: string) {
-    if (this.infoClicked === name) {
-      this.infoClicked = undefined;
-    } else {
-      this.infoClicked = name;
-    }
-  }
 }

src/lib/list/index.ts

@@ -13,6 +13,7 @@ import {
   MdList,
   MdListItem,
   MdListDivider,
+  MdNavList,
   MdListAvatarCssMatStyler,
   MdListIconCssMatStyler,
   MdListCssMatStyler,
@@ -29,6 +30,7 @@ import {MdSelectionList, MdListOption} from './selection-list';
     MdList,
     MdListItem,
     MdListDivider,
+    MdNavList,
     MdListAvatarCssMatStyler,
     MdLineModule,
     MdCommonModule,
@@ -45,6 +47,7 @@ import {MdSelectionList, MdListOption} from './selection-list';
     MdList,
     MdListItem,
     MdListDivider,
+    MdNavList,
     MdListAvatarCssMatStyler,
     MdListIconCssMatStyler,
     MdListCssMatStyler,

src/lib/list/list.md

@@ -141,3 +141,13 @@ To add a divider, use `<md-divider>`.
    </md-list-item>
 </md-list>
 ```
+
+### Accessibility
+By default, the list assumes that it will be used in a purely decorative fashion and thus sets no
+roles, ARIA attributes, or keyboard shortcuts.
+This is equivalent to having a sequence of <div> elements on the page. Any interactive content
+within the grid-list should be given an appropriate accessibility treatment based on the specific
+workflow of your application.
+
+If the list is used to present a list of non-interactive content items, then the list element should
+ be given `role="list"` and each tile should be given `role="listitem"`.

src/lib/list/list.ts

@@ -42,10 +42,22 @@ export const _MdListItemMixinBase = mixinDisableRipple(MdListItemBase);
 })
 export class MdListDivider {}
 
+
+@Component({
+  moduleId: module.id,
+  selector: 'md-nav-list, mat-nav-list',
+  host: {'role': 'navigation'},
+  template: '<ng-content></ng-content>',
+  styleUrls: ['list.css'],
+  inputs: ['disableRipple'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MdNavList extends _MdListMixinBase implements CanDisableRipple {}
+
 @Component({
   moduleId: module.id,
-  selector: 'md-list, mat-list, md-nav-list, mat-nav-list',
-  host: {'role': 'list'},
+  selector: 'md-list, mat-list',
   template: '<ng-content></ng-content>',
   styleUrls: ['list.css'],
   inputs: ['disableRipple'],
@@ -146,9 +158,9 @@ export class MdListItem extends _MdListItemMixinBase implements AfterContentInit
   constructor(private _renderer: Renderer2,
               private _element: ElementRef,
               @Optional() private _list: MdList,
-              @Optional() navList: MdNavListCssMatStyler) {
+              @Optional() private _navList: MdNavList) {
     super();
-    this._isNavList = !!navList;
+    this._isNavList = !!_navList;
   }
 
   ngAfterContentInit() {
@@ -157,7 +169,7 @@ export class MdListItem extends _MdListItemMixinBase implements AfterContentInit
 
   /** Whether this list item should show a ripple effect when clicked.  */
   isRippleEnabled() {
-    return !this.disableRipple && this._isNavList && !this._list.disableRipple;
+    return !this.disableRipple && this._isNavList && !this._navList.disableRipple;
   }
 
   _handleFocus() {