From b8c900c3f57c2bab3d9e3453fbb302f73499f0f4 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 7 Jul 2017 18:58:54 +0200
Subject: [PATCH] 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.
---
 src/lib/select/select.html    | 8 +++++++-
 src/lib/select/select.spec.ts | 9 +++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/lib/select/select.html b/src/lib/select/select.html
index 0eb861f9c22f..870e7883606d 100644
--- a/src/lib/select/select.html
+++ b/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()"
diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
index 54ffa6c2785f..98d1e77d8982 100644
--- a/src/lib/select/select.spec.ts
+++ b/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', () => {