Builder frontend semantic html

builder-frontend/src/App.tsx

@@ -59,7 +59,7 @@ function App() {
       <Route path="/screener/:publishedScreenerId" component={Screener} />
       <Route
         path="*"
-        component={() => <div class="p-4">404 - Page Not Found</div>}
+        component={() => <main class="p-4">404 - Page Not Found</main>}
       />
     </Router>
   );

builder-frontend/src/components/Header/Header.tsx

@@ -15,15 +15,15 @@ const HeaderButton = ({
   onClick: () => void;
 }) => {
   return (
-    <div
+    <button
       onClick={onClick}
       class="
         px-4 py-2 text-md font-bold text-gray-700 rounded-md
         flex items-center
         hover:bg-gray-300 cursor-pointer select-none"
     >
       {buttonText}
-    </div>
+    </button>
   );
 };
 
@@ -48,10 +48,10 @@ const HeaderMenu: Component<MenuProps> = (props) => {
   ];
 
   return (
-    <div class="header-menu">
-      <div class="header-user-email" title={props.userEmail}>
+    <section class="header-menu">
+      <h2 class="header-user-email" title={props.userEmail}>
         Welcome {props.displayName} {props.userEmail}
-      </div>
+      </h2>
       <hr />
       <ul>
         <For each={menuItems}>
@@ -62,7 +62,7 @@ const HeaderMenu: Component<MenuProps> = (props) => {
           )}
         </For>
       </ul>
-    </div>
+    </section>
   );
 };
 

builder-frontend/src/components/auth/AuthForm.jsx

