fix: Add aria live announcer to code editor for errors and warnings (#…

…517)
cloudscape-design · Jan 16, 2023 · 79cb4fa · 79cb4fa
1 parent 1170826
commit 79cb4fa
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/src/code-editor/__tests__/code-editor.test.tsx b/src/code-editor/__tests__/code-editor.test.tsx
@@ -14,6 +14,7 @@ import {
 import { ElementWrapper } from '../../../lib/components/test-utils/dom';
 import styles from '../../../lib/components/code-editor/styles.css.js';
 import { warnOnce } from '../../../lib/components/internal/logging';
+import liveRegionStyles from '../../../lib/components/internal/components/live-region/styles.css.js';
 
 jest.mock('../../../lib/components/internal/logging', () => ({
   warnOnce: jest.fn(),
@@ -269,6 +270,17 @@ describe('Code editor component', () => {
     expect(item.getElement().textContent).toEqual(expect.stringContaining('Ln 1, Col 1'));
   });
 
+  it('sends annotation text to LiveRegion Component for a11y announcement', () => {
+    editorMock.session.getAnnotations.mockReturnValueOnce([{ type: 'error', row: 0, column: 0, text: 'error text' }]);
+    const { wrapper } = renderCodeEditor();
+    act(() => emulateAceAnnotationEvent!());
+
+    const liveRegion = wrapper.findStatusBar()?.find(`.${liveRegionStyles.root}`)?.getElement().innerHTML;
+
+    expect(liveRegion).toContain(defaultProps.i18nStrings.errorsTab);
+    expect(liveRegion).toContain(defaultProps.i18nStrings.warningsTab);
+  });
+
   it('moves cursor to annotation when clicked', () => {
     editorMock.session.getAnnotations.mockReturnValueOnce([{ type: 'error', row: 1, column: 1 }]);
     const { wrapper } = renderCodeEditor();

diff --git a/src/code-editor/status-bar.tsx b/src/code-editor/status-bar.tsx
@@ -3,6 +3,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.css.js';
+import LiveRegion from '../internal/components/live-region/index';
 import { TabButton } from './tab-button';
 import { InternalButton } from '../button/internal';
 import { useContainerQuery } from '../internal/hooks/container-queries/use-container-query';
@@ -111,6 +112,10 @@ function InternalStatusBar({
             isRefresh={isRefresh}
           />
         </div>
+        <LiveRegion assertive={true}>
+          <span>{errorText} </span>
+          <span>{warningText}</span>
+        </LiveRegion>
       </div>
 
       <div className={styles['status-bar__right']}>