From 23554c257f58c0ba5f150f0a54970b0f504baba4 Mon Sep 17 00:00:00 2001
From: riannaalers <rianna.alers@appfolio.com>
Date: Fri, 28 Apr 2023 12:29:13 -0700
Subject: [PATCH] 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 | 7 ++++++-
 src/components/Spinner/Spinner.tsx        | 5 +++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Spinner/Spinner.stories.js b/src/components/Spinner/Spinner.stories.js
index eb7482fcf..f3f62f959 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 (
     <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>
   );
 };
diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
index 73a8aba8d..f4cb6ec73 100644
--- a/src/components/Spinner/Spinner.tsx
+++ b/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';