diff --git a/awx/ui_next/src/components/StatusIcon/StatusIcon.jsx b/awx/ui_next/src/components/StatusIcon/StatusIcon.jsx
index c386a270e9..7c61e3388e 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 (
-
- {status === 'running' &&
}
+
+ {status === 'running' && }
{(status === 'new' ||
status === 'pending' ||
status === 'waiting' ||
- status === 'never updated') && }
+ status === 'never updated') && }
{(status === 'failed' || status === 'error' || status === 'canceled') && (
-
+
)}
{(status === 'successful' || status === 'ok') && (
-
+
)}
{status === 'changed' && (
-
+
)}
{status === 'skipped' && (
-
+
)}
{status === 'unreachable' && (
-
+
)}
+ {status}
);
};
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 (
-
-
-
+ <>
+
+
+
+
{status}
+ >
);
}
- return
;
+ return (
+ <>
+
+
{status}
+ >
+ );
}
SyncStatusIndicator.propTypes = {
status: oneOf(['success', 'error', 'disabled', 'syncing']).isRequired,
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('
', () => {
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');