fix(aria-describer): messages not being read out in IE and Edge

Fixes the messages from the `AriaDescriber` not being read out in Edge or IE, because the message container is `aria-hidden` and has `display: none`.

Fixes #12298.

Author: crisbeto

src/cdk/a11y/aria-describer/aria-describer.spec.ts

@@ -1,55 +1,66 @@
 import {A11yModule, CDK_DESCRIBEDBY_HOST_ATTRIBUTE} from '../index';
 import {AriaDescriber, MESSAGES_CONTAINER_ID} from './aria-describer';
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {Component, ElementRef, ViewChild} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Component, ElementRef, ViewChild, Provider} from '@angular/core';
+import {Platform} from '@angular/cdk/platform';
 
 describe('AriaDescriber', () => {
   let ariaDescriber: AriaDescriber;
   let component: TestApp;
   let fixture: ComponentFixture<TestApp>;
 
-  beforeEach(async(() => {
+  function createFixture(providers: Provider[] = []) {
     TestBed.configureTestingModule({
       imports: [A11yModule],
       declarations: [TestApp],
-      providers: [AriaDescriber],
+      providers: [AriaDescriber, ...providers],
     }).compileComponents();
-  }));
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(TestApp);
     component = fixture.componentInstance;
     ariaDescriber = component.ariaDescriber;
-  });
+  }
 
   afterEach(() => {
     ariaDescriber.ngOnDestroy();
   });
 
   it('should initialize without the message container', () => {
+    createFixture();
     expect(getMessagesContainer()).toBeNull();
   });
 
   it('should be able to create a message element', () => {
+    createFixture();
     ariaDescriber.describe(component.element1, 'My Message');
     expectMessages(['My Message']);
   });
 
