From e8e5d55d05380114fabc9e49ad8d42aa21b82faa Mon Sep 17 00:00:00 2001
From: alexisreytech <89283739+alexisreytech@users.noreply.github.com>
Date: Wed, 18 Mar 2026 11:07:53 -0500
Subject: [PATCH 1/5] Help to match form look and feel between both mutua11y
 forms. Match border width and also outline offset on focus. Add new checkbox
 group for partner organizations.

---
 astro/src/lib/mutua11y.ts                     |  9 +++
 .../pages/mutua11y/mentor-registration.astro  | 69 +++++++++++++------
 .../pages/mutua11y/protege-registration.astro |  2 +-
 astro/src/styles/bootstrap.scss               |  1 +
 astro/src/styles/link-focus-hover.scss        | 17 ++---
 5 files changed, 64 insertions(+), 34 deletions(-)

diff --git a/astro/src/lib/mutua11y.ts b/astro/src/lib/mutua11y.ts
index 1fc81822..cb06ce03 100644
--- a/astro/src/lib/mutua11y.ts
+++ b/astro/src/lib/mutua11y.ts
@@ -106,4 +106,13 @@ export const topics = [
   "Usability",
   "Virtual and augmented reality",
   "Other",
+];
+
+export const partnerOrgs = [
+  "Level Access",
+  "Deque",
+  "OzeWAI",
+  "TPGi",
+  "Knowbility",
+  "I do not work at a partner organization",
 ];
\ No newline at end of file
diff --git a/astro/src/pages/mutua11y/mentor-registration.astro b/astro/src/pages/mutua11y/mentor-registration.astro
index ed7e7e24..4c3df3cc 100644
--- a/astro/src/pages/mutua11y/mentor-registration.astro
+++ b/astro/src/pages/mutua11y/mentor-registration.astro
@@ -8,6 +8,7 @@ import {
   accessibilityAreas,
   training,
   topics,
+  partnerOrgs,
 } from "@lib/mutua11y";
 
 const title = "Mentor Registration";
@@ -195,7 +196,7 @@ import ThemedSection from "@components/ThemedSection.astro";
           <label for="englishField" class="form-label mb-1 required-field">
             Is English your preferred language?
           </label><span class="asterisk" />
-          <select id="englishField" name="English" class="form-select w-100" required>
+          <select id="englishField" name="English" class="form-select mb-2 w-100" required>
             <option value="yes">Yes</option>
             <option value="no">No</option>
           </select>
@@ -236,7 +237,8 @@ import ThemedSection from "@components/ThemedSection.astro";
           <p id="backgroundHelp" class="form-text">
             In a couple of sentences, describe your accessibility background and experience. Please include descriptions of projects you've worked on and how long you've been working in the field.
           </p>
-
+        </div>
+        <div class="col-lg-6">
           <label for="goalsField" class="form-label required-field">
             Briefly describe your goals for participation.
           </label><span class="asterisk" />
@@ -253,25 +255,7 @@ import ThemedSection from "@components/ThemedSection.astro";
           </p>
         </div>
         <div class="col-lg-6">
-          <fieldset aria-required="true" class="mb-3">
-            <legend class="mb-1 fs-6 required-field">
-              How many years of experience do you have in accessibility?
-              <span class="asterisk" aria-hidden="true"></span>
-            </legend>
-              <select
-                name="Experience"
-                class="form-select w-100"
-                id="experienceField"
-                required
-              >
-                <option selected disabled>
-                  Select the number of years that best fits your experience...
-                </option>
-                {experienceLevels.map((tz) => <option value={tz}>{tz}</option>)}
-              </select>
-          </fieldset>
           <fieldset aria-required class="mb-3">
-            <hr class="d-none d-lg-block" />
             <legend class="mb-2 fs-6">
               What areas do you have expertise in?
               <span class="form-text">(Select all that apply)</span>
@@ -297,6 +281,51 @@ import ThemedSection from "@components/ThemedSection.astro";
               }
             </div>
           </fieldset>
