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 1/4] 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>
   );
 };

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 2/4] 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,

From afe09695d42559de71a6ea13f7bc9000d7ba0fc0 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Thu, 1 Oct 2020 08:53:37 -0700
Subject: [PATCH 3/4] update tests

---
 awx/ui_next/src/components/StatusIcon/StatusIcon.jsx      | 2 +-
 awx/ui_next/src/screens/Job/JobDetail/JobDetail.test.jsx  | 8 ++++++--
 .../src/screens/Job/JobOutput/HostEventModal.test.jsx     | 3 ++-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/awx/ui_next/src/components/StatusIcon/StatusIcon.jsx b/awx/ui_next/src/components/StatusIcon/StatusIcon.jsx
index 2565765f00..7d9973f92e 100644
--- a/awx/ui_next/src/components/StatusIcon/StatusIcon.jsx
+++ b/awx/ui_next/src/components/StatusIcon/StatusIcon.jsx
@@ -129,7 +129,7 @@ const StatusIcon = ({ status, ...props }) => {
           <UnreachableBottom />
         </FinishedJob>
       )}
-      <span className="pf-screen-reader">{status}</span>
+      <span className="pf-screen-reader"> {status} </span>
     </div>
   );
 };
diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.test.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.test.jsx
index 2d5ff5d5fe..729d043686 100644
--- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.test.jsx
+++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.test.jsx
@@ -28,14 +28,18 @@ describe('<JobDetail />', () => {
       expect(wrapper.find(`Detail[label="${label}"] dd`).text()).toBe(value);
     }
 
-    assertDetail('Status', 'Successful');
+    // StatusIcon adds visibly hidden accessibility text " successful "
+    assertDetail('Status', ' successful Successful');
     assertDetail('Started', '8/8/2019, 7:24:18 PM');
     assertDetail('Finished', '8/8/2019, 7:24:50 PM');
     assertDetail('Job Template', mockJobData.summary_fields.job_template.name);
     assertDetail('Job Type', 'Run');
     assertDetail('Launched By', mockJobData.summary_fields.created_by.username);
     assertDetail('Inventory', mockJobData.summary_fields.inventory.name);
-    assertDetail('Project', mockJobData.summary_fields.project.name);
+    assertDetail(
+      'Project',
+      ` successful ${mockJobData.summary_fields.project.name}`
+    );
     assertDetail('Revision', mockJobData.scm_revision);
     assertDetail('Playbook', mockJobData.playbook);
     assertDetail('Verbosity', '0 (Normal)');
diff --git a/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.test.jsx b/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.test.jsx
index 01b6ed61bd..bb4b538142 100644
--- a/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.test.jsx
+++ b/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.test.jsx
@@ -103,7 +103,8 @@ describe('HostEventModal', () => {
       expect(wrapper.find(`Detail[label="${label}"] dd`).text()).toBe(value);
     }
 
-    assertDetail('Host Name', 'foo');
+    // StatusIcon adds visibly hidden accessibility text " changed "
+    assertDetail('Host Name', ' changed foo');
     assertDetail('Play', 'all');
     assertDetail('Task', 'command');
     assertDetail('Module', 'command');

From b7070b7a7240e75bf48b532a871c5643aed9540e Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Mon, 5 Oct 2020 08:23:41 -0700
Subject: [PATCH 4/4] add aria-hidden to Running/Waiting job icons

---
 awx/ui_next/src/components/StatusIcon/StatusIcon.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/awx/ui_next/src/components/StatusIcon/StatusIcon.jsx b/awx/ui_next/src/components/StatusIcon/StatusIcon.jsx
index 7d9973f92e..7c61e3388e 100644
--- a/awx/ui_next/src/components/StatusIcon/StatusIcon.jsx
+++ b/awx/ui_next/src/components/StatusIcon/StatusIcon.jsx
@@ -94,11 +94,11 @@ SkippedBottom.displayName = 'SkippedBottom';
 const StatusIcon = ({ status, ...props }) => {
   return (
     <div {...props} data-job-status={status} aria-label={status}>
-      {status === 'running' && <RunningJob />}
+      {status === 'running' && <RunningJob aria-hidden="true" />}
       {(status === 'new' ||
         status === 'pending' ||
         status === 'waiting' ||
-        status === 'never updated') && <WaitingJob />}
+        status === 'never updated') && <WaitingJob aria-hidden="true" />}
       {(status === 'failed' || status === 'error' || status === 'canceled') && (
         <FinishedJob aria-hidden="true">
           <FailedTop />