diff --git a/src/cdk/a11y/aria-describer/aria-describer.spec.ts b/src/cdk/a11y/aria-describer/aria-describer.spec.ts index aa3b932552d0..22e7dbea12c9 100644 --- a/src/cdk/a11y/aria-describer/aria-describer.spec.ts +++ b/src/cdk/a11y/aria-describer/aria-describer.spec.ts @@ -132,6 +132,13 @@ 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 not describe messages that match up with the aria-label of the element', () => { + component.element1.setAttribute('aria-label', 'Hello'); + ariaDescriber.describe(component.element1, 'Hello'); + ariaDescriber.describe(component.element1, 'Hi'); + expectMessages(['Hi']); + }); }); function getMessagesContainer() { diff --git a/src/cdk/a11y/aria-describer/aria-describer.ts b/src/cdk/a11y/aria-describer/aria-describer.ts index ae866c1e074d..10a6bbecc9fb 100644 --- a/src/cdk/a11y/aria-describer/aria-describer.ts +++ b/src/cdk/a11y/aria-describer/aria-describer.ts @@ -83,7 +83,7 @@ export class AriaDescriber implements OnDestroy { /** Removes the host element's aria-describedby reference to the message element. */ removeDescription(hostElement: Element, message: string) { - if (!this._canBeDescribed(hostElement, message)) { + if (!this._isElementNode(hostElement)) { return; } @@ -218,10 +218,22 @@ export class AriaDescriber implements OnDestroy { /** Determines whether a message can be described on a particular element. */ private _canBeDescribed(element: Element, message: string): boolean { - return element.nodeType === this._document.ELEMENT_NODE && message != null && - !!`${message}`.trim(); + if (!this._isElementNode(element)) { + return false; + } + + const trimmedMessage = message == null ? '' : `${message}`.trim(); + const ariaLabel = element.getAttribute('aria-label'); + + // We shouldn't set descriptions if they're exactly the same as the `aria-label` of the element, + // because screen readers will end up reading out the same text twice in a row. + return trimmedMessage ? (!ariaLabel || ariaLabel.trim() !== trimmedMessage) : false; } + /** Checks whether a node is an Element node. */ + private _isElementNode(element: Node): element is Element { + return element.nodeType === this._document.ELEMENT_NODE; + } }