improve a11y

Author: wise-king-sullyman

.github/workflows/main.yml

@@ -3,27 +3,6 @@ on:
   pull_request:
   workflow_call:
 jobs:
-  lint:
-    name: Lint
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out project
-        uses: actions/checkout@v4
-
-      - name: Set up project
-        uses: ./.github/actions/setup-project
-        with:
-          skip-build: true
-
-      - uses: actions/cache@v4
-        name: Cache files proccesed by ESLint
-        with:
-          path: .eslintcache
-          key: ${{ runner.os }}-eslint-cache
-
-      - name: Run linter
-        run: yarn lint:all
-
   build:
     name: Build
     runs-on: ubuntu-latest

packages/react-core/src/components/Panel/Panel.tsx

@@ -11,10 +11,22 @@ export interface PanelProps extends React.HTMLProps<HTMLDivElement> {
   variant?: 'raised' | 'bordered' | 'secondary';
   /** Flag to add scrollable styling to the panel */
   isScrollable?: boolean;
+  /** Enable better a11y */
+  a11y?: any;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
 }
 
+import { getA11y } from './utils';
+export enum a11yEnum {
+  /** Adds aria-live="off" to the panel */
+  off = 'off',
+  /** Adds aria-live="assertive" to the panel */
+  assertive = 'assertive',
+  /** Adds aria-live="polite" to the panel */
+  polite = 'polite'
+}
+
 const PanelBase: React.FunctionComponent<PanelProps> = ({
   className,
   children,
@@ -31,12 +43,17 @@ const PanelBase: React.FunctionComponent<PanelProps> = ({
       className
     )}
     ref={innerRef}
+    aria-live={convertGetA11yForAriaLive(getA11y(props)) as any}
     {...props}
   >
     {children}
   </div>
 );
 
+function convertGetA11yForAriaLive(response: string) {
+  return a11yEnum[response as 'off'];
+}
+
 export const Panel = React.forwardRef((props: PanelProps, ref: React.Ref<any>) => (
   <PanelBase innerRef={ref} {...props} />
 ));

packages/react-core/src/components/Panel/__tests__/Panel.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { Panel } from '../Panel';
 import { PanelMain } from '../PanelMain';
 import { PanelMainBody } from '../PanelMainBody';
@@ -104,3 +104,40 @@ test('Matches the snapshot', () => {
   const { asFragment } = render(<Panel>Test</Panel>);
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Renders correctly', () => {
+  const { container } = render(<Panel a11y={{ announce: 'assertive' }}>Content</Panel>);
+  expect(container.querySelector('div')?.attributes['aria-live']).toBe('assertive');
+});
+
+test('Renders correctly', () => {
+  const { container } = render(<Panel a11y={{ announce: 'polite' }}>Content</Panel>);
+  expect(container.querySelector('div')?.attributes['aria-live']).toBe('polite');
+});
+
+test('Renders correctly', () => {
+  const { container } = render(<Panel a11y={{ announce: 'off' }}>Content</Panel>);
+  expect(container.querySelector('div')?.attributes['aria-live']).toBe('off');
+});
+
+test('Renders correctly', () => {
+  const { container } = render(<Panel>Content</Panel>);
+  expect(container.querySelector('div')?.attributes['aria-live']).toBe('polite');
+});
+
+test('Renders correctly', () => {
+  const { container } = render(<Panel a11y={{ announce: 'assertive' }}>Content</Panel>);
+  fireEvent.click(container.querySelector('div') as Element);
+  expect(container.querySelector('div')?.attributes['aria-live']).toBe('assertive');
+});
+
+test('Renders correctly', () => {
+  const { container } = render(<Panel a11y={{ announce: 'polite' }}>Content</Panel>);
+  fireEvent.click(container.querySelector('div') as Element);
+  expect(container.querySelector('div')?.attributes['aria-live']).toBe('polite');
+});
+
+test('Renders correctly', () => {
+  const { container } = render(<Panel a11y={{ announce: 'off' }}>Content</Panel>);
+  expect(container.querySelector('div')?.attributes['aria-live']).toBe('off');
+});

packages/react-core/src/components/Panel/utils.ts

@@ -0,0 +1,26 @@
+var ariaLive = 'off';
+
+import { PanelProps } from './Panel';
+
+export function getAnnounce(props: PanelProps) {
+  if (props.a11y) {
+    if (props.a11y.announce === 'assertive') {
+      return 'assertive';
+    } else if (props.a11y.announce === 'off') {
+      return 'off';
+    } else {
+      return 'polite';
+    }
+  } else {
+    return 'polite';
+  }
+}
+
+export function getA11y(props: any) {
+  if (props.a11y) {
+    ariaLive = getAnnounce(props);
+  } else {
+    ariaLive = 'polite';
+  }
+  return ariaLive;
+}