Tv/a11y create project wizard

client/src/components/ProjectWizard/PackagePanel/RulePackage.jsx

@@ -135,6 +135,7 @@ const RulePackage = ({
         />
         <div>
           <input
+            aria-label={`Select ${name} Package`}
             type="checkbox"
             value={true}
             checked={checked}

client/src/components/ProjectWizard/RuleCalculation/RuleCalculation.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { createUseStyles, useTheme } from "react-jss";
 import ToolTipIcon from "../../ToolTip/ToolTipIcon";
@@ -209,6 +209,19 @@ const RuleCalculation = ({
     setShowValidationErrors(true);
   };
 
+  useEffect(() => {
+    const elements = document.getElementsByClassName(
+      "baseline-tooltip-trigger"
+    );
+
+    if (elements) {
+      Array.from(elements).forEach(element => {
+        element.setAttribute("aria-label", "Baseline Information Tooltip");
+        element.removeAttribute("aria-describedby");
+      });
+    }
+  }, []);
+
   return (
     <React.Fragment>
       {dataType === "number" ? (
@@ -347,7 +360,10 @@ const RuleCalculation = ({
               {description ? (
                 <Popup
                   trigger={
-                    <span style={{ cursor: "pointer" }}>
+                    <span
+                      className="baseline-tooltip-trigger"
+                      style={{ cursor: "pointer" }}
+                    >
                       <ToolTipIcon id={id.toString()} />
                     </span>
                   }

client/src/components/ProjectWizard/RuleStrategy/RuleStrategy.jsx

@@ -240,6 +240,7 @@ const RuleStrategy = ({
           />
           <div>
             <input
+              aria-label={`Enter ${name} Value`}
               autoFocus={autoFocus}
               className={
                 validationErrors
@@ -362,6 +363,7 @@ const RuleStrategy = ({
           <div>{`If applicable, please input the details about ${name}.`}</div>
           <div>
             <textarea
+              aria-label={`Enter ${name} Comments`}
               type="textarea"
               value={comment || ""}
               onChange={onCommentChange}

client/src/components/ProjectWizard/WizardFooter.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useContext } from "react";
+import React, { useRef, useContext, useEffect } from "react";
 import PropTypes from "prop-types";
 import NavButton from "../Button/NavButton";
 import { createUseStyles } from "react-jss";
@@ -78,6 +78,26 @@ const WizardFooter = ({
 
   const isAdmin = userContext.account?.isAdmin || false;
 
+  useEffect(() => {
+    if (!rules || !rules.length) return;
+
+    const cleanup = () => {
+      const element = document.getElementById("action-button-wrapper");
+      if (element) {
+        element.setAttribute("aria-label", "Open Actions Menu");
+        element.removeAttribute("aria-describedby");
+      }
+    };
+
+    // Run immediately
+    cleanup();
+
+    // Run after a brief delay to catch any late attribute additions
+    const timeoutId = setTimeout(cleanup, 100);
+
+    return () => clearTimeout(timeoutId);
+  }, [rules]);
+
   return (
     <>
       <div id="all-buttons-wrapper" className={classes.allButtonsWrapper}>
@@ -125,7 +145,7 @@ const WizardFooter = ({
                   className={classes.popover}
                   trigger={
                     // needs element wrapped around Button so reactjs-popup has something to anchor on
-                    <div>
+                    <div id="action-button-wrapper">
                       <Button id="action" variant="tertiary">
                         ACTION
                       </Button>
@@ -136,6 +156,7 @@ const WizardFooter = ({
                 >
                   {close => (
                     <ProjectContextMenu
+                      id="project-context-menu"
                       project={project}
                       closeMenu={close}
                       handleCsvModalOpen={handleCsvModalOpen}

client/src/components/ProjectWizard/WizardSidebar/EarnedPointsProgress.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import { createUseStyles, useTheme } from "react-jss";
 import ToolTipIcon from "../../ToolTip/ToolTipIcon";
@@ -128,6 +128,15 @@ const EarnedPointsProgress = ({ rulesConfig }) => {
   const tipText = `<div><p><strong>Earned Points:</strong> ${rulesConfig.earnedPointsRule.description}</p>
       <p style="margin-top: 0.5rem;"><strong>Target Points:</strong> ${rulesConfig.targetPointsRule.description}</p></div>`;
 
+  useEffect(() => {
+    const element = document.getElementById("project-target-tooltip-trigger");
+
+    if (element) {
+      element.setAttribute("aria-label", "Project Target Information Tooltip");
+      element.removeAttribute("aria-describedby");
+    }
+  }, []);
+
   return (
     <div
       className={
@@ -153,7 +162,10 @@ const EarnedPointsProgress = ({ rulesConfig }) => {
         <Popup
           lockScroll={false}
           trigger={
-            <span style={{ cursor: "pointer" }}>
+            <span
+              id="project-target-tooltip-trigger"
+              style={{ cursor: "pointer" }}
+            >
               <ToolTipIcon />
             </span>
           }

client/src/components/ProjectWizard/WizardSidebar/SidebarProjectLevel.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import { createUseStyles, useTheme } from "react-jss";
 import ToolTipIcon from "../../ToolTip/ToolTipIcon";
@@ -37,6 +37,15 @@ const SidebarProjectLevel = ({ level, rules }) => {
   const classes = useStyles();
   const tipText = `<p>${rules[0]?.description}</p>`;
 
+  useEffect(() => {
+    const element = document.getElementById("project-level-tooltip-trigger");
+
+    if (element) {
+      element.setAttribute("aria-label", "Project Level Information Tooltip");
+      element.removeAttribute("aria-describedby");
+    }
+  }, []);
+
   return (
     <div
       className={clsx(
@@ -52,7 +61,10 @@ const SidebarProjectLevel = ({ level, rules }) => {
         {level > 0 && (
           <Popup
             trigger={
-              <span style={{ cursor: "pointer" }}>
+              <span
+                id="project-level-tooltip-trigger"
+                style={{ cursor: "pointer" }}
+              >
                 <ToolTipIcon />
               </span>
             }
@@ -77,7 +89,10 @@ const SidebarProjectLevel = ({ level, rules }) => {
                   >
                     <MdClose style={{ height: "20px", width: "20px" }} />
                   </button>
-                  <div dangerouslySetInnerHTML={{ __html: tipText }} />
+                  <div
+                    id="project-level-tooltip"
+                    dangerouslySetInnerHTML={{ __html: tipText }}
+                  />
                 </div>
               );
             }}