fix(selection-list): incorrect cursor if disabled

* Currently if a list option is disabled through the `[disabled]` binding, the disabled option still has the `pointer` cursor.
* Fixes that list options are still focusable if disabled.
* Fixes that the selection list is still focusable if disabled.

Fixes #9952

Author: devversion

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

@@ -109,7 +109,8 @@ <h2>Selection list</h2>
 
     <mat-selection-list #groceries [ngModel]="selectedOptions"
                         (ngModelChange)="onSelectedOptionsChange($event)"
-                        (change)="changeEventCount = changeEventCount + 1">
+                        (change)="changeEventCount = changeEventCount + 1"
+                        [disabled]="selectionListDisabled">
       <h3 mat-subheader>Groceries</h3>
 
       <mat-list-option value="bananas" checkboxPosition="before">Bananas</mat-list-option>
@@ -121,6 +122,7 @@ <h3 mat-subheader>Groceries</h3>
     <p>Selected: {{selectedOptions | json}}</p>
     <p>Change Event Count {{changeEventCount}}</p>
     <p>Model Change Event Count {{modelChangeEventCount}}</p>
+    <mat-checkbox [(ngModel)]="selectionListDisabled">Disable Selection List</mat-checkbox>
 
     <p>
       <button mat-raised-button (click)="groceries.selectAll()">Select all</button>

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

@@ -59,6 +59,7 @@ export class ListDemo {
 
   thirdLine: boolean = false;
   infoClicked: boolean = false;
+  selectionListDisabled: boolean = false;
 
   selectedOptions: string[] = ['apples'];
   changeEventCount: number = 0;

src/lib/list/list.scss

@@ -254,7 +254,7 @@ $mat-list-item-inset-divider-offset: 72px;
 }
 
 .mat-list-option {
-  &:not([disabled]) {
+  &:not(.mat-list-item-disabled) {
     cursor: pointer;
   }
 }

src/lib/list/selection-list.spec.ts

@@ -522,6 +522,14 @@ describe('MatSelectionList without forms', () => {
 
       expect(listOptionEl.classList).toContain('mat-list-item-disabled');
     });
+
+    it('should remove the tabindex attribute', () => {
+      listOption.disabled = true;
+      fixture.detectChanges();
+
+      expect(listOptionEl.hasAttribute('tabindex')).toBe(false,
+        'Expected tabindex attribute to be removed if option is disabled.');
+    });
   });
 
   describe('with list disabled', () => {
@@ -564,6 +572,11 @@ describe('MatSelectionList without forms', () => {
 
       expect(selectList.selected.length).toBe(0);
     });
+
+    it('should remove the tabindex attribute', () => {
+      expect(selectionList.nativeElement.hasAttribute('tabindex')).toBe(false,
+        'Expected tabindex attribute to be removed if selection list is disabled.');
+    });
   });
 
   describe('with checkbox position after', () => {

src/lib/list/selection-list.ts

@@ -97,11 +97,11 @@ export class MatSelectionListChange {
     '(focus)': '_handleFocus()',
     '(blur)': '_handleBlur()',
     '(click)': '_handleClick()',
-    'tabindex': '-1',
     '[class.mat-list-item-disabled]': 'disabled',
     '[class.mat-list-item-focus]': '_hasFocus',
     '[attr.aria-selected]': 'selected.toString()',
     '[attr.aria-disabled]': 'disabled.toString()',
+    '[attr.tabindex]': 'disabled ? null : -1'
   },
   templateUrl: 'list-option.html',
   encapsulation: ViewEncapsulation.None,
@@ -278,12 +278,13 @@ export class MatListOption extends _MatListOptionMixinBase
   inputs: ['disabled', 'disableRipple', 'tabIndex'],
   host: {
     'role': 'listbox',
-    '[tabIndex]': 'tabIndex',
     'class': 'mat-selection-list',
     '(focus)': 'focus()',
     '(blur)': '_onTouched()',
     '(keydown)': '_keydown($event)',
-    '[attr.aria-disabled]': 'disabled.toString()'},
+    '[attr.aria-disabled]': 'disabled.toString()',
+    '[attr.tabindex]': 'disabled ? null : tabIndex',
+  },
   template: '<ng-content></ng-content>',
   styleUrls: ['list.css'],
   encapsulation: ViewEncapsulation.None,