Skip to content

Update mentor and protegé form look and feel + Add 1 checkbox group #515

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
brian-montgomery merged 6 commits into from
Mar 23, 2026
Merged

Update mentor and protegé form look and feel + Add 1 checkbox group #515

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e8e5d55
Help to match form look and feel between both mutua11y forms. Match b…
alexisreytech Mar 18, 2026
c4ab2e4
Adjust checkboxes on both mutua11y forms to take up no more than 2 co…
alexisreytech Mar 18, 2026
5534787
Re-arrange and adjust some form fields across both mentoring forms to…
alexisreytech Mar 18, 2026
e843bf3
Merge branch 'main' into alexis/mentoring-forms
alexisreytech Mar 19, 2026
5191be9
Replace "hr" element with borders
alexisreytech Mar 19, 2026
a04a17d
Move "years of experience" form field location.
alexisreytech Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions astro/src/lib/mutua11y.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,4 +106,13 @@ export const topics = [
"Usability",
"Virtual and augmented reality",
"Other",
];

export const partnerOrgs = [
"Level Access",
"Deque",
"OzeWAI",
"TPGi",
"Knowbility",
"I work somewhere else",
];
87 changes: 63 additions & 24 deletions astro/src/pages/mutua11y/mentor-registration.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
accessibilityAreas,
training,
topics,
partnerOrgs,
} from "@lib/mutua11y";

const title = "Mentor Registration";
Expand Down Expand Up @@ -71,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>
Expand Down Expand Up @@ -105,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>
Expand Down Expand Up @@ -132,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"
Expand Down Expand Up @@ -195,7 +200,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>
Expand Down Expand Up @@ -236,7 +241,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" />
Expand All @@ -252,31 +258,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">
<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 class="col-lg-12 col-xl-6">
<fieldset aria-required class="mb-3">
<hr class="d-none d-lg-block" />
<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">
Expand All @@ -298,6 +287,56 @@ import ThemedSection from "@components/ThemedSection.astro";
</div>
</fieldset>
</div>
<div class="col-lg-12 col-xl-6">
<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?
<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 mb-3">
{
partnerOrgs.map((partnerOrg) => (
<div class="form-check mb-2">
<input
class="form-check-input"
type="checkbox"
name="Expertise"
id={`workAffiliation${partnerOrg}`}
value={partnerOrg}
/>
<label
class="form-check-label"
for={`workAffiliation${partnerOrg}`}
set:text={partnerOrg}
/>
</div>
))
}
</div>
<div>
<div class="d-none d-lg-block d-xl-none border border-top mb-3">
</div>
</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>
Expand Down
20 changes: 13 additions & 7 deletions astro/src/pages/mutua11y/protege-registration.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -194,7 +198,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>
Expand Down Expand Up @@ -252,7 +256,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?
Expand Down Expand Up @@ -280,8 +284,9 @@ import ThemedSection from "@components/ThemedSection.astro";
</div>
</fieldset>
</div>
<div class="col-lg-12 col-xl-4">
<hr class="d-none d-lg-block d-xl-none" />
<div class="col-lg-12 col-xl-6">
<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?
Expand Down Expand Up @@ -310,8 +315,9 @@ import ThemedSection from "@components/ThemedSection.astro";
</div>
</fieldset>
</div>
<div class="col-lg-12 col-xl-4">
<hr class="d-none d-lg-block d-xl-none" />
<div class="col-lg-12 col-xl-6">
<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?
Expand Down
1 change: 1 addition & 0 deletions astro/src/styles/bootstrap.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
17 changes: 4 additions & 13 deletions astro/src/styles/link-focus-hover.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -41,15 +32,15 @@
}

@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;
}

.form-field:focus {
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;
}

Expand Down
Loading