Merge pull request #10713 from keithjgrant/10563-a11y-fixes

Fix multiple accessibility violations

awx/ui_next/src/components/DetailList/CodeDetail.js

@@ -17,6 +17,7 @@ import Popover from '../Popover';
 function CodeDetail({ value, label, mode, rows, helpText, dataCy }) {
   const labelCy = dataCy ? `${dataCy}-label` : null;
   const valueCy = dataCy ? `${dataCy}-value` : null;
+  const editorId = dataCy ? `${dataCy}-editor` : 'code-editor';
 
   return (
     <>
@@ -27,12 +28,13 @@ function CodeDetail({ value, label, mode, rows, helpText, dataCy }) {
         data-cy={labelCy}
       >
         <div className="pf-c-form__label">
-          <span
+          <label
+            htmlFor={editorId}
             className="pf-c-form__label-text"
             css="font-weight: var(--pf-global--FontWeight--bold)"
           >
             {label}
-          </span>
+          </label>
           {helpText && (
             <Popover header={label} content={helpText} id={dataCy} />
           )}
@@ -45,6 +47,7 @@ function CodeDetail({ value, label, mode, rows, helpText, dataCy }) {
         data-cy={valueCy}
       >
         <CodeEditor
+          id={editorId}
           mode={mode}
           value={value}
           readOnly

awx/ui_next/src/components/DetailList/Detail.js

@@ -29,7 +29,7 @@ const DetailValue = styled(
   ${(props) =>
     (props.isEncrypted || props.isNotConfigured) &&
     `
-    color: var(--pf-global--Color--400);
+    color: var(--pf-global--disabled-color--100);
   `}
 `;
 

awx/ui_next/src/components/ExecutionEnvironmentDetail/ExecutionEnvironmentDetail.js

@@ -30,6 +30,7 @@ function ExecutionEnvironmentDetail({
   virtualEnvironment,
   verifyMissingVirtualEnv,
   helpText,
+  dataCy,
 }) {
   const config = useConfig();
   const docsLink = `${getDocsBaseUrl(
@@ -51,7 +52,7 @@ function ExecutionEnvironmentDetail({
           </Link>
         }
         helpText={helpText}
-        dataCy="execution-environment-detail"
+        dataCy={dataCy}
       />
     );
   }
@@ -89,7 +90,7 @@ function ExecutionEnvironmentDetail({
             </span>
           </>
         }
-        dataCy="missing-execution-environment-detail"
+        dataCy={`missing-${dataCy}`}
       />
     );
   }
@@ -113,7 +114,7 @@ function ExecutionEnvironmentDetail({
             </span>
           </>
         }
-        dataCy="execution-environment-detail"
+        dataCy={dataCy}
       />
     );
   }
@@ -127,6 +128,7 @@ ExecutionEnvironmentDetail.propTypes = {
   virtualEnvironment: string,
   verifyMissingVirtualEnv: bool,
   helpText: string,
+  dataCy: string,
 };
 
 ExecutionEnvironmentDetail.defaultProps = {
@@ -135,6 +137,7 @@ ExecutionEnvironmentDetail.defaultProps = {
   virtualEnvironment: '',
   verifyMissingVirtualEnv: true,
   helpText: '',
+  dataCy: 'execution-environment-detail',
 };
 
 export default ExecutionEnvironmentDetail;

awx/ui_next/src/components/JobList/JobListItem.js

@@ -124,6 +124,7 @@ function JobListItem({
                   <ReLaunchDropDown
                     handleRelaunch={handleRelaunch}
                     isLaunching={isLaunching}
+                    id={`relaunch-job-${job.id}`}
                   />
                 )}
               </LaunchButton>
@@ -214,6 +215,7 @@ function JobListItem({
                 <ExecutionEnvironmentDetail
                   executionEnvironment={execution_environment}
                   verifyMissingVirtualEnv={false}
+                  dataCy={`execution-environment-detail-${job.id}`}
                 />
               )}
               {credentials && credentials.length > 0 && (

awx/ui_next/src/components/LaunchButton/ReLaunchDropDown.js

@@ -15,7 +15,7 @@ function ReLaunchDropDown({
   isPrimary = false,
   handleRelaunch,
   isLaunching,
-
+  id = 'relaunch-job',
   ouiaId,
 }) {
   const [isOpen, setIsOpen] = useState(false);
@@ -75,7 +75,7 @@ function ReLaunchDropDown({
             toggleIndicator={null}
             onToggle={onToggle}
             aria-label={t`relaunch jobs`}
-            id="relaunch_jobs"
+            id={id}
             isPrimary
           >
             {t`Relaunch`}
@@ -97,7 +97,7 @@ function ReLaunchDropDown({
           toggleIndicator={null}
           onToggle={onToggle}
           aria-label={t`relaunch jobs`}
-          id="relaunch_jobs"
+          id={id}
         >
           <RocketIcon />
         </DropdownToggle>

awx/ui_next/src/components/Lookup/ExecutionEnvironmentLookup.js

@@ -20,6 +20,7 @@ const QS_CONFIG = getQSConfig('execution_environments', {
 });
 
 function ExecutionEnvironmentLookup({
+  id,
   globallyAvailable,
   helperTextInvalid,
   isDefaultEnvironment,
@@ -154,7 +155,7 @@ function ExecutionEnvironmentLookup({
   const renderLookup = () => (
     <>
       <Lookup
-        id="execution-environments"
+        id={id}
         header={t`Execution Environment`}
         value={value}
         onBlur={onBlur}
@@ -213,7 +214,7 @@ function ExecutionEnvironmentLookup({
 
   return (
     <FormGroup
-      fieldId="execution-environment-lookup"
+      fieldId={id}
       label={renderLabel(isGlobalDefaultEnvironment, isDefaultEnvironment)}
       labelIcon={popoverContent && <Popover content={popoverContent} />}
       helperTextInvalid={helperTextInvalid}
@@ -231,6 +232,7 @@ function ExecutionEnvironmentLookup({
 }
 
 ExecutionEnvironmentLookup.propTypes = {
+  id: string,
   value: ExecutionEnvironment,
   popoverContent: string,
   onChange: func.isRequired,
@@ -243,6 +245,7 @@ ExecutionEnvironmentLookup.propTypes = {
 };
 
 ExecutionEnvironmentLookup.defaultProps = {
+  id: 'execution-environments',
   popoverContent: '',
   isDefaultEnvironment: false,
   isGlobalDefaultEnvironment: false,

awx/ui_next/src/components/Lookup/InventoryLookup.js

@@ -236,6 +236,7 @@ function InventoryLookup({
 }
 
 InventoryLookup.propTypes = {
+  fieldId: string,
   value: Inventory,
   onChange: func.isRequired,
   required: bool,
@@ -247,6 +248,7 @@ InventoryLookup.propTypes = {
 };
 
 InventoryLookup.defaultProps = {
+  fieldId: 'inventory',
   value: null,
   required: false,
   isOverrideDisabled: false,

awx/ui_next/src/components/Lookup/Lookup.js

@@ -128,7 +128,7 @@ function Lookup(props) {
       <InputGroup onBlur={onBlur}>
         <Button
           aria-label={t`Search`}
-          id={id}
+          id={`${id}-open`}
           onClick={() => dispatch({ type: 'TOGGLE_MODAL' })}
           variant={ButtonVariant.control}
           isDisabled={isLoading || isDisabled}
@@ -149,7 +149,7 @@ function Lookup(props) {
           </ChipHolder>
         ) : (
           <TextInput
-            id={`${id}-input`}
+            id={id}
             value={typedText}
             onChange={(inputValue) => {
               setTypedText(inputValue);

awx/ui_next/src/components/Lookup/OrganizationLookup.js

@@ -19,6 +19,7 @@ const QS_CONFIG = getQSConfig('organizations', {
 });
 
 function OrganizationLookup({
+  id,
   helperTextInvalid,
   isValid,
   onBlur,
@@ -94,7 +95,7 @@ function OrganizationLookup({
 
   return (
     <FormGroup
-      fieldId="organization"
+      fieldId={id}
       helperTextInvalid={helperTextInvalid}
       isRequired={required}
       validated={isValid ? 'default' : 'error'}
@@ -103,7 +104,7 @@ function OrganizationLookup({
     >
       <Lookup
         isDisabled={isDisabled}
-        id="organization"
+        id={id}
         header={t`Organization`}
         value={value}
         onBlur={onBlur}
@@ -158,6 +159,7 @@ function OrganizationLookup({
 }
 
 OrganizationLookup.propTypes = {
+  id: string,
   helperTextInvalid: node,
   isValid: bool,
   onBlur: func,
@@ -171,6 +173,7 @@ OrganizationLookup.propTypes = {
 };
 
 OrganizationLookup.defaultProps = {
+  id: 'organization',
   helperTextInvalid: '',
   isValid: true,
   onBlur: () => {},

awx/ui_next/src/screens/Application/ApplicationAdd/ApplicationAdd.test.js

@@ -98,7 +98,7 @@ describe('<ApplicationAdd/>', () => {
     wrapper.update();
     expect(wrapper.find('input#name').prop('value')).toBe('new foo');
     expect(wrapper.find('input#description').prop('value')).toBe('new bar');
-    expect(wrapper.find('input#organization-input').prop('value')).toBe(
+    expect(wrapper.find('input#organization').prop('value')).toBe(
       'organization'
     );
     expect(

awx/ui_next/src/screens/Application/ApplicationEdit/ApplicationEdit.test.js

@@ -88,6 +88,7 @@ describe('<ApplicationEdit/>', () => {
     });
     expect(wrapper.find('ApplicationEdit').length).toBe(1);
   });
+
   test('should cancel form properly', async () => {
     const history = createMemoryHistory({
       initialEntries: ['/applications/1/edit'],
@@ -110,6 +111,7 @@ describe('<ApplicationEdit/>', () => {
       expect(history.location.pathname).toBe('/applications/1/details');
     });
   });
+
   test('should throw error on submit', async () => {
     const error = {
       response: {
@@ -147,6 +149,7 @@ describe('<ApplicationEdit/>', () => {
     wrapper.update();
     expect(wrapper.find('FormSubmitError').length).toBe(1);
   });
+
   test('expect values to be updated and submitted properly', async () => {
     const history = createMemoryHistory({
       initialEntries: ['/applications/1/edit'],
@@ -188,7 +191,7 @@ describe('<ApplicationEdit/>', () => {
     wrapper.update();
     expect(wrapper.find('input#name').prop('value')).toBe('new foo');
     expect(wrapper.find('input#description').prop('value')).toBe('new bar');
-    expect(wrapper.find('input#organization-input').prop('value')).toBe(
+    expect(wrapper.find('input#organization').prop('value')).toBe(
       'organization'
     );
     expect(

awx/ui_next/src/screens/Application/shared/ApplicationForm.test.js

@@ -107,7 +107,7 @@ describe('<ApplicationForm', () => {
     wrapper.update();
     expect(wrapper.find('input#name').prop('value')).toBe('new foo');
     expect(wrapper.find('input#description').prop('value')).toBe('new bar');
-    expect(wrapper.find('input#organization-input').prop('value')).toBe(
+    expect(wrapper.find('input#organization').prop('value')).toBe(
       'organization'
     );
     expect(

awx/ui_next/src/screens/Team/TeamList/TeamListItem.js

@@ -31,7 +31,7 @@ function TeamListItem({ team, isSelected, onSelect, detailUrl, rowIndex }) {
         dataLabel={t`Selected`}
       />
       <Td id={labelId} dataLabel={t`Name`}>
-        <Link id={labelId} to={`${detailUrl}`}>
+        <Link to={`${detailUrl}`}>
           <b>{team.name}</b>
         </Link>
       </Td>

awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.js

@@ -339,9 +339,7 @@ describe('<JobTemplateEdit />', () => {
         name: 'Other Inventory',
       });
 
-      wrapper.find('TextInput#execution-environments-input').invoke('onChange')(
+      wrapper.find('TextInput#execution-environments').invoke('onChange')('');
-        ''
-      );
     });
     wrapper.update();
 

awx/ui_next/src/screens/Template/shared/JobTemplateForm.js

@@ -266,7 +266,7 @@ function JobTemplateForm({
           />
         </FieldWithPrompt>
         <FormGroup
-          fieldId="inventory-lookup"
+          fieldId="template-inventory"
           validated={
             !(inventoryMeta.touched || askInventoryOnLaunchField.value) ||
             !inventoryMeta.error

awx/ui_next/src/screens/Template/shared/WebhookSubForm.test.js

@@ -68,7 +68,7 @@ describe('<WebhookSubForm />', () => {
         .find('TextInputBase[aria-label="workflow job template webhook key"]')
         .prop('value')
     ).toBe('webhook key');
-    expect(wrapper.find('input#credential-input').prop('value')).toBe(
+    expect(wrapper.find('input#credential').prop('value')).toBe(
       'Github credential'
     );
   });