From 77f2729a7686a2d64a3b744cdcf27b36adaa5cba Mon Sep 17 00:00:00 2001
From: "Keith J. Grant" <barkeep@keithjgrant.com>
Date: Wed, 21 Jul 2021 15:14:56 -0700
Subject: [PATCH] fix settings pages a11y issues

---
 awx/ui_next/src/components/DetailList/CodeDetail.js | 7 +++++--
 awx/ui_next/src/components/DetailList/Detail.js     | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

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);
   `}
 `;