feat: add aria-label to spinner by default

Enable customization of the label by allowing for an optional label prop
aria-label defaults to 'loading' unless specified
Update Spinner.stories for new functionality

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,10 @@ 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,14 @@ 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';