From be9622d03f1ee1d8f7acc1b377e6042c4e9546ae Mon Sep 17 00:00:00 2001
From: "Keith J. Grant" <barkeep@keithjgrant.com>
Date: Thu, 8 Apr 2021 16:08:54 -0700
Subject: [PATCH] fix missing ids/alt for a11y fixes

---
 awx/ui_next/src/components/AppContainer/AppContainer.jsx | 4 +++-
 awx/ui_next/src/components/AppContainer/BrandLogo.jsx    | 4 +++-
 .../src/components/CodeEditor/VariablesDetail.jsx        | 9 +++++++--
 awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx     | 3 +--
 .../src/screens/Project/ProjectList/ProjectListItem.jsx  | 2 +-
 5 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/awx/ui_next/src/components/AppContainer/AppContainer.jsx b/awx/ui_next/src/components/AppContainer/AppContainer.jsx
index 4c290adb41..241175be36 100644
--- a/awx/ui_next/src/components/AppContainer/AppContainer.jsx
+++ b/awx/ui_next/src/components/AppContainer/AppContainer.jsx
@@ -138,10 +138,12 @@ function AppContainer({ i18n, navRouteConfig = [], children }) {
     }
   }, [handleLogout, timeRemaining]);
 
+  const brandName = config?.license_info?.product_name || 'brand';
+
   const header = (
     <PageHeader
       showNavToggle
-      logo={<BrandLogo />}
+      logo={<BrandLogo alt={i18n._(t`${brandName} logo`)} />}
       logoProps={{ href: '/' }}
       headerTools={
         <PageHeaderToolbar
diff --git a/awx/ui_next/src/components/AppContainer/BrandLogo.jsx b/awx/ui_next/src/components/AppContainer/BrandLogo.jsx
index be15af6773..1c8667b65d 100644
--- a/awx/ui_next/src/components/AppContainer/BrandLogo.jsx
+++ b/awx/ui_next/src/components/AppContainer/BrandLogo.jsx
@@ -13,6 +13,8 @@ const BrandImg = styled.img`
   pointer-events: none;
 `;
 
-const BrandLogo = () => <BrandImg src="/static/media/logo-header.svg" />;
+const BrandLogo = ({ alt }) => (
+  <BrandImg src="/static/media/logo-header.svg" alt={alt} />
+);
 
 export default BrandLogo;
diff --git a/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx b/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx
index 797c10673d..1a0f07fb27 100644
--- a/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx
+++ b/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx
@@ -70,6 +70,7 @@ function VariablesDetail({ dataCy, helpText, value, label, rows, i18n }) {
         css="grid-column: 1 / -1"
       >
         <ModeToggle
+          id={`${dataCy}-preview`}
           label={label}
           helpText={helpText}
           dataCy={dataCy}
@@ -89,6 +90,7 @@ function VariablesDetail({ dataCy, helpText, value, label, rows, i18n }) {
         css="grid-column: 1 / -1; margin-top: -20px"
       >
         <CodeEditor
+          id={`${dataCy}-preview`}
           mode={mode}
           value={currentValue}
           readOnly
@@ -123,6 +125,7 @@ function VariablesDetail({ dataCy, helpText, value, label, rows, i18n }) {
       >
         <div className="pf-c-form">
           <ModeToggle
+            id={`${dataCy}-preview-expanded`}
             label={label}
             helpText={helpText}
             dataCy={dataCy}
@@ -134,6 +137,7 @@ function VariablesDetail({ dataCy, helpText, value, label, rows, i18n }) {
             i18n={i18n}
           />
           <CodeEditor
+            id={`${dataCy}-preview-expanded`}
             mode={mode}
             value={currentValue}
             readOnly
@@ -160,6 +164,7 @@ VariablesDetail.defaultProps = {
 };
 
 function ModeToggle({
+  id,
   label,
   helpText,
   dataCy,
@@ -176,7 +181,7 @@ function ModeToggle({
       <SplitItem isFilled>
         <Split hasGutter css="align-items: baseline">
           <SplitItem>
-            <div className="pf-c-form__label">
+            <label className="pf-c-form__label" htmlFor={id}>
               <span
                 className="pf-c-form__label-text"
                 css="font-weight: var(--pf-global--FontWeight--bold)"
@@ -186,7 +191,7 @@ function ModeToggle({
               {helpText && (
                 <Popover header={label} content={helpText} id={dataCy} />
               )}
-            </div>
+            </label>
           </SplitItem>
           <SplitItem>
             <MultiButtonToggle
diff --git a/awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx b/awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx
index c995404ddd..d4d5336c11 100644
--- a/awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx
+++ b/awx/ui_next/src/components/RoutedTabs/RoutedTabs.jsx
@@ -33,12 +33,11 @@ function RoutedTabs(props) {
     <Tabs activeKey={getActiveTabId()} onSelect={handleTabSelect}>
       {tabsArray.map(tab => (
         <Tab
-          aria-label={typeof tab.name === 'string' ? tab.name : ''}
+          aria-label={typeof tab.name === 'string' ? tab.name : null}
           eventKey={tab.id}
           key={tab.id}
           link={tab.link}
           title={<TabTitleText>{tab.name}</TabTitleText>}
-          role="tab"
         />
       ))}
     </Tabs>
diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
index 55c265cf0d..b9c902c4a8 100644
--- a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
@@ -98,7 +98,7 @@ function ProjectListItem({
       />
       <Td id={labelId} dataLabel={i18n._(t`Name`)}>
         <span>
-          <Link id={labelId} to={`${detailUrl}`}>
+          <Link to={`${detailUrl}`}>
             <b>{project.name}</b>
           </Link>
         </span>