+          <fieldset aria-required class="mb-3">
+            <legend class="mb-2 fs-6 required-field">
+              Which of our partner organizations do you work at?
+              <span class="asterisk" />
+            </legend>
+            <div class="row row-cols-xl-2 mx-1">
+              {
+                partnerOrgs.map((partner) => (
+                  <div class="form-check mb-2">
+                    <input
+                      class="form-check-input"
+                      type="checkbox"
+                      name="Expertise"
+                      id={`workAffiliation${partner}`}
+                      value={partner}
+                    />
+                    <label
+                      class="form-check-label"
+                      for={`workAffiliation${partner}`}
+                      set:text={partner}
+                    />
+                  </div>
+                ))
+              }
+            </div>
+          </fieldset>
+        </div>
+        <div class="col-lg-6">
+          <fieldset aria-required="true" class="mb-3">
+            <legend class="mb-1 fs-6 required-field">
+              How many years of experience do you have in accessibility?
+              <span class="asterisk" aria-hidden="true"></span>
+            </legend>
+              <select
+                name="Experience"
+                class="form-select w-100"
+                id="experienceField"
+                required
+              >
+                <option selected disabled>
+                  Select the number of years that best fits your experience...
+                </option>
+                {experienceLevels.map((tz) => <option value={tz}>{tz}</option>)}
+              </select>
+          </fieldset>
         </div>
       </div>
       <div class="row border-top border-1 border-info mt-4 pt-4">
diff --git a/astro/src/pages/mutua11y/protege-registration.astro b/astro/src/pages/mutua11y/protege-registration.astro
index 489a25f1..ef23f9a7 100644
--- a/astro/src/pages/mutua11y/protege-registration.astro
+++ b/astro/src/pages/mutua11y/protege-registration.astro
@@ -194,7 +194,7 @@ import ThemedSection from "@components/ThemedSection.astro";
           <label for="englishField" class="form-label mb-1 required-field">
             Is English your preferred language?
           </label><span class="asterisk" />
-          <select id="englishField" name="English" class="form-select w-100" required>
+          <select id="englishField" name="English" class="form-select mb-2 w-100" required>
             <option value="yes">Yes</option>
             <option value="no">No</option>
           </select>
diff --git a/astro/src/styles/bootstrap.scss b/astro/src/styles/bootstrap.scss
index 659a3574..1106e0a7 100644
--- a/astro/src/styles/bootstrap.scss
+++ b/astro/src/styles/bootstrap.scss
@@ -147,6 +147,7 @@ $form-check-min-height:                   30px;
 $form-check-input-checked-bg-color:       $primary;
 $form-check-input-checked-border-color:   $primary;
 
+$form-select-border-width:                $input-border-width;
 
 //********
 // Shadows - Tweaked from https://codyhouse.co/nuggets/beautiful-css-shadows
diff --git a/astro/src/styles/link-focus-hover.scss b/astro/src/styles/link-focus-hover.scss
index 14c6874d..390b60c5 100644
--- a/astro/src/styles/link-focus-hover.scss
+++ b/astro/src/styles/link-focus-hover.scss
@@ -13,23 +13,14 @@
 .form-field:focus {
   border-color: $info-border-contrast;
   border-style: solid;
-  border-radius: 0.375rem;
-  outline-offset: 2px;
-}
-
-.form-check-input:focus {
-  outline: 2px solid $primary;
   outline-offset: 2px;
-  box-shadow: none;
 }
 
