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

---
 .../src/components/StatusIcon/StatusIcon.jsx        | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/awx/ui_next/src/components/StatusIcon/StatusIcon.jsx b/awx/ui_next/src/components/StatusIcon/StatusIcon.jsx
index c386a270e9..2565765f00 100644
--- a/awx/ui_next/src/components/StatusIcon/StatusIcon.jsx
+++ b/awx/ui_next/src/components/StatusIcon/StatusIcon.jsx
@@ -93,42 +93,43 @@ SkippedBottom.displayName = 'SkippedBottom';
 
 const StatusIcon = ({ status, ...props }) => {
   return (
-    <div {...props} data-job-status={status}>
+    <div {...props} data-job-status={status} aria-label={status}>
       {status === 'running' && <RunningJob />}
       {(status === 'new' ||
         status === 'pending' ||
         status === 'waiting' ||
         status === 'never updated') && <WaitingJob />}
       {(status === 'failed' || status === 'error' || status === 'canceled') && (
-        <FinishedJob>
+        <FinishedJob aria-hidden="true">
           <FailedTop />
           <FailedBottom />
         </FinishedJob>
       )}
       {(status === 'successful' || status === 'ok') && (
-        <FinishedJob>
+        <FinishedJob aria-hidden="true">
           <SuccessfulTop />
           <SuccessfulBottom />
         </FinishedJob>
       )}
       {status === 'changed' && (
-        <FinishedJob>
+        <FinishedJob aria-hidden="true">
           <ChangedTop />
           <ChangedBottom />
         </FinishedJob>
       )}
       {status === 'skipped' && (
-        <FinishedJob>
+        <FinishedJob aria-hidden="true">
           <SkippedTop />
           <SkippedBottom />
         </FinishedJob>
       )}
       {status === 'unreachable' && (
-        <FinishedJob>
+        <FinishedJob aria-hidden="true">
           <UnreachableTop />
           <UnreachableBottom />
         </FinishedJob>
       )}
+      <span className="pf-screen-reader">{status}</span>
     </div>
   );
 };