fix(selection-list): do not allow toggling disabled options (#12617)

* fix(selection-list): do not allow toggling disabled options

* Currently due to a misplaced `disabled` check in the selection list, users can toggle the state of a disabled `<mat-option>` by using the keyboard.

Fixes #12608

* Rename function

Author: devversion

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

@@ -211,6 +211,21 @@ describe('MatSelectionList without forms', () => {
       expect(ENTER_EVENT.defaultPrevented).toBe(true);
     });
 
+    it('should not be able to toggle a disabled option using SPACE', () => {
+      const testListItem = listOptions[1].nativeElement as HTMLElement;
+      const selectionModel = selectionList.componentInstance.selectedOptions;
+
+      expect(selectionModel.selected.length).toBe(0);
+
+      listOptions[1].componentInstance.disabled = true;
+
+      dispatchFakeEvent(testListItem, 'focus');
+      selectionList.componentInstance._keydown(createKeyboardEvent('keydown', SPACE, testListItem));
+      fixture.detectChanges();
+
+      expect(selectionModel.selected.length).toBe(0);
+    });
+
     it('should restore focus if active option is destroyed', () => {
       const manager = selectionList.componentInstance._keyManager;
 

src/lib/list/selection-list.ts

@@ -410,12 +410,9 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu
     switch (keyCode) {
       case SPACE:
       case ENTER:
-        if (!this.disabled) {
-          this._toggleSelectOnFocusedOption();
-
-          // Always prevent space from scrolling the page since the list has focus
-          event.preventDefault();
-        }
+        this._toggleFocusedOption();
+        // Always prevent space from scrolling the page since the list has focus
+        event.preventDefault();
         break;
       case HOME:
       case END:
@@ -434,7 +431,7 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu
 
     if ((keyCode === UP_ARROW || keyCode === DOWN_ARROW) && event.shiftKey &&
         manager.activeItemIndex !== previousFocusIndex) {
-      this._toggleSelectOnFocusedOption();
+      this._toggleFocusedOption();
     }
   }
 
@@ -492,14 +489,14 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu
     return this.options.filter(option => option.selected).map(option => option.value);
   }
 
-  /** Toggles the selected state of the currently focused option. */
-  private _toggleSelectOnFocusedOption(): void {
+  /** Toggles the state of the currently focused option if enabled. */
+  private _toggleFocusedOption(): void {
     let focusedIndex = this._keyManager.activeItemIndex;
 
     if (focusedIndex != null && this._isValidIndex(focusedIndex)) {
       let focusedOption: MatListOption = this.options.toArray()[focusedIndex];
 
-      if (focusedOption) {
+      if (focusedOption && !focusedOption.disabled) {
         focusedOption.toggle();
 
         // Emit a change event because the focused option changed its state through user