fix: Add ARIA attributes and roles to print disability dynamic section by mystic-06 · Pull Request #11560 · internetarchive/openlibrary

mystic-06 · 2025-12-06T11:48:49Z

Fix

Technical

Added aria-expanded and aria-controls to the print disability checkbox
Added role="region", aria-hidden, and aria-labelledby to the dropdown container
Added aria-describedby, aria-required, and aria-invalid to the program selector
Added role="alert" + aria-live="polite" for error messaging
Updated JS to toggle ARIA states dynamically (expanded/hidden/required/invalid) based on checkbox state
Added safety null checks to avoid JS errors when elements are not present

Testing

Tested with Orca on Linux (CachyOS/GNOME)
Verified ARIA state changes through browser DevTools
Confirmed error messages are announced correctly
Checked keyboard navigation (Tab/Space/Enter/Arrow keys)
All existing unit tests pass

mystic-06 · 2025-12-09T16:42:06Z

Hi @jimchamp ! I know maintainers are busy, but I wanted to check in on this PR.
If there’s any feedback or anything I might have missed, I'd be glad to address it.
Thank you!

jimchamp

Thanks @mystic-06, and apologies for the delay.

This mostly looks good. Please update the code to use kebab case for any new HTML classes or IDs. The guards that you have added should also be removed.

jimchamp · 2025-12-22T18:59:39Z

openlibrary/plugins/openlibrary/js/signup.js

+        if (!rpdCheckbox || !pdaSelector) {
+            return;
+        }


Suggested change

if (!rpdCheckbox || !pdaSelector) {

return;

}

Why did you add this? The checkbox and selector are always present in the registration form.

I originally added the guards because they were needed to keep the existing test cases passing, but I’ll remove them as suggested.

jimchamp · 2025-12-22T18:59:57Z

openlibrary/plugins/openlibrary/js/signup.js

+        if (!rpdCheckbox || !pdaSelectorContainer) {
+            return;
+        }


Suggested change

if (!rpdCheckbox || !pdaSelectorContainer) {

return;

}

jimchamp · 2025-12-22T19:15:22Z

openlibrary/templates/account/create.html

-                <input type="checkbox" id="pd_request" name="pd_request"/>
-                <label for="pd_request">$:_('I want to apply* for <a href="https://help.archive.org/help/program-overview/" target="_blank">special print disability access</a> through a qualifying program.')</label>
+                <input type="checkbox" id="pd_request" name="pd_request" aria-expanded="false" aria-controls="pda-selector"/>
+                <label for="pd_request" id="pd_request_label">$:_('I want to apply* for <a href="https://help.archive.org/help/program-overview/" target="_blank">special print disability access</a> through a qualifying program.')</label>


Suggested change

<label for="pd_request" id="pd_request_label">$:_('I want to apply* for <a href="https://help.archive.org/help/program-overview/" target="_blank">special print disability access</a> through a qualifying program.')</label>

<label for="pd_request" id="pd-request-label">$:_('I want to apply* for <a href="https://help.archive.org/help/program-overview/" target="_blank">special print disability access</a> through a qualifying program.')</label>

HTML class names and IDs should be written using kebab-case.

jimchamp · 2025-12-22T19:15:51Z

openlibrary/templates/account/create.html

-            <div id="pda-selector" class="ol-signup-form__select hidden">
-                <div class="ol-signup-form__error" id="pd_programMessage"></div>
-                <select id="pd_program" name="pd_program" aria-label="$_('Select qualifying program')">
+            <div id="pda-selector" class="ol-signup-form__select hidden" role="region" aria-labelledby="pd_request_label" aria-hidden="true">


Suggested change

<div id="pda-selector" class="ol-signup-form__select hidden" role="region" aria-labelledby="pd_request_label" aria-hidden="true">

<div id="pda-selector" class="ol-signup-form__select hidden" role="region" aria-labelledby="pd-request-label" aria-hidden="true">

jimchamp · 2025-12-22T19:22:34Z

openlibrary/plugins/openlibrary/js/signup.js

+            if (pdaSelector) {
+                pdaSelector.setAttribute('aria-required', 'true')
+            }


Suggested change

if (pdaSelector) {

pdaSelector.setAttribute('aria-required', 'true')

}

pdaSelector.setAttribute('aria-required', 'true')

jimchamp · 2025-12-22T19:22:56Z

openlibrary/plugins/openlibrary/js/signup.js

+            if (pdaSelector) {
+                pdaSelector.setAttribute('aria-required', 'false')
+            }


Suggested change

if (pdaSelector) {

pdaSelector.setAttribute('aria-required', 'false')

}

pdaSelector.setAttribute('aria-required', 'false')

mystic-06 · 2025-12-24T10:54:16Z

Thanks for the review and for the feedback!
I’ll update the newly added HTML classes and IDs to use kebab-case and remove the guard checks as suggested. I’ll push an updated commit shortly.

accesslint

There are accessibility issues in these changes.

openlibrary/templates/account/create.html

jimchamp

Once again, sorry for the massive delay. The signup.test.js file needs some updates in order for the tests to pass. Using git apply with the following diff will fix the test cases:

