Merge pull request #1156 from appfolio/stackSpinnerLabel

Add aria-label to Spinner and ApmSpinner

src/components/Spinner/Spinner.stories.js

@@ -1,4 +1,4 @@
-import { number, select } from '@storybook/addon-knobs';
+import { number, select, text } from '@storybook/addon-knobs';
 import React from 'react';
 import { textColors } from '../../tooling/colors';
 import Button from '../Button/Button';
@@ -12,6 +12,7 @@ export default {
 export const Default = () => {
   const color = select('color', textColors, 'primary');
   const type = select('type', ['spin', 'border', 'grow'], Spinner.default);
+  const label = text('label', 'loading');
 
   return (
     <div>
@@ -36,6 +37,16 @@ export const Default = () => {
       <h1 className={`text-${color}`}>
         text-{color}: <Spinner type={type} className={`text-${color}`} />
       </h1>
+
+      <hr />
+      <h2>
+        ...and accept a label prop for accessibility by screen-readers (default to
+        &apos;loading&apos;):{' '}
+      </h2>
+      <p>
+        {' '}
+        <Spinner type={type} label={label} />{' '}
+      </p>
     </div>
   );
 };

src/components/Spinner/Spinner.tsx

@@ -2,13 +2,18 @@ import React from 'react';
 import { Spinner, SpinnerProps } from 'reactstrap';
 import ApmSpinner from './ApmSpinner';
 
-const SpinnerWrapper = ({ type, ...props }: SpinnerProps) =>
-  type === 'spin' ? <ApmSpinner {...props} /> : <Spinner type={type} {...props} />;
+const SpinnerWrapper = ({ type, label, ...props }: SpinnerProps) =>
+  type === 'spin' ? (
+    <ApmSpinner role="status" aria-label={label} {...props} />
+  ) : (
+    <Spinner type={type} aria-label={label} {...props} />
+  );
 
 SpinnerWrapper.defaultProps = {
   // TODO: update, Spinner doesn't contain the defaultProps types so we cast as any
   ...(Spinner as any).defaultProps,
   type: 'spin',
+  label: 'loading',
 };
 
 SpinnerWrapper.displayName = 'Spinner';