Skip to content

fix(a11y): add title attributes to iframes (WCAG 2.4.1 H64) - #13012

Merged
lokesh merged 2 commits into
masterfrom
a11y/iframe-titles
Jul 3, 2026
Merged

fix(a11y): add title attributes to iframes (WCAG 2.4.1 H64)#13012
lokesh merged 2 commits into
masterfrom
a11y/iframe-titles

Conversation

@mekarpeles

Copy link
Copy Markdown
Member

Summary

Iframes must have a title attribute so assistive technology users can identify their purpose before deciding to navigate into them (WCAG 2.4.1 H64, frame-title axe rule, impact=serious).

Two iframes fixed:

File Iframe Title added
templates/account/ia_thirdparty_logins.html IA social login widget (login + signup pages) "Sign in with a third-party account"
macros/BookPreview.html Book preview floating dialog "Book preview"

Excluded: the reCAPTCHA iframe on the signup page is injected by Google's JS library — its title is not under OL template control.

What this changes

- <iframe id="ia-third-party-logins" src="...">
+ <iframe id="ia-third-party-logins" title="Sign in with a third-party account" src="...">

- <iframe style="width:100%; height:515px"></iframe>
+ <iframe title="Book preview" style="width:100%; height:515px"></iframe>

Test plan

Playwright regression tests (frame-title.spec.ts) are staged on branch 12885/playwright-e2e-tests (PR #12998). Once the Playwright e2e infrastructure merges, CI will assert zero frame-title violations on login, signup, and work pages.

To verify manually:

OL_BASE_URL=https://openlibrary.org npx playwright test a11y/frame-title
# Will fail until this PR deploys (expected — proves the tests work)

Related

Iframes must have a title attribute so screen readers can identify
their purpose before deciding whether to enter them.

- ia_thirdparty_logins.html: title="Sign in with a third-party account"
  (IA social login widget rendered on login and signup pages)
- BookPreview.html: title="Book preview"
  (floating preview dialog, JS-populated on demand)

Excluded: reCAPTCHA iframe on signup page is third-party JS (Google);
its title is not under OL template control.

Playwright regression test staged in #12998
(tests/e2e/a11y/frame-title.spec.ts).

Fixes: frame-title axe rule / WCAG 2.4.1 H64
Closes: #13008
@mekarpeles mekarpeles added the Theme: Accessibility Work related to disability accessibility. [managed] label Jun 23, 2026
mekarpeles added a commit that referenced this pull request Jun 23, 2026
Playwright axe-core tests covering the fix in PR #13012:
- login page: ia_thirdparty_logins iframe must have title
- work page: BookPreview iframe must have title
- signup page: OL iframes must have title (reCAPTCHA excluded)

All three tests currently fail against openlibrary.org (expected —
fix pending #13012 merge); will pass once the fix deploys.
mekarpeles added a commit that referenced this pull request Jun 24, 2026
Playwright axe-core tests covering the fix in PR #13012:
- login page: ia_thirdparty_logins iframe must have title
- work page: BookPreview iframe must have title
- signup page: OL iframes must have title (reCAPTCHA excluded)

All three tests currently fail against openlibrary.org (expected —
fix pending #13012 merge); will pass once the fix deploys.

@lokesh lokesh left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@lokesh
lokesh merged commit 5ea2376 into master Jul 3, 2026
7 of 8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Theme: Accessibility Work related to disability accessibility. [managed]

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants