From 8f7c7cf482e832d8d59c43fb98316512656cde19 Mon Sep 17 00:00:00 2001
From: tinayuangao <tinagao@google.com>
Date: Mon, 4 Dec 2017 11:11:41 -0800
Subject: [PATCH] fix(list): fix role for list-item (#8767)

---
 src/demo-app/a11y/list/list-a11y.html                | 12 ++++++------
 src/lib/list/list.spec.ts                            |  4 ++--
 src/lib/list/list.ts                                 |  1 -
 .../list-overview/list-overview-example.html         |  6 +++---
 4 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/demo-app/a11y/list/list-a11y.html b/src/demo-app/a11y/list/list-a11y.html
index 70eea8b8410b..c5c45664a2df 100644
--- a/src/demo-app/a11y/list/list-a11y.html
+++ b/src/demo-app/a11y/list/list-a11y.html
@@ -3,7 +3,7 @@
     <h2> Seasoning </h2>
     <p>Showing a non-interactive list of seasonings.</p>
     <mat-list role="list">
-      <mat-list-item *ngFor="let item of items"> {{item}} </mat-list-item>
+      <mat-list-item role="listitem" *ngFor="let item of items"> {{item}} </mat-list-item>
     </mat-list>
   </section>
 
@@ -26,7 +26,7 @@ <h2>Messages</h2>
       message subject, and content of the message.
     </p>
     <mat-list role="list">
-      <mat-list-item *ngFor="let message of messages">
+      <mat-list-item role="listitem" *ngFor="let message of messages">
         <img mat-list-avatar [src]="message.image" [alt]="message.from">
         <h3 mat-line> {{message.from}} </h3>
         <p mat-line> {{message.subject}} </p>
@@ -39,8 +39,8 @@ <h3 mat-line> {{message.from}} </h3>
   <section>
     <h2>Seasoning</h2>
     <p>Showing a non-interactive list of seasonings with dense style.</p>
-    <mat-list dense>
-      <mat-list-item *ngFor="let item of items"> {{item}} </mat-list-item>
+    <mat-list role="list" dense>
+      <mat-list-item role="listitem" *ngFor="let item of items"> {{item}} </mat-list-item>
     </mat-list>
   </section>
 
@@ -49,14 +49,14 @@ <h2>Folders and notes for mailbox </h2>
     <p>Showing a list with two sections, "folders" and "notes".</p>
     <mat-list role="list">
       <h3 mat-subheader>Folders</h3>
-      <mat-list-item *ngFor="let folder of folders">
+      <mat-list-item role="listitem" *ngFor="let folder of folders">
         <mat-icon mat-list-icon>folder</mat-icon>
         <h4 mat-line>{{folder.name}}</h4>
         <p mat-line class="demo-secondary-text"> {{folder.updated}} </p>
       </mat-list-item>
       <mat-divider></mat-divider>
       <h3 mat-subheader>Notes</h3>
-      <mat-list-item *ngFor="let note of notes">
+      <mat-list-item role="listitem" *ngFor="let note of notes">
         <mat-icon mat-list-icgon>note</mat-icon>
         <h4 mat-line>{{note.name}}</h4>
         <p mat-line class="demo-secondary-text"> {{note.updated}} </p>
diff --git a/src/lib/list/list.spec.ts b/src/lib/list/list.spec.ts
index b7644f7e247c..b76d5fa17e0d 100644
--- a/src/lib/list/list.spec.ts
+++ b/src/lib/list/list.spec.ts
@@ -115,8 +115,8 @@ describe('MatList', () => {
 
     let list = fixture.debugElement.children[0];
     let listItem = fixture.debugElement.children[0].query(By.css('mat-list-item'));
-    expect(list.nativeElement.getAttribute('role')).toBeNull();
-    expect(listItem.nativeElement.getAttribute('role')).toBe('listitem');
+    expect(list.nativeElement.getAttribute('role')).toBeNull('Expect mat-list no role');
+    expect(listItem.nativeElement.getAttribute('role')).toBeNull('Expect mat-list-item no role');
   });
 
   it('should not show ripples for non-nav lists', () => {
diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts
index ab278121609d..621ab78cced6 100644
--- a/src/lib/list/list.ts
+++ b/src/lib/list/list.ts
@@ -119,7 +119,6 @@ export class MatListSubheaderCssMatStyler {}
   selector: 'mat-list-item, a[mat-list-item]',
   exportAs: 'matListItem',
   host: {
-    'role': 'listitem',
     'class': 'mat-list-item',
     '(focus)': '_handleFocus()',
     '(blur)': '_handleBlur()',
diff --git a/src/material-examples/list-overview/list-overview-example.html b/src/material-examples/list-overview/list-overview-example.html
index 9c416b76f0d3..c177f8712906 100644
--- a/src/material-examples/list-overview/list-overview-example.html
+++ b/src/material-examples/list-overview/list-overview-example.html
@@ -1,5 +1,5 @@
 <mat-list role="list">
-  <mat-list-item>Item 1</mat-list-item>
-  <mat-list-item>Item 2</mat-list-item>
-  <mat-list-item>Item 3</mat-list-item>
+  <mat-list-item role="listitem">Item 1</mat-list-item>
+  <mat-list-item role="listitem">Item 2</mat-list-item>
+  <mat-list-item role="listitem">Item 3</mat-list-item>
 </mat-list>