+  it('should hide the message container', () => {
+    createFixture();
+    ariaDescriber.describe(component.element1, 'My Message');
+    expect(getMessagesContainer().classList).toContain('cdk-visually-hidden');
+  });
+
   it('should not register empty strings', () => {
+    createFixture();
     ariaDescriber.describe(component.element1, '');
     expect(getMessageElements()).toBe(null);
   });
 
   it('should not register non-string values', () => {
+    createFixture();
     expect(() => ariaDescriber.describe(component.element1, null!)).not.toThrow();
     expect(getMessageElements()).toBe(null);
   });
 
   it('should not throw when trying to remove non-string value', () => {
+    createFixture();
     expect(() => ariaDescriber.removeDescription(component.element1, null!)).not.toThrow();
   });
 
   it('should de-dupe a message registered multiple times', () => {
+    createFixture();
     ariaDescriber.describe(component.element1, 'My Message');
     ariaDescriber.describe(component.element2, 'My Message');
     ariaDescriber.describe(component.element3, 'My Message');
@@ -60,6 +71,7 @@ describe('AriaDescriber', () => {
   });
 
   it('should be able to register multiple messages', () => {
+    createFixture();
     ariaDescriber.describe(component.element1, 'First Message');
     ariaDescriber.describe(component.element2, 'Second Message');
     expectMessages(['First Message', 'Second Message']);
@@ -68,6 +80,7 @@ describe('AriaDescriber', () => {
   });
 
   it('should be able to unregister messages', () => {
+    createFixture();
     ariaDescriber.describe(component.element1, 'My Message');
     expectMessages(['My Message']);
 
@@ -87,6 +100,7 @@ describe('AriaDescriber', () => {
   });
 
   it('should be able to unregister messages while having others registered', () => {
+    createFixture();
     ariaDescriber.describe(component.element1, 'Persistent Message');
     ariaDescriber.describe(component.element2, 'My Message');
     expectMessages(['Persistent Message', 'My Message']);
@@ -105,24 +119,28 @@ describe('AriaDescriber', () => {
   });
 
   it('should be able to append to an existing list of aria describedby', () => {
+    createFixture();
     ariaDescriber.describe(component.element4, 'My Message');
     expectMessages(['My Message']);
     expectMessage(component.element4, 'My Message');
   });
 
   it('should be able to handle multiple regisitrations of the same message to an element', () => {
+    createFixture();
     ariaDescriber.describe(component.element1, 'My Message');
     ariaDescriber.describe(component.element1, 'My Message');
     expectMessages(['My Message']);
     expectMessage(component.element1, 'My Message');
   });
 
   it('should not throw when attempting to describe a non-element node', () => {
+    createFixture();
     const node: any = document.createComment('Not an element node');
     expect(() => ariaDescriber.describe(node, 'This looks like an element')).not.toThrow();
   });
 
   it('should clear any pre-existing containers', () => {
+    createFixture();
     const extraContainer = document.createElement('div');
     extraContainer.id = MESSAGES_CONTAINER_ID;
     document.body.appendChild(extraContainer);
@@ -132,10 +150,28 @@ describe('AriaDescriber', () => {
     // Use `querySelectorAll` with an attribute since `getElementById` will stop at the first match.
     expect(document.querySelectorAll(`[id='${MESSAGES_CONTAINER_ID}']`).length).toBe(1);
   });
+
+  it('should set `aria-hidden` on the container by default', () => {
+    createFixture([{provide: Platform, useValue: {BLINK: true}}]);
+    ariaDescriber.describe(component.element1, 'My Message');
+    expect(getMessagesContainer().getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('should disable `aria-hidden` on the container in IE', () => {
+    createFixture([{provide: Platform, useValue: {TRIDENT: true}}]);
+    ariaDescriber.describe(component.element1, 'My Message');
+    expect(getMessagesContainer().getAttribute('aria-hidden')).toBe('false');
+  });
+
+  it('should disable `aria-hidden` on the container in Edge', () => {
+    createFixture([{provide: Platform, useValue: {EDGE: true}}]);
+    ariaDescriber.describe(component.element1, 'My Message');
+    expect(getMessagesContainer().getAttribute('aria-hidden')).toBe('false');
+  });
 });
 
 function getMessagesContainer() {
-  return document.querySelector(`#${MESSAGES_CONTAINER_ID}`);
+  return document.querySelector(`#${MESSAGES_CONTAINER_ID}`)!;
 }
 
 function getMessageElements(): Node[] | null {

src/cdk/a11y/aria-describer/aria-describer.ts

@@ -15,6 +15,7 @@ import {
   Optional,
   SkipSelf,
 } from '@angular/core';
+import {Platform} from '@angular/cdk/platform';
 import {addAriaReferencedId, getAriaReferenceIds, removeAriaReferencedId} from './aria-reference';
 
 
@@ -58,7 +59,12 @@ let messagesContainer: HTMLElement | null = null;
 export class AriaDescriber implements OnDestroy {
   private _document: Document;
 
-  constructor(@Inject(DOCUMENT) _document: any) {
+  constructor(
+    @Inject(DOCUMENT) _document: any,
+    /**
+     * @breaking-change 8.0.0 `_platform` parameter to be made required.
+     */
+    private _platform?: Platform) {
     this._document = _document;
   }
 
@@ -146,6 +152,8 @@ export class AriaDescriber implements OnDestroy {
   /** Creates the global container for all aria-describedby messages. */
   private _createMessagesContainer() {
     if (!messagesContainer) {
+      // @breaking-change 8.0.0 `_platform` null check can be removed once the parameter is required
+      const canBeAriaHidden = !this._platform || (!this._platform.EDGE && !this._platform.TRIDENT);
       const preExistingContainer = this._document.getElementById(MESSAGES_CONTAINER_ID);
 
       // When going from the server to the client, we may end up in a situation where there's
@@ -158,8 +166,13 @@ export class AriaDescriber implements OnDestroy {
 
       messagesContainer = this._document.createElement('div');
       messagesContainer.id = MESSAGES_CONTAINER_ID;
-      messagesContainer.setAttribute('aria-hidden', 'true');
-      messagesContainer.style.display = 'none';
+      messagesContainer.classList.add('cdk-visually-hidden');
+
+      // IE and Edge won't read out the messages if they're in an `aria-hidden` container.
+      // We only disable `aria-hidden` for these platforms, because it comes with the
+      // disadvantage that people might hit the messages when they've navigated past
+      // the end of the document using the arrow keys.
+      messagesContainer.setAttribute('aria-hidden', canBeAriaHidden + '');
       this._document.body.appendChild(messagesContainer);
     }
   }