-.form-control:focus-visible {
-  outline: 2px solid $primary;
-  box-shadow: none;
+.form-field:focus, .form-control:focus-visible, .form-select:focus-visible {
   border-radius: 0.375rem;
 }
 
-.form-check-input:focus-visible {
+.form-check-input:focus, .form-check-input:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
   outline: 2px solid $primary;
   outline-offset: 2px;
   box-shadow: none;
@@ -41,7 +32,7 @@
 }
 
 @include color-mode(dark) {
-  *:focus-visible, .form-field:focus, .form-check-input:focus, .form-check-input:focus-visible, .navbar-toggler:focus, .btn:focus-visible, .nav-link:focus-visible, .form-control:focus-visible {
+  *:focus-visible, .form-field:focus, .form-check-input:focus, .form-check-input:focus-visible, .navbar-toggler:focus, .btn:focus-visible, .nav-link:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
     outline-color: #FFFFFF;
   }
 
@@ -49,7 +40,7 @@
     border-color: $info-border-contrast-dark;
   }
 
-  .form-control,.form-control:focus, .form-check-input, .form-check-input:focus {
+  .form-control,.form-control:focus, .form-check-input, .form-check-input:focus, .form-select, form-select:focus {
     border-color: $info-border-contrast-dark;
   }
 

From c4ab2e4e9fd9abf203ec9ef646705984c8b5770a Mon Sep 17 00:00:00 2001
From: alexisreytech <89283739+alexisreytech@users.noreply.github.com>
Date: Wed, 18 Mar 2026 12:49:45 -0500
Subject: [PATCH 2/5] Adjust checkboxes on both mutua11y forms to take up no
 more than 2 columns. Adjust phrasing.

---
 astro/src/lib/mutua11y.ts                     |  2 +-
 .../pages/mutua11y/mentor-registration.astro  | 26 ++++++++++++-------
 .../pages/mutua11y/protege-registration.astro |  6 ++---
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/astro/src/lib/mutua11y.ts b/astro/src/lib/mutua11y.ts
index cb06ce03..9cffa862 100644
--- a/astro/src/lib/mutua11y.ts
+++ b/astro/src/lib/mutua11y.ts
@@ -114,5 +114,5 @@ export const partnerOrgs = [
   "OzeWAI",
   "TPGi",
   "Knowbility",
-  "I do not work at a partner organization",
+  "I work somewhere else",
 ];
\ No newline at end of file
diff --git a/astro/src/pages/mutua11y/mentor-registration.astro b/astro/src/pages/mutua11y/mentor-registration.astro
index 4c3df3cc..60c89735 100644
--- a/astro/src/pages/mutua11y/mentor-registration.astro
+++ b/astro/src/pages/mutua11y/mentor-registration.astro
@@ -254,13 +254,14 @@ import ThemedSection from "@components/ThemedSection.astro";
             In a couple of sentences, explain why you are registering to be a mentor and what a successful mentorship looks like.
           </p>
         </div>
-        <div class="col-lg-6">
+        <div class="col-lg-12 col-xl-6">
           <fieldset aria-required class="mb-3">
-            <legend class="mb-2 fs-6">
+            <legend class="mb-2 fs-6 required-field">
               What areas do you have expertise in?
+              <span class="asterisk" />
               <span class="form-text">(Select all that apply)</span>
             </legend>
-            <div class="row row-cols-xl-2 mx-1">
+            <div class="row row-cols-lg-2 row-cols-xl-1 mx-1">
               {
                 accessibilityAreas.map((area) => (
                   <div class="form-check mb-2">
@@ -281,26 +282,30 @@ import ThemedSection from "@components/ThemedSection.astro";
               }
             </div>
           </fieldset>
+        </div>
+        <div class="col-lg-12 col-xl-6">
+          <hr class="d-none d-lg-block d-xl-none" />
           <fieldset aria-required class="mb-3">
             <legend class="mb-2 fs-6 required-field">
-              Which of our partner organizations do you work at?
+              Which of our partner organizations do you work for?
               <span class="asterisk" />
+              <span class="form-text">(Select all that apply)</span>
             </legend>
-            <div class="row row-cols-xl-2 mx-1">
+            <div class="row row-cols-lg-2 row-cols-xl-1 mx-1">
               {
-                partnerOrgs.map((partner) => (
+                partnerOrgs.map((partnerOrg) => (
                   <div class="form-check mb-2">
                     <input
                       class="form-check-input"
                       type="checkbox"
                       name="Expertise"
-                      id={`workAffiliation${partner}`}
-                      value={partner}
+                      id={`workAffiliation${partnerOrg}`}
+                      value={partnerOrg}
                     />
                     <label
                       class="form-check-label"
-                      for={`workAffiliation${partner}`}
-                      set:text={partner}
+                      for={`workAffiliation${partnerOrg}`}
+                      set:text={partnerOrg}
                     />
                   </div>
                 ))
@@ -309,6 +314,7 @@ import ThemedSection from "@components/ThemedSection.astro";
           </fieldset>
         </div>
         <div class="col-lg-6">
+          <hr class="d-none d-lg-block d-xl-none" />
           <fieldset aria-required="true" class="mb-3">
             <legend class="mb-1 fs-6 required-field">
               How many years of experience do you have in accessibility?
diff --git a/astro/src/pages/mutua11y/protege-registration.astro b/astro/src/pages/mutua11y/protege-registration.astro
index ef23f9a7..5e6eb3b7 100644
--- a/astro/src/pages/mutua11y/protege-registration.astro
+++ b/astro/src/pages/mutua11y/protege-registration.astro
@@ -252,7 +252,7 @@ import ThemedSection from "@components/ThemedSection.astro";
             In a couple of sentences, explain why you are registering to be a mentor and what a successful mentorship looks like.
           </p>
         </div>
-        <div class="col-lg-12 col-xl-4">
+        <div class="col-lg-12 col-xl-6">
           <fieldset class="mb-3">
             <legend class="mb-2 fs-6">
               What areas are you interested in?
@@ -280,7 +280,7 @@ import ThemedSection from "@components/ThemedSection.astro";
             </div>
           </fieldset>
         </div>
-        <div class="col-lg-12 col-xl-4">
+        <div class="col-lg-12 col-xl-6">
           <hr class="d-none d-lg-block d-xl-none" />
           <fieldset aria-required class="mb-3">
             <legend class="mb-2 fs-6 required-field">
@@ -310,7 +310,7 @@ import ThemedSection from "@components/ThemedSection.astro";
             </div>
           </fieldset>
         </div>
-        <div class="col-lg-12 col-xl-4">
+        <div class="col-lg-12 col-xl-6">
           <hr class="d-none d-lg-block d-xl-none" />
           <fieldset class="mb-3">
             <legend class="mb-2 fs-6">

From 5534787f0a51a19180733856012cbb9a6be91818 Mon Sep 17 00:00:00 2001
From: alexisreytech <89283739+alexisreytech@users.noreply.github.com>
Date: Wed, 18 Mar 2026 13:11:43 -0500
Subject: [PATCH 3/5] Re-arrange and adjust some form fields across both
 mentoring forms to allow for better alignment.

---
 astro/src/pages/mutua11y/mentor-registration.astro  | 6 +++++-
 astro/src/pages/mutua11y/protege-registration.astro | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/astro/src/pages/mutua11y/mentor-registration.astro b/astro/src/pages/mutua11y/mentor-registration.astro
index 60c89735..88955de3 100644
--- a/astro/src/pages/mutua11y/mentor-registration.astro
+++ b/astro/src/pages/mutua11y/mentor-registration.astro
@@ -72,6 +72,8 @@ import ThemedSection from "@components/ThemedSection.astro";
           <p id="fullNameHelp" class="form-text">
             Please provide your full legal name.
           </p>
+        </div>
+        <div class="col-md-6 mb-3">
           <label for="citedNameField" class="form-label mb-1"
             >Cited Name</label
           ></span>
@@ -106,6 +108,8 @@ import ThemedSection from "@components/ThemedSection.astro";
             This will be the primary method that we will contact you.
             Please use an email address that you check on a regular basis.
           </p>
+        </div>
+        <div class="col-md-6 mb-3">
           <label for="linkedInField" class="form-label mb-1"
             >LinkedIn Profile</label
           ><span class="asterisk"></span>
@@ -133,7 +137,7 @@ import ThemedSection from "@components/ThemedSection.astro";
         <div class="col-md-6 mb-3">
           <fieldset>
             <legend class="mb-1 fs-6 required-field">
-              What region of the world do you primarily live and work in? <span class="asterisk" aria-hidden="true"></span>
+              What region do you primarily live and work in? <span class="asterisk" aria-hidden="true"></span>
             </legend>
             <select
               class="form-select mb-2"
diff --git a/astro/src/pages/mutua11y/protege-registration.astro b/astro/src/pages/mutua11y/protege-registration.astro
index 5e6eb3b7..8622773e 100644
--- a/astro/src/pages/mutua11y/protege-registration.astro
+++ b/astro/src/pages/mutua11y/protege-registration.astro
@@ -70,6 +70,8 @@ import ThemedSection from "@components/ThemedSection.astro";
           <p id="fullNameHelp" class="form-text">
             Please provide your full legal name.
           </p>
+        </div>
+        <div class="col-md-6 mb-3">
           <label for="citedNameField" class="form-label mb-1"
             >Cited Name</label
           ></span>
@@ -104,6 +106,8 @@ import ThemedSection from "@components/ThemedSection.astro";
             This will be the primary method that we will contact you.
             Please use an email address that you check on a regular basis.
           </p>
+        </div>
+        <div class="col-md-6 mb-3">
           <label for="linkedInField" class="form-label mb-1"
             >LinkedIn Profile</label
           ><span class="asterisk"></span>
@@ -131,7 +135,7 @@ import ThemedSection from "@components/ThemedSection.astro";
         <div class="col-md-6 mb-3">
           <fieldset>
             <legend class="mb-1 fs-6 required-field">
-              What region of the world do you primarily live and work in? <span class="asterisk" aria-hidden="true"></span>
+              What region do you primarily live and work in? <span class="asterisk" aria-hidden="true"></span>
             </legend>
             <select
               class="form-select mb-2"

From 5191be9b8e70f3c062c2b4a135070e9ad1b696fc Mon Sep 17 00:00:00 2001
From: alexisreytech <89283739+alexisreytech@users.noreply.github.com>
Date: Thu, 19 Mar 2026 08:58:02 -0500
Subject: [PATCH 4/5] Replace "hr" element with borders

---
 astro/src/pages/mutua11y/mentor-registration.astro  | 6 ++++--
 astro/src/pages/mutua11y/protege-registration.astro | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/astro/src/pages/mutua11y/mentor-registration.astro b/astro/src/pages/mutua11y/mentor-registration.astro
index 88955de3..d7bf7715 100644
--- a/astro/src/pages/mutua11y/mentor-registration.astro
+++ b/astro/src/pages/mutua11y/mentor-registration.astro
@@ -288,7 +288,8 @@ import ThemedSection from "@components/ThemedSection.astro";
           </fieldset>
         </div>
         <div class="col-lg-12 col-xl-6">
-          <hr class="d-none d-lg-block d-xl-none" />
+          <div class="d-none d-lg-block d-xl-none border border-top mb-3">
+          </div>
           <fieldset aria-required class="mb-3">
             <legend class="mb-2 fs-6 required-field">
               Which of our partner organizations do you work for?
@@ -318,7 +319,8 @@ import ThemedSection from "@components/ThemedSection.astro";
           </fieldset>
         </div>
         <div class="col-lg-6">
-          <hr class="d-none d-lg-block d-xl-none" />
+          <div class="d-none d-lg-block d-xl-none border border-top mb-3">
+          </div>
           <fieldset aria-required="true" class="mb-3">
             <legend class="mb-1 fs-6 required-field">
               How many years of experience do you have in accessibility?
diff --git a/astro/src/pages/mutua11y/protege-registration.astro b/astro/src/pages/mutua11y/protege-registration.astro
index 8622773e..cfaed123 100644
--- a/astro/src/pages/mutua11y/protege-registration.astro
+++ b/astro/src/pages/mutua11y/protege-registration.astro
@@ -285,7 +285,8 @@ import ThemedSection from "@components/ThemedSection.astro";
           </fieldset>
         </div>
         <div class="col-lg-12 col-xl-6">
-          <hr class="d-none d-lg-block d-xl-none" />
+          <div class="d-none d-lg-block d-xl-none border border-top mb-3">
+          </div>
           <fieldset aria-required class="mb-3">
             <legend class="mb-2 fs-6 required-field">
               How have you learned about accessibility to date?
@@ -315,7 +316,8 @@ import ThemedSection from "@components/ThemedSection.astro";
           </fieldset>
         </div>
         <div class="col-lg-12 col-xl-6">
-          <hr class="d-none d-lg-block d-xl-none" />
+          <div class="d-none d-lg-block d-xl-none border border-top mb-3">
+          </div>
           <fieldset class="mb-3">
             <legend class="mb-2 fs-6">
               What accessibility topics would you hope to discuss with your mentor?

From a04a17d9c9d09d059c6771cb32ed3fdd4cbcfbfa Mon Sep 17 00:00:00 2001
From: alexisreytech <89283739+alexisreytech@users.noreply.github.com>
Date: Thu, 19 Mar 2026 15:59:08 -0500
Subject: [PATCH 5/5] Move "years of experience" form field location.

---
 .../pages/mutua11y/mentor-registration.astro  | 40 +++++++++----------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/astro/src/pages/mutua11y/mentor-registration.astro b/astro/src/pages/mutua11y/mentor-registration.astro
index d7bf7715..173562a2 100644
--- a/astro/src/pages/mutua11y/mentor-registration.astro
+++ b/astro/src/pages/mutua11y/mentor-registration.astro
@@ -296,7 +296,7 @@ import ThemedSection from "@components/ThemedSection.astro";
               <span class="asterisk" />
               <span class="form-text">(Select all that apply)</span>
             </legend>
-            <div class="row row-cols-lg-2 row-cols-xl-1 mx-1">
+            <div class="row row-cols-lg-2 row-cols-xl-1 mx-1 mb-3">
               {
                 partnerOrgs.map((partnerOrg) => (
                   <div class="form-check mb-2">
@@ -315,30 +315,28 @@ import ThemedSection from "@components/ThemedSection.astro";
                   </div>
                 ))
               }
-            </div>
-          </fieldset>
         </div>
-        <div class="col-lg-6">
+        <div>
           <div class="d-none d-lg-block d-xl-none border border-top mb-3">
           </div>
-          <fieldset aria-required="true" class="mb-3">
-            <legend class="mb-1 fs-6 required-field">
-              How many years of experience do you have in accessibility?
-              <span class="asterisk" aria-hidden="true"></span>
-            </legend>
-              <select
-                name="Experience"
-                class="form-select w-100"
-                id="experienceField"
-                required
-              >
-                <option selected disabled>
-                  Select the number of years that best fits your experience...
-                </option>
-                {experienceLevels.map((tz) => <option value={tz}>{tz}</option>)}
-              </select>
-          </fieldset>
         </div>
+        <fieldset aria-required="true" class="mb-3 col-lg-6 col-xl-12">
+          <legend class="mb-1 fs-6 required-field">
+            How many years of experience do you have in accessibility?
+            <span class="asterisk" aria-hidden="true"></span>
+          </legend>
+            <select
+              name="Experience"
+              class="form-select w-100"
+              id="experienceField"
+              required
+            >
+              <option selected disabled>
+                Select the number of years that best fits your experience...
+              </option>
+              {experienceLevels.map((tz) => <option value={tz}>{tz}</option>)}
+            </select>
+        </fieldset>
       </div>
       <div class="row border-top border-1 border-info mt-4 pt-4">
         <h3 class="mt-4">Code of Conduct</h3>