@@ -35,9 +35,9 @@ export default function AuthForm() {
   return (
     <div className="w-full h-screen flex self-center place-content-center place-items-center">
       <div className="w-96 text-gray-600 space-y-5 p-4 shadow-xl border rounded-xl">
-        <div className="text-gray-800 text-xl font-semibold sm:text-2xl">
-          Benefits Decision Tookit
-        </div>
+        <h1 className="text-gray-800 text-xl font-semibold sm:text-2xl">
+          Benefit Decision Tookit
+        </h1>
         {location.pathname === "/signup" ? (
           <Signup toggleMode={toggleMode} />
         ) : (

builder-frontend/src/components/auth/Login.jsx

@@ -85,12 +85,12 @@ export default function Login({ toggleMode }) {
         Sign In
       </button>
 
-      <div className="text-gray-600 pt-4 text-center" onClick={toggleMode}>
+      <button className="text-gray-600 pt-4 text-center" onClick={toggleMode}>
         Don't have an account?&nbsp;
         <span className="text-gray-700 font-bold hover:underline hover:cursor-pointer">
           Sign Up
         </span>
-      </div>
+      </button>
       <div className="h-4 text-center">
         {error() && <p style={{ color: "red" }}>{error()}</p>}
       </div>

builder-frontend/src/components/homeScreen/DeleteConfirmation.tsx

@@ -10,12 +10,13 @@ interface Props {
 export default function DeleteConfirmation(props: Props) {
   return (
     <div>
-      <div class="text-xl font-bold">
+      <h2 class="text-xl font-bold">
         Are you sure you would like to delete {props.screenerName}?
-      </div>
-      <div class="pt-8 text-md">
-        Once deleted, all associated data will be deleted and cant be recovered.
-      </div>
+      </h2>
+      <p class="pt-8 text-md">
+        Once deleted, all associated data will be deleted and can't be
+        recovered.
+      </p>
       <div class="flex w-full justify-end gap-4 mt-8">
         <Button
           variant="outline-secondary"

builder-frontend/src/components/homeScreen/EditScreenerForm.tsx

@@ -63,7 +63,7 @@ export default function EditScreenerForm(props: Props) {
   return (
     <div>
       <Form onSubmit={handleSubmit}>
-        <div class="text-xl font-bold">Edit screener</div>
+        <h2 class="text-xl font-bold">Edit screener</h2>
 
         <Form.LabelAbove placeholder="Screener name" htmlFor="screenerName">
           <Form.TextInput value={props.modalData.screenerName} />

builder-frontend/src/components/homeScreen/HomeScreen.tsx

@@ -3,9 +3,9 @@ import { Accessor, createSignal } from "solid-js";
 
 const HomeScreen = () => {
   return (
-    <div class="p-2 text-gray-700">
+    <main class="p-2 text-gray-700">
       <ProjectsList />
-    </div>
+    </main>
   );
 };
 export default HomeScreen;

builder-frontend/src/components/homeScreen/ProjectsList.tsx

@@ -90,7 +90,7 @@ export default function ProjectsList() {
   };
 
   return (
-    <div>
+    <>
       <Title>BDT - Projects List</Title>
       <div class="bg-gray-100 rounded-xl p-8 flex flex-col text-sm">
         <div class="text-xl font-bold">
@@ -107,15 +107,15 @@ export default function ProjectsList() {
           eligibility checks from our library of pre-built eligibility rules. Or
           build custom checks that meet your specific needs.
         </div>
-        <div
+        <button
           onClick={() => setIsNewScreenerModalVisible(true)}
           class="
                 mt-2 px-4 py-2 w-fit cursor-pointer bg-blue-500
                 rounded-lg shadow-md hover:shadow-lg hover:bg-blue-600
                 font-bold text-sm text-white"
         >
           Create new screener
-        </div>
+        </button>
         <Modal
           show={isNewScreenerModalVisible()}
           onClose={() => setIsNewScreenerModalVisible(false)}
@@ -138,7 +138,7 @@ export default function ProjectsList() {
               };
               return (
                 item && (
-                  <div
+                  <article
                     class="
                       w-80 h-60 relative cursor-pointer
                       border-2 border-gray-300 rounded-lg
@@ -157,7 +157,7 @@ export default function ProjectsList() {
                     >
                       <div class="text-2xl font-bold">{item.screenerName}</div>
                     </div>
-                  </div>
+                  </article>
                 )
               );
             }}
@@ -178,6 +178,6 @@ export default function ProjectsList() {
           </Modal>
         </div>
       </Show>
-    </div>
+    </>
   );
 }

builder-frontend/src/components/homeScreen/eligibilityCheckList/EligibilityChecksList.tsx

@@ -52,14 +52,14 @@ const EligibilityChecksList = () => {
         Manage your custom eligibility checks here. Click on a check to view or
         edit its details.
       </div>
-      <div
+      <button
         class="px-4 py-2 w-fit cursor-pointer bg-blue-500
                 rounded-lg shadow-md hover:shadow-lg hover:bg-blue-600
                 font-bold text-sm text-white"
         onClick={() => setAddingNewCheck(true)}
       >
         Create New Check
-      </div>
+      </button>
       <Modal show={addingNewCheck()} onClose={() => setAddingNewCheck(false)}>
         <CheckModal
           onAddCheck={actions.addNewCheck}

builder-frontend/src/components/project/FormEditorView.tsx

@@ -195,28 +195,28 @@ function FormEditorView({ formSchema, setFormSchema }) {
       <div id="form-editor-save_container" class="fixed bottom-20 right-5 z-40">
         <Switch>
           <Match when={isUnsaved()}>
-            <div
+            <button
               onClick={handleSave}
               class="btn-default btn-yellow shadow-[0_0_10px_rgba(0,0,0,0.4)]"
             >
               Save
-            </div>
+            </button>
           </Match>
           <Match when={isSaving()}>
-            <div
+            <button
               onClick={handleSave}
               class="btn-default btn-gray cursor-not-allowed shadow-[0_0_10px_rgba(0,0,0,0.4)]"
             >
               Saving...
-            </div>
+            </button>
           </Match>
           <Match when={!isUnsaved() && !isSaving()}>
-            <div
+            <button
               onClick={handleSave}
               class="btn-default btn-blue shadow-[0_0_10px_rgba(0,0,0,0.4)]"
             >
               Save
-            </div>
+            </button>
           </Match>
         </Switch>
       </div>
@@ -256,9 +256,9 @@ const FormValidationDrawer = ({
               my-auto rounded-lg
               text-lg font-medium transition-all duration-100 "
           >
-            <div class="btn-default btn-gray shadow-[0_0_10px_rgba(0,0,0,0.4)]">
+            <button class="btn-default btn-gray shadow-[0_0_10px_rgba(0,0,0,0.4)]">
               Validate Form Outputs
-            </div>
+            </button>
           </Drawer.Trigger>
           <Drawer.Portal>
             <Drawer.Overlay

builder-frontend/src/components/project/manageBenefits/configureBenefit/modals/ConfigureCheckModal.tsx

@@ -313,9 +313,9 @@ const ParameterMultiStringInput = ({
           placeholder="Type and press Enter to add"
           class="form-input-custom flex-1"
         />
-        <div onClick={addValue} class="btn-default btn-blue">
+        <button onClick={addValue} class="btn-default btn-blue">
           Add
-        </div>
+        </button>
       </div>
     </>
   );

builder-frontend/src/components/screener/EligibilityResults.tsx

@@ -12,23 +12,27 @@ function formatParameters(params: Record<string, unknown>): string {
     .join(", ");
 }
 
-export default function EligibilityResults(
-  { screenerResult }: { screenerResult: Accessor<ScreenerResult> }
-) {
+export default function EligibilityResults({
+  screenerResult,
+}: {
+  screenerResult: Accessor<ScreenerResult>;
+}) {
   console.log(screenerResult());
   return (
     <div class="my-2 mx-12">
       <h2 class="text-gray-600 font-bold">Eligibility Results</h2>
       <For each={Object.entries(screenerResult())}>
-        {([benefitKey, benefitResult]) => <BenefitResult benefitResult={benefitResult}/>}
+        {([benefitKey, benefitResult]) => (
+          <BenefitResult benefitResult={benefitResult} />
+        )}
       </For>
     </div>
   );
 }
 
 function BenefitResult({ benefitResult }: { benefitResult: BenefitResult }) {
   return (
-    <div class="border-gray-500 border p-5 my-4 rounded-lg shadow-md">
+    <article class="border-gray-500 border p-5 my-4 rounded-lg shadow-md">
       <Switch>
         <Match when={benefitResult.result === "TRUE"}>
           <p class="mb-3 bg-green-200 w-fit py-1 px-6 rounded-full font-bold text-gray-800 text-sm">
@@ -69,11 +73,17 @@ function BenefitResult({ benefitResult }: { benefitResult: BenefitResult }) {
                   {check.name}
                   <Show when={check.module || check.version}>
                     <span class="text-gray-500 ml-1">
-                      ({[check.module, check.version].filter(Boolean).join(" v")})
+                      (
+                      {[check.module, check.version].filter(Boolean).join(" v")}
+                      )
                     </span>
                   </Show>
                 </div>
-                <Show when={check.parameters && Object.keys(check.parameters).length > 0}>
+                <Show
+                  when={
+                    check.parameters && Object.keys(check.parameters).length > 0
+                  }
+                >
                   <div class="text-gray-500">
                     {formatParameters(check.parameters)}
                   </div>
@@ -103,6 +113,6 @@ function BenefitResult({ benefitResult }: { benefitResult: BenefitResult }) {
           </a>
         </div>
       )} */}
-    </div>
+    </article>
   );
 }

builder-frontend/src/components/screener/Screener.tsx

@@ -5,45 +5,51 @@ import FormRenderer from "./FormRenderer";
 import Loading from "@/components/Loading";
 import EligibilityResults from "./EligibilityResults";
 
-import { fetchPublishedScreener, evaluatePublishedScreener } from "@/api/publishedScreener";
+import {
+  fetchPublishedScreener,
+  evaluatePublishedScreener,
+} from "@/api/publishedScreener";
 
 import type { PublishedScreener, ScreenerResult } from "@/types";
 
 export default function Screener() {
   const params = useParams();
 
-  const [screener] = createResource<PublishedScreener>(() => fetchPublishedScreener(params.publishedScreenerId));
+  const [screener] = createResource<PublishedScreener>(() =>
+    fetchPublishedScreener(params.publishedScreenerId),
+  );
   const [screenerResult, setScreenerResult] = createSignal<ScreenerResult>();
 
   const submitForm = async (data: any) => {
     try {
-      let evaluationResult: ScreenerResult = await evaluatePublishedScreener(params.publishedScreenerId, data);
+      let evaluationResult: ScreenerResult = await evaluatePublishedScreener(
+        params.publishedScreenerId,
+        data,
+      );
       setScreenerResult(evaluationResult);
     } catch (err) {
       console.log(err);
     }
   };
 
   return (
-    <>
-      <div class="mt-4">
-        {screener.loading && <Loading/>}
-        {screener() && (
-          <div class="flex flex-col lg:flex-row">
-            <div class="flex-1 overflow-y-auto p-4">
-              <FormRenderer
-                schema={screener()?.formSchema || {}}
-                submitForm={submitForm}
-              />
-            </div>
-            <Show when={screenerResult()}>
-              <div class="flex-1 overflow-y-auto p-4">
-                <EligibilityResults screenerResult={screenerResult}/>
-              </div>
-            </Show>
-          </div>
-        )}
-      </div>
-    </>
+    <main class="mt-4">
+      {screener.loading && <Loading />}
+      {screener() && (
+        <div class="flex flex-col lg:flex-row">
+          <section class="flex-1 overflow-y-auto p-4">
+            <FormRenderer
+              schema={screener()?.formSchema || {}}
+              submitForm={submitForm}
+            />
+          </section>
+          <Show when={screenerResult()}>
+            <section class="flex-1 overflow-y-auto p-4">
+              <EligibilityResults screenerResult={screenerResult} />
+            </section>
+          </Show>
+        </div>
+      )}
+    </main>
   );
 }

builder-frontend/src/components/shared/ANavbar.tsx

@@ -8,13 +8,13 @@ interface Props {
 }
 const ANavBar: Component<Props> = (props) => {
   return (
-    <div class="flex border-b border-gray-300">
+    <nav class="flex border-b border-gray-300">
       {props.items.map(({ label, href }) => (
         <A href={href} class="navbarlink">
           {label}
         </A>
       ))}
-    </div>
+    </nav>
   );
 };