What are the basics of using Drupal.announce() in practice?

[cfbauer]

Here's the documentation on Drupal.org:

Many page updates are expressed visually through color changes and animations. In order to make page updates apparent in a non-visual way, Drupal provides the Drupal.announce JavaScript method. This method creates an aria-live element on the page. Text appended to this node is read by a screen-reading user agent.

Drupal.announce accepts a string to be read by an audio UA. You can also set a second parameter: the priority. Here are a couple examples:

Drupal.announce(
  Drupal.t('You look beautiful today.')
);
Drupal.announce(
  Drupal.t('Please fill in your user name'),
  'assertive'
);

I'd love to see some real world examples!

[dmundra]

Found one post on the Drupal.announce() https://thinkshout.com/blog/2020/11/screen-readers/ that provided an example with using and how it works without using it.

[mgifford]

This posed an interesting discussion @cfbauer. Thanks for asking it here.

My first reaction was to want to grep -r 'Drupal.announce(' and see what interesting stuff I could pull out. Also looking at the Drupal.org issue queue.

But would be good to have some more direction for sure. Maybe we should write some clear instructions for Drupal 10?

@dmundra thanks for the ThinkShout article.