fix(a11y): remove aria-describedby attribute when no descriptions are left

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

@@ -226,6 +226,18 @@ describe('AriaDescriber', () => {
         'Expected description node to still be in the DOM after it is no longer being used.');
   });
 
+  it('should remove the aria-describedby attribute if there are no more messages', () => {
+    const element = component.element1;
+
+    expect(element.hasAttribute('aria-describedby')).toBe(false);
+
+    ariaDescriber.describe(component.element1, 'Message');
+    expect(element.hasAttribute('aria-describedby')).toBe(true);
+
+    ariaDescriber.removeDescription(component.element1, 'Message');
+    expect(element.hasAttribute('aria-describedby')).toBe(false);
+  });
+
 });
 
 function getMessagesContainer() {

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

@@ -62,7 +62,8 @@ describe('AriaReference', () => {
    * value
    */
   function expectIds(attr: string, ids: string[]) {
+    const value = testElement!.getAttribute(attr);
     expect(getAriaReferenceIds(testElement!, attr)).toEqual(ids);
-    expect(testElement!.getAttribute(attr)).toBe(ids.length ? ids.join(' ') : '');
+    ids.length ? expect(value).toBe(ids.join(' ')) : expect(value).toBeFalsy();
   }
 });

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

@@ -29,7 +29,11 @@ export function removeAriaReferencedId(el: Element, attr: string, id: string) {
   const ids = getAriaReferenceIds(el, attr);
   const filteredIds = ids.filter(val => val != id.trim());
 
-  el.setAttribute(attr, filteredIds.join(ID_DELIMINATOR));
+  if (filteredIds.length) {
+    el.setAttribute(attr, filteredIds.join(ID_DELIMINATOR));
+  } else {
+    el.removeAttribute(attr);
+  }
 }
 
 /**