diff --git a/awx/ui_next/src/components/DetailList/CodeDetail.js b/awx/ui_next/src/components/DetailList/CodeDetail.js
index 4bba4416c8..5e926c6f64 100644
--- a/awx/ui_next/src/components/DetailList/CodeDetail.js
+++ b/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
diff --git a/awx/ui_next/src/components/DetailList/Detail.js b/awx/ui_next/src/components/DetailList/Detail.js
index 6ce2636883..10ce9f20ed 100644
--- a/awx/ui_next/src/components/DetailList/Detail.js
+++ b/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);
   `}
 `;