fix(FormGroupLabel): enable screenreaders to read a label's "optional" text

[LinKCoding]

Overview

Currently, Gamut's forms' labels include either * to signify required, or (optional) to tell learners what fields are necessary.
Both are set to aria-hidden but a test.io filing requests that the (optional) be read aloud.

This PR changes the (optional) text to be read along with the label text and keeps the aria-hidden on the *.

PR Checklist

• Related to JIRA ticket: GM-910
• I have run this code to verify it works
• This PR includes testing instructions tests for the code change
• The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

1. Go to the Preview link
2. Go to FormGroupLabel: ?path=/docs/atoms-formelements-formgrouplabel--docs&globals=viewport:responsive
3. Turn on VO and check that the optional text is being read aloud
4. NOTE: you might need "control" + "option" + arrow key to access the text since it's a non-interactive item
5. Optionally, but appreciated (6 + 7):
6. Repeat for an example in ConnectedForm: ?path=/docs/organisms-connectedform-connectedform--docs
7. Repeat for an example in GridForm: ?path=/docs/organisms-gridform--docs
8. ...
9. Profit!

—-
for mono:

1. Open the portal-app preview and log in
2. Go to the Profile page, click "Edit Profile" under your profile picture + name (e.g. slug should be profiles/<username>/edit
3. Turn on VoiceOver
4. Navigate over the fields that have "(optional)" text in them, "optional" should now be read aloud and along with the label text
5. Navigate over the required fields' labels, the "*" should still not be annouced.
6. ...
7. Profit!

—-
for monolith:

1. Open the preview and log in
2. Go to the "Account + Billing" page by clicking on your avatar (e.g. slug should be /account)
3. Click "Change" for either email or password
4. Turn on VoiceOver
5. Navigate over the required fields' labels, the "*" should still not be annouced.
6. Go to the "Goal settings" tab
7. Navigate over the fields that have "(optional)" text in them, "optional" should now be read aloud and along with the label text
8. ...
9. Profit!

—-

PR Links and Envs

Repository	PR Link	PR Env
Monolith	Monolith PR	Monolith Env
Portal	Portal Link	Portal Env

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 99d0e5f.

---

☁️ Nx Cloud last updated this comment at 2025-01-08 17:56:03 UTC

[timjenkins]

If we're reading (optional) i think we should also read (required)

[LinKCoding]

If we're reading (optional) i think we should also read (required)

That's a good point Tim, was there a field that you noticed VO didn't announce "required"?
We have it so that the asterisk (*) isn't announced but fields that are required have an aria-required=true

So VO should pick that up.

But with this PR, we also had selectively decided to NOT have VO announce the "optional" text since it seemed implied that anything that didn't announce "required" must be optional. However, there seems to have been a change in guidance, so also changing it to have VO announce "optional" text for labels.

Setting aria-required=false also doesn't do anything, i.e. the VO won't say "optional".

[codecademydev]

📬Published Alpha Packages:

@codecademy/[email protected]
@codecademy/[email protected]

[codecademydev]

🚀 Styleguide deploy preview ready!

https://677ebc0466f9e4839967a87c--gamut-preview.netlify.app

Deploy Logs