fix(react): update loader to address issues with being announced in J…

…AWS (#459)
dequelabs · Dec 15, 2021 · ec8e93a · ec8e93a
1 parent 4607c12
commit ec8e93a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 21 deletions.
diff --git a/docs/patterns/components/Loader/index.js b/docs/patterns/components/Loader/index.js
@@ -11,7 +11,7 @@ const LoaderDemo = () => (
       label: {
         type: 'string',
         description:
-          'The desired label to be set on the loader as the aria-label. If not provided, aria-hidden="true" will be applied to the element.'
+          'The desired label will be rendered offscreen. If not provided, aria-hidden="true" will be applied to the element.'
       },
       className
     }}

diff --git a/packages/react/__tests__/src/components/Loader/index.js b/packages/react/__tests__/src/components/Loader/index.js
@@ -18,15 +18,11 @@ test('does not set aria-hidden if a label is provided', () => {
   expect(icon.is('[aria-hidden]')).toBe(false);
 });
 
-test('sets expected progressbar attributes given a label', () => {
+test('sets expected role attributes given an aria-label', () => {
   const loader = mount(<Loader label="bananas" />);
   const loaderNode = loader.getDOMNode();
 
-  expect(loaderNode.getAttribute('role')).toBe('progressbar');
-  expect(loaderNode.getAttribute('aria-valuetext')).toBe('bananas');
-  expect(loaderNode.getAttribute('aria-busy')).toBe('true');
-  expect(loaderNode.getAttribute('aria-valuemin')).toBe('0');
-  expect(loaderNode.getAttribute('aria-valuemax')).toBe('100');
+  expect(loaderNode.getAttribute('role')).toBe('alert');
 });
 
 test('returns no axe violations', async () => {

diff --git a/packages/react/src/components/Loader/index.tsx b/packages/react/src/components/Loader/index.tsx
@@ -1,34 +1,30 @@
+import { Cauldron } from '../../types';
 import React from 'react';
 import PropTypes from 'prop-types';
+import Offscreen from '../Offscreen';
 import classNames from 'classnames';
 
 export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
-  label: string;
+  label?: string;
 }
 
-export default function Loader({ label, className, ...other }: LoaderProps) {
+export default function Loader({ className, label, ...other }: LoaderProps) {
   const props = {
     ...other,
-    className: classNames('Loader', className),
-    'aria-hidden': !label
+    className: classNames('Loader', className)
   };
 
-  if (label) {
-    props.role = 'progressbar';
-    props['aria-valuetext'] = label;
-    props['aria-busy'] = true;
-    props['aria-valuemin'] = 0;
-    props['aria-valuemax'] = 100;
-    // According to the  ARIA 1.2 spec (https://www.w3.org/TR/wai-aria-1.2/#progressbar),
-    // the aria-valuenow attribute SHOULD be omitted because the "value" of our progress
-    // is "indeterminate".
+  if (label?.length) {
+    props['role'] = 'alert';
+    props.children = <Offscreen>{label}</Offscreen>;
+  } else {
+    props['aria-hidden'] = true;
   }
 
   return <div {...props} />;
 }
 
 Loader.propTypes = {
-  label: PropTypes.string,
   className: PropTypes.string
 };