fix(a11y): aria-live directive announcing the same text multiple times

[crisbeto]

The CdkAriaLive directive uses a MutationObserver to monitor for DOM content changes and to announce them through the LiveAnnouncer. Since the MutationObserver also fires for things like attribute changes, the same text can be announced more than once. This is visible on the calendar where the same text is announced twice when changing views.

[devversion]

LGTM

[mmalerba]

I'm not sure about this, I could definitely see times when we would want to announce the same text twice in a row (e.g. if you have a list of some component that announces some text on focus and the user is tabbing through).

[crisbeto]

You wouldn't need to announce text on focus yourself since screen readers announce whatever focus lands on anyway. Another way we could avoid the issue is to debounce the content changes, or to clear the _previousAnnouncedText after a timeout.

[mmalerba]

Yeah I know that's not how we'd actually implement something like that, but the point is that I do think there are times we might want to announce the same text twice intentionally. Debouncing sounds like the best solution, or if that's too difficult then clearing the variable after a timeout.

[crisbeto]

Setting up the debouncing should be pretty easy (we just need to pipe another operator), but thinking through it again, I'm not sure how this would happen in practice. In order for somebody to trigger the callback manually for the same text, they would have to swap out the content with a clone or change an attribute that doesn't affect the text content at all. It would look something like this which seems impractical:

someEl.innerHTML = 'something';

// later on
someEl.innerHTML = 'something';

// or
someEl.setAttribute('something', true);

Also note that these changes are to the CdkAriaLive directive, not the LiveAnnouncer service.

[mmalerba]

Ahh, I missed that it was for the directive only. In that case its probably fine, since the whole point is to announce something when the content changes. Sorry for the confusion.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}