Merge pull request #8298 from keithjgrant/7677-a11y-text

Add accessibility labels to job status/cloud sync icons

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

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}>
-      {status === 'running' && <RunningJob />}
+    <div {...props} data-job-status={status} aria-label={status}>
+      {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>
+        <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>
   );
 };

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,

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)');

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');