fix missing ids/alt for a11y fixes

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

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;

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

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>

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>