feat(option): Remove aria-selected='false' in single-selection mode

Remove the aria-selected attribute from unselected options in single
selection mode. The multi-selection 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 for single selection', false is implicit:
https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html

Author: vanessanschmitt

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()',
@@ -220,6 +220,11 @@ export class MatOption implements AfterViewChecked, OnDestroy {
     }
   }
 
+  /** Returns the aria-selected value for the option. */
+  _getAriaSelected(): string|null {
+    return this.selected || this.multiple ? this.selected.toString() : null;
+  }
+
   /** Returns the correct tabindex for the option depending on disabled state. */
   _getTabIndex(): string {
     return this.disabled ? '-1' : '0';

src/lib/select/select.spec.ts

@@ -882,10 +882,10 @@ describe('MatSelect', () => {
           expect(options[2].getAttribute('role')).toEqual('option');
         }));
 
-        it('should set aria-selected on each option', fakeAsync(() => {
-          expect(options[0].getAttribute('aria-selected')).toEqual('false');
-          expect(options[1].getAttribute('aria-selected')).toEqual('false');
-          expect(options[2].getAttribute('aria-selected')).toEqual('false');
+        it('should set aria-selected on each option for single select',  fakeAsync(() => {
+          expect(options[0].getAttribute('aria-selected')).toEqual(null);
+          expect(options[1].getAttribute('aria-selected')).toEqual(null);
+          expect(options[2].getAttribute('aria-selected')).toEqual(null);
 
           options[1].click();
           fixture.detectChanges();
@@ -894,11 +894,41 @@ describe('MatSelect', () => {
           fixture.detectChanges();
           flush();
 
-          expect(options[0].getAttribute('aria-selected')).toEqual('false');
+          expect(options[0].getAttribute('aria-selected')).toEqual(null);
           expect(options[1].getAttribute('aria-selected')).toEqual('true');
-          expect(options[2].getAttribute('aria-selected')).toEqual('false');
+          expect(options[2].getAttribute('aria-selected')).toEqual(null);
         }));
 
+        it('should set aria-selected on each option for multi-select', fakeAsync(() => {
+          fixture.destroy();
+
+          const multiFixture = TestBed.createComponent(MultiSelect);
+          multiFixture.detectChanges();
+
+          trigger = multiFixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
+          trigger.click();
+          multiFixture.detectChanges();
+
+          options =
+              overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+
+           expect(options[0].getAttribute('aria-selected')).toEqual('false');
+           expect(options[1].getAttribute('aria-selected')).toEqual('false');
+           expect(options[2].getAttribute('aria-selected')).toEqual('false');
+
+           options[1].click();
+           multiFixture.detectChanges();
+
+           trigger.click();
+           multiFixture.detectChanges();
+           flush();
+
+           expect(options[0].getAttribute('aria-selected')).toEqual('false');
+           expect(options[1].getAttribute('aria-selected')).toEqual('true');
+           expect(options[2].getAttribute('aria-selected')).toEqual('false');
+        }));
+
+
         it('should set the tabindex of each option according to disabled state', fakeAsync(() => {
           expect(options[0].getAttribute('tabindex')).toEqual('0');
           expect(options[1].getAttribute('tabindex')).toEqual('0');