From e204325d1d2704731ed432c9e6ba0135726b96dd Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Wed, 30 Sep 2020 14:36:07 -0700
Subject: [PATCH] add a11y label to SyncStatusIndicator

---
 .../SyncStatusIndicator/SyncStatusIndicator.jsx  | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/awx/ui_next/src/components/SyncStatusIndicator/SyncStatusIndicator.jsx b/awx/ui_next/src/components/SyncStatusIndicator/SyncStatusIndicator.jsx
index 77cb158548..2ccf283576 100644
--- a/awx/ui_next/src/components/SyncStatusIndicator/SyncStatusIndicator.jsx
+++ b/awx/ui_next/src/components/SyncStatusIndicator/SyncStatusIndicator.jsx
@@ -29,13 +29,21 @@ export default function SyncStatusIndicator({ status, title }) {
 
   if (status === 'syncing') {
     return (
-      <PulseWrapper>
-        <CloudIcon color={`var(${color})`} title={title} />
-      </PulseWrapper>
+      <>
+        <PulseWrapper aria-hidden="true">
+          <CloudIcon color={`var(${color})`} title={title} />
+        </PulseWrapper>
+        <span className="pf-screen-reader">{status}</span>
+      </>
     );
   }
 
-  return <CloudIcon color={`var(${color})`} title={title} />;
+  return (
+    <>
+      <CloudIcon color={`var(${color})`} title={title} aria-hidden="true" />
+      <span className="pf-screen-reader">{status}</span>
+    </>
+  );
 }
 SyncStatusIndicator.propTypes = {
   status: oneOf(['success', 'error', 'disabled', 'syncing']).isRequired,