fix(select): wrong option amount being read out by NVDA (#5181)

Fixes an issue that caused the wrong amount of options to be read out by NVDA. E.g. if the select has 3 options, NVDA reads out "<value> selected, 2 of 4". The issue seems to come from the fact that NVDA considers the trigger as one of the options, potentially because it's clickable.

Author: crisbeto

src/lib/select/select.html

@@ -1,4 +1,10 @@
-<div class="mat-select-trigger" cdk-overlay-origin (click)="toggle()" #origin="cdkOverlayOrigin" #trigger>
+<div
+  cdk-overlay-origin
+  class="mat-select-trigger"
+  aria-hidden="true"
+  (click)="toggle()"
+  #origin="cdkOverlayOrigin"
+  #trigger>
   <span
     class="mat-select-placeholder"
     [class.mat-floating-placeholder]="_selectionModel.hasValue()"

src/lib/select/select.spec.ts

@@ -1728,6 +1728,15 @@ describe('MdSelect', () => {
         expect(document.activeElement).toBe(select, 'Expected select element to be focused.');
       });
 
+      // Having `aria-hidden` on the trigger avoids issues where
+      // screen readers read out the wrong amount of options.
+      it('should set aria-hidden on the trigger element', () => {
+        const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
+
+        expect(trigger.getAttribute('aria-hidden'))
+            .toBe('true', 'Expected aria-hidden to be true when the select is open.');
+      });
+
     });
 
     describe('for options', () => {