Skip to content

Fix reopen trigger to be icon-only, fix policy link a11y/hover - #12

Open
Castellon-ACM wants to merge 2 commits into
mainfrom
fix/reopen-trigger-and-link-a11y
Open

Castellon-ACM wants to merge 2 commits into
mainfrom
fix/reopen-trigger-and-link-a11y

Conversation

@Castellon-ACM

Copy link
Copy Markdown
Contributor

What changed

  • Reopen trigger (CookieNotice::render_reopen_trigger()): previously rendered as a text pill reading "Cookie preferences" ("Preferencias de cookies" in Spanish) — reported live on a production site as visually inconsistent with the banner's own cookie icon. Now icon-only: reuses the exact same .frcn-cookie-notice__icon glyph shown inside the banner, in a 44×44px circular button, with the accessible name carried entirely by aria-label instead of visible text.
  • Policy link: same fix as closemarketing/frontblocks#316 — the link now uses the linked page's own title instead of a generic "Learn more" label (WCAG 2.4.4 — a screen reader user tabbing through links out of context previously had no way to know where it led), falling back to "Learn more" only if the page has no title. Added explicit hover/focus color so a theme's global a:hover style can't make the text unreadable against its background.

Tests

  • tests/Unit/CookieNoticeAccessibilityTest.php: new test asserting the reopen trigger's markup is icon-only with an aria-label, no visible text content.
  • tests/Unit/CookieNoticePolicyPageTest.php: new tests for the policy-page-title link text and its fallback to "Learn more" when the page has no title.
  • composer lint / composer phpstan: clean.
  • Could not run composer test locally (no WordPress test DB provisioned in this environment) — relying on CI's PHPUnit workflow to confirm; existing tests referencing frcn-cookie-reopen/the policy link only assert on id/permalink presence, not the old visible text, so they should be unaffected.

🤖 Generated with Claude Code

The persistent "Cookie preferences" reopen trigger rendered as a text
pill ("Preferencias de cookies" in Spanish) instead of reusing the same
cookie icon already shown inside the banner. Reported live on a
production site. Now icon-only (the same .frcn-cookie-notice__icon
glyph, sized to its own 44x44px circular button), with the accessible
name carried entirely by aria-label instead of visible text.

Also fixes the same "Learn more" link accessibility issue already fixed
in FrontBlocks (closemarketing/frontblocks#316): the link now uses the
policy page's own title instead of a generic label (WCAG 2.4.4), and
gets explicit hover/focus colors so a theme's global a:hover style can't
make the text unreadable against its background.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The button has the hidden HTML attribute, but .frcn-cookie-reopen's own
display: flex rule (an author style) overrode the browser's built-in
[hidden] { display: none }, regardless of selector specificity — so it
showed up immediately for every visitor instead of only appearing once
a decision cookie exists. Reported live by a user testing the branch.

Add the missing .frcn-cookie-reopen[hidden] override, matching the same
pattern already used for .frcn-cookie-preferences. New regression test
locks this in.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant