Add focused editor accessibility guardrails for FrontBlocks features - #283
Open
Castellon-ACM wants to merge 6 commits into
Open
Add focused editor accessibility guardrails for FrontBlocks features#283Castellon-ACM wants to merge 6 commits into
Castellon-ACM wants to merge 6 commits into
Conversation
Framework-free, unit-testable functions for the checks needed by issue #261: WCAG contrast ratio calculation, non-text contrast (1.4.11), autoplay pause-control and timing safety (2.2.2), and missing image label detection. Exposed as window.FrontBlocksA11y so any block's InspectorControls can reuse them without a build step.
Registers frontblocks-a11y-utils globally and loads it as a dependency of both the Carousel and Before/After block editor scripts, so their InspectorControls can use window.FrontBlocksA11y.
The block's images are always rendered with alt="" (decorative); the before/after label is the only accessible text describing what each image shows. Flags it, advisory-only, when an image is set but its label is empty or whitespace.
Adds a real "Pause on hover/focus" toggle (frblPauseOnHover, default true) so autoplaying carousels have an actual way to be paused, including via keyboard/assistive-tech focus (Glide's own hoverpause only reacts to mouse hover). Surfaces three advisory, non-blocking inspector warnings using the shared accessibility utils: - autoplay enabled with no pause control (WCAG 2.2.2) - autoplay interval under the 5-second safety minimum - button color vs. background color below the 3:1 non-text contrast minimum (WCAG 1.4.11), only when both colors are set
Covers the frblPauseOnHover default (true) in both attribute registration filters, and its data-pause-on-hover output in the grid block content filter, including when explicitly disabled.
|
Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits. |
The JavaScript tests job only ran test:cookie-notice, so the new accessibility-utils test suite added in this branch wasn't actually enforced by CI.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #261.
Adds lightweight, advisory accessibility checks to the Carousel and Before/After inspector panels, backed by a shared, unit-testable utility module.
assets/accessibility/frontblocks-a11y-utils.js, exposed aswindow.FrontBlocksA11y): WCAG contrast ratio calculation, non-text contrast (1.4.11) check, autoplay pause-control and timing safety (2.2.2), and missing image-label detection. Framework-free so it's testable with plainnode --test, nowp.*globals required.frblPauseOnHover, defaulttrue) — a genuine remediation, not just a warning. It also pauses on keyboard/assistive-tech focus, since Glide's ownhoverpauseoption only reacts to mouse hover.<img>is always rendered withalt="", the label is the only accessible text describing what the image shows.Requirements checklist (from the issue)
@wordpress/components'Notice(accessible by design, matches this plugin's existing convention) so they're announced and keyboard-operable in the sidebar.Motion-capable features beyond Carousel (Animations, Shape Animations, Text Animation) already ship
prefers-reduced-motionCSS fallbacks but are intentionally left out of this PR's scope — a natural follow-up once this pattern proves useful, per the issue's own note.Test plan
npm run test:accessibility-utils(17 tests, pure functions, no DOM/browser needed).frblPauseOnHoverattribute default and itsdata-pause-on-hoveroutput (CarouselTest.php).composer lint(phpcs) clean.php -l/node -cclean on all touched files.