diff --git a/src/components/Spinner/Spinner.stories.js b/src/components/Spinner/Spinner.stories.js
index eb7482fcf..aa494fcbe 100644
--- a/src/components/Spinner/Spinner.stories.js
+++ b/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 (
@@ -36,6 +37,16 @@ export const Default = () => {
text-{color}:
+
+
+
+ ...and accept a label prop for accessibility by screen-readers (default to
+ 'loading'):{' '}
+
+
+ {' '}
+ {' '}
+
);
};
diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
index 73a8aba8d..401c80e16 100644
--- a/src/components/Spinner/Spinner.tsx
+++ b/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' ? : ;
+const SpinnerWrapper = ({ type, label, ...props }: SpinnerProps) =>
+ type === 'spin' ? (
+
+ ) : (
+
+ );
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';