timeout

rossrobino · Feb 11, 2025 · 8a276c5 · 8a276c5
1 parent d0aed6a
commit 8a276c5
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 15 deletions.
diff --git a/apps/docs/src/pages/docs/generated/classes/announcer.md b/apps/docs/src/pages/docs/generated/classes/announcer.md
@@ -1,4 +1,4 @@
-Defined in: [announcer/index.ts:34](https://github.com/rossrobino/components/blob/main/packages/drab/src/announcer/index.ts#L34)
+Defined in: [announcer/index.ts:32](https://github.com/rossrobino/components/blob/main/packages/drab/src/announcer/index.ts#L32)
 
 Use the `Announcer` element to create a visually hidden ARIA live region
 that announces content changes to screen readers.
@@ -7,12 +7,10 @@ It's recommended to create this element with JavaScript using the `Announcer.ini
 then you can reuse the same announcer throughout the application to avoid duplicate
 regions (see below).
 
-`aria-live`
+`role`
 
 By default, the announcer is created with the
-[`polite` ARIA live attribute](https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-1/#1.-using-the-aria-live-attribute).
-You can also specify a different live attribute by setting the `aria-live` attribute with
-HTML or JavaScript.
+[`status` ARIA role](https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-1/#2.-using-live-region-roles).
 
 ## Example
 
@@ -42,7 +40,7 @@ announcer.announce("message");
 
 > **new Announcer**(): [`Announcer`](/elements/announcer/)
 
-Defined in: [announcer/index.ts:35](https://github.com/rossrobino/components/blob/main/packages/drab/src/announcer/index.ts#L35)
+Defined in: [announcer/index.ts:33](https://github.com/rossrobino/components/blob/main/packages/drab/src/announcer/index.ts#L33)
 
 #### Returns
 
@@ -60,7 +58,7 @@ Defined in: [announcer/index.ts:35](https://github.com/rossrobino/components/blo
 
 > **announce**(`message`): `void`
 
-Defined in: [announcer/index.ts:56](https://github.com/rossrobino/components/blob/main/packages/drab/src/announcer/index.ts#L56)
+Defined in: [announcer/index.ts:54](https://github.com/rossrobino/components/blob/main/packages/drab/src/announcer/index.ts#L54)
 
 #### Parameters
 
@@ -82,7 +80,7 @@ message to announce to screen readers
 
 > **connectedCallback**(): `void`
 
-Defined in: [announcer/index.ts:39](https://github.com/rossrobino/components/blob/main/packages/drab/src/announcer/index.ts#L39)
+Defined in: [announcer/index.ts:37](https://github.com/rossrobino/components/blob/main/packages/drab/src/announcer/index.ts#L37)
 
 #### Returns
 
@@ -96,7 +94,7 @@ Defined in: [announcer/index.ts:39](https://github.com/rossrobino/components/blo
 
 > `static` **init**(): [`Announcer`](/elements/announcer/)
 
-Defined in: [announcer/index.ts:70](https://github.com/rossrobino/components/blob/main/packages/drab/src/announcer/index.ts#L70)
+Defined in: [announcer/index.ts:65](https://github.com/rossrobino/components/blob/main/packages/drab/src/announcer/index.ts#L65)
 
 Helper method to create a new `Announcer` element named `drab-announcer`
 and append the element to the `<body>` tag. If an announcer already exists

diff --git a/packages/drab/src/announcer/index.ts b/packages/drab/src/announcer/index.ts
@@ -2,18 +2,20 @@ import { define } from "../util/define.js";
 
 /**
  * Use the `Announcer` element to create a visually hidden ARIA live region
- * that announces content changes to screen readers.
+ * that announces content changes to screen readers. Use this element when you
+ * need to announce changes to screen readers that something has changed. If changed
+ * element is visible on the page, add the appropriate ARIA live attribute to the
+ * visible element instead of using this announcer.
  *
  * It's recommended to create this element with JavaScript using the `Announcer.init` method,
- * then you can reuse the same announcer throughout the application to avoid duplicate
- * regions (see below).
+ * then you can reuse the same announcer throughout the application to
+ * [avoid duplicate regions](https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/#limit-the-number-of-live-regions-on-the-page)
+ * (see below).
  *
  * `aria-live`
  *
  * By default, the announcer is created with the
  * [`polite` ARIA live attribute](https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-1/#1.-using-the-aria-live-attribute).
- * You can also specify a different live attribute by setting the `aria-live` attribute with
- * HTML or JavaScript.
  *
  * @example
  *
@@ -54,10 +56,13 @@ export class Announcer extends HTMLElement {
 	 * @param message message to announce to screen readers
 	 */
 	announce(message: string) {
+		// this ensures multiple messages will be read in succession
 		const span = document.createElement("span");
 		span.textContent = message;
-
 		this.append(span);
+
+		// https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/#empty-the-live-region-and-wait-a-bit-in-between-updates
+		setTimeout(() => span.remove(), 10000);
 	}
 
 	/**