diff --git a/tests/unit/js/signup.test.js b/tests/unit/js/signup.test.js
index 5314c2dac..de61b41b0 100644
--- a/tests/unit/js/signup.test.js
+++ b/tests/unit/js/signup.test.js
@@ -13,10 +13,14 @@ beforeEach(() => {
       <label for="password">Password</label>
       <input type="password" id="password">
       <div id="rpd-checkbox" class="ol-signup-form__checkbox">
-        <input id="pd_request" type="checkbox">
-        <label for="pd_request">PD Checkbox</label>
+        <input id="pd-request" type="checkbox">
+        <label for="pd-request">PD Checkbox</label>
+      </div>
+      <div id="pda-selector" class="ol-signup-form__select hidden">
+        <select id="pd_program" name="pd_program" aria-label="$_('Select qualifying program')" aria-describedby="pd-program-advisory" aria-invalid="false" aria-required="false">
+            <option value="" disabled selected>"Select qualifying program"</option>
+        </select>
       </div>
-      <div id="pda-selector" class="ol-signup-form__select hidden"></div>
     </form>
   `;
 });
@@ -223,7 +227,7 @@ describe('Print disability tests', () => {
     beforeEach(() => {
         initSignupForm();

-        checkbox = document.querySelector('#pd_request');
+        checkbox = document.querySelector('#pd-request');
         selector = document.querySelector('#pda-selector')
     })

Once that's done, the tests will pass and I'll be happy to merge this. Thanks for your patience and good work!

mystic-06 · 2026-01-11T19:36:01Z

Thanks for the feedback! I’ve fixed the related tests. Please let me know if anything else needs tweaking.

@jimchamp

…n on the registration page

for more information, see https://pre-commit.ci

mystic-06 · 2026-01-31T19:36:38Z

Hi @jimchamp ! Just checking on the status of this PR — please let me know if anything is needed from my side. Thanks!

jimchamp

Thanks @mystic-06!

github-actions bot assigned jimchamp Dec 6, 2025

github-actions bot added the Priority: 2 Important, as time permits. [managed] label Dec 6, 2025

mystic-06 force-pushed the fix/10801-registration-form-accessibility branch from 9ab795a to 0140821 Compare December 9, 2025 09:18

github-actions bot added the Needs: Response Issues which require feedback from lead label Dec 10, 2025

jimchamp requested changes Dec 22, 2025

View reviewed changes

jimchamp added Needs: Submitter Input Waiting on input from the creator of the issue/pr [managed] and removed Needs: Response Issues which require feedback from lead labels Dec 22, 2025

github-actions bot removed the Needs: Submitter Input Waiting on input from the creator of the issue/pr [managed] label Dec 24, 2025

mystic-06 force-pushed the fix/10801-registration-form-accessibility branch from d1ab706 to 380be2f Compare December 24, 2025 15:08

accesslint bot reviewed Dec 24, 2025

View reviewed changes

openlibrary/templates/account/create.html Show resolved Hide resolved

mystic-06 force-pushed the fix/10801-registration-form-accessibility branch from 380be2f to 495fc6b Compare December 24, 2025 15:16

mystic-06 requested a review from jimchamp December 24, 2025 16:33

github-actions bot added the Needs: Response Issues which require feedback from lead label Dec 25, 2025

jimchamp requested changes Jan 10, 2026

View reviewed changes

jimchamp added Needs: Submitter Input Waiting on input from the creator of the issue/pr [managed] and removed Needs: Response Issues which require feedback from lead labels Jan 10, 2026

github-actions bot removed the Needs: Submitter Input Waiting on input from the creator of the issue/pr [managed] label Jan 11, 2026

mystic-06 force-pushed the fix/10801-registration-form-accessibility branch from 73395f3 to 079d73d Compare January 11, 2026 19:29

github-actions bot added the Needs: Response Issues which require feedback from lead label Jan 12, 2026

mystic-06 and others added 4 commits January 17, 2026 23:42

fix: Add ARIA attributes and roles to print disability dynamic sectio…

322f4bd

…n on the registration page

[pre-commit.ci] auto fixes from pre-commit.com hooks

e420cd8

for more information, see https://pre-commit.ci

fix: update ARIA IDs to kebab-case and remove unnecessary guards

de7e67e

test: update signup tests for ARIA and ID changes

1e4b83d

mystic-06 force-pushed the fix/10801-registration-form-accessibility branch from 079d73d to 1e4b83d Compare January 17, 2026 18:13

jimchamp approved these changes Feb 20, 2026

View reviewed changes

jimchamp merged commit 82c3fe0 into internetarchive:master Feb 20, 2026
4 of 5 checks passed

	<label for="pd_request" id="pd_request_label">$:_('I want to apply* for <a href="https://help.archive.org/help/program-overview/" target="_blank">special print disability access</a> through a qualifying program.')</label>
	<label for="pd_request" id="pd-request-label">$:_('I want to apply* for <a href="https://help.archive.org/help/program-overview/" target="_blank">special print disability access</a> through a qualifying program.')</label>

	<div id="pda-selector" class="ol-signup-form__select hidden" role="region" aria-labelledby="pd_request_label" aria-hidden="true">
	<div id="pda-selector" class="ol-signup-form__select hidden" role="region" aria-labelledby="pd-request-label" aria-hidden="true">

Uh oh!

Conversation

mystic-06 commented Dec 6, 2025

Technical

Testing

Uh oh!

mystic-06 commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jimchamp left a comment

Choose a reason for hiding this comment

Uh oh!

jimchamp Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

mystic-06 Dec 24, 2025

Choose a reason for hiding this comment

Uh oh!

jimchamp Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

jimchamp Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

jimchamp Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

jimchamp Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

jimchamp Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

mystic-06 commented Dec 24, 2025

Uh oh!

accesslint bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jimchamp left a comment

Choose a reason for hiding this comment

Uh oh!

mystic-06 commented Jan 11, 2026

Uh oh!

mystic-06 commented Jan 31, 2026

Uh oh!

jimchamp left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mystic-06 commented Dec 9, 2025 •

edited

Loading