fix: role="timer" with aria-live should announce (#179)

AriPerkkio · Mar 18, 2024 · e8961ee · e8961ee
1 parent 0761c7d
commit e8961ee
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 1 deletion.
diff --git a/src/utils.ts b/src/utils.ts
@@ -81,8 +81,11 @@ export function isHidden(node: Node): boolean {
     }
 
     const role = element.getAttribute('role');
+    const ariaLive = element.getAttribute('aria-live');
     if (role === 'marquee' || role === 'timer') {
-        return true;
+        if (ariaLive !== 'polite' && ariaLive !== 'assertive') {
+            return true;
+        }
     }
 
     return queries.closest(element, HIDDEN_QUERY) != null;

diff --git a/test/capture-announcements.test.ts b/test/capture-announcements.test.ts
@@ -452,6 +452,31 @@ describe.each(OFF_CASES)('$testName', ({ name, value }) => {
     });
 });
 
+describe('[role="timer"]', () => {
+    let cleanup: undefined | ReturnType<typeof CaptureAnnouncements>;
+    const onCapture = vi.fn();
+
+    afterEach(() => {
+        cleanup?.();
+        onCapture.mockReset();
+    });
+
+    beforeEach(() => {
+        cleanup = CaptureAnnouncements({ onCapture });
+    });
+
+    test('should announce when aria-live is set', () => {
+        const liveRegion = document.createElement('div');
+        liveRegion.setAttribute('role', 'timer');
+        liveRegion.setAttribute('aria-live', 'assertive');
+
+        appendToRoot(liveRegion);
+        liveRegion.textContent = 'Hello world';
+
+        expect(onCapture).toHaveBeenCalledWith('Hello world', 'assertive');
+    });
+});
+
 describe('common', () => {
     let element: HTMLElement;
     let cleanup: undefined | ReturnType<typeof CaptureAnnouncements>;

diff --git a/test/utils.test.ts b/test/utils.test.ts
@@ -418,6 +418,14 @@ describe('isHidden', () => {
         expect(isHidden(element)).toBe(true);
     });
 
+    test('element with role="timer" and aria-live="assertive" is not hidden', () => {
+        const element = document.createElement('div');
+        element.setAttribute('role', 'timer');
+        element.setAttribute('aria-live', 'assertive');
+
+        expect(isHidden(element)).toBe(false);
+    });
+
     test('element with role="status" is visible', () => {
         const element = document.createElement('div');
         element.setAttribute('role', 'status');