feat(option): add Input to remove aria-selected='false'

Add an Input to optionally remove the aria-selected attribute from unselected options.
The default behavior is unchanged. Motivation: the screen reader NVDA announces 'not selected'
on any element that has aria-selected='false', which is disruptive when a user is navigating
through a long list of options. The W3 aria best practices example only uses aria-selected='true',
false is implicit:
https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html

Author: vanessanschmitt

src/lib/core/option/option.spec.ts

@@ -187,7 +187,44 @@ describe('MatOption component', () => {
       expect(optionNativeElement.querySelectorAll('.mat-ripple-element').length)
         .toBe(0, 'Expected no ripples to show up after click on a disabled option.');
     });
+  });
+
+  describe('aria attributes', () => {
+    let fixture: ComponentFixture<BasicOption>;
+    let optionNativeElement: HTMLElement;
+    let optionInstance: MatOption;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(BasicOption);
+      fixture.detectChanges();
+
+      const optionDebugElement = fixture.debugElement.query(By.directive(MatOption));
+      optionNativeElement = optionDebugElement.nativeElement;
+      optionInstance = optionDebugElement.componentInstance;
+    });
+
+    it('should toggle aria-selected between true and false by default', () => {
+      expect(optionNativeElement.getAttribute('aria-selected')).toBe('false');
+      optionInstance.select();
+      fixture.detectChanges();
+      expect(optionNativeElement.getAttribute('aria-selected')).toBe('true');
+      optionInstance.deselect();
+      fixture.detectChanges();
+      expect(optionNativeElement.getAttribute('aria-selected')).toBe('false');
+    });
 
+    it('should toggle aria-selected between true and null when specified',
+      () => {
+        optionInstance.disableAriaSelectedExplicitFalse = true;
+        fixture.detectChanges();
+        expect(optionNativeElement.getAttribute('aria-selected')).toBe(null);
+        optionInstance.select();
+        fixture.detectChanges();
+        expect(optionNativeElement.getAttribute('aria-selected')).toBe('true');
+        optionInstance.deselect();
+        fixture.detectChanges();
+        expect(optionNativeElement.getAttribute('aria-selected')).toBe(null);
+      });
   });
 
 });

src/lib/core/option/option.ts

@@ -72,7 +72,7 @@ export const MAT_OPTION_PARENT_COMPONENT =
     '[class.mat-option-multiple]': 'multiple',
     '[class.mat-active]': 'active',
     '[id]': 'id',
-    '[attr.aria-selected]': 'selected.toString()',
+    '[attr.aria-selected]': '_getAriaSelected()',
     '[attr.aria-disabled]': 'disabled.toString()',
     '[class.mat-option-disabled]': 'disabled',
     '(click)': '_selectViaInteraction()',
@@ -102,6 +102,12 @@ export class MatOption implements AfterViewChecked, OnDestroy {
   /** The unique ID of the option. */
   @Input() id: string = `mat-option-${_uniqueIdCounter++}`;
 
+  /**
+   * Whether to remove the aria-selected attribute when the option is not selected. Default is
+   * explicitly setting aria-selected='false'.
+   */
+  @Input() disableAriaSelectedExplicitFalse = false;
+
   /** Whether the option is disabled. */
   @Input()
   get disabled() { return (this.group && this.group.disabled) || this._disabled; }
@@ -220,6 +226,11 @@ export class MatOption implements AfterViewChecked, OnDestroy {
     }
   }
 
+  /** Returns the aria-selected value for the option, which can be 'true', 'false', or null. */
+  _getAriaSelected(): string|null {
+    return !this.selected && this.disableAriaSelectedExplicitFalse ? null : this.selected.toString();
+  }
+
   /** Returns the correct tabindex for the option depending on disabled state. */
   _getTabIndex(): string {
     return this.disabled ? '-1' : '0';