fix(z-input): increase radio/checkbox label target size for WCAG 2.5.8#633
Open
ada-workbackai wants to merge 1 commit intomasterfrom
Open
fix(z-input): increase radio/checkbox label target size for WCAG 2.5.8#633ada-workbackai wants to merge 1 commit intomasterfrom
ada-workbackai wants to merge 1 commit intomasterfrom
Conversation
Radio and checkbox labels were only 18px high, failing WCAG 2.5.8 Level AA which requires minimum 24x24px target size for pointer inputs. Added vertical padding (3px top/bottom) and min-height (24px) to ensure labels meet accessibility requirements for users with motor impairments.
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
Fixes WCAG 2.5.8 (Target Size - Minimum) by increasing the clickable area of radio button and checkbox labels in the z-input component.
Issue: Radio and checkbox labels were only 18px in height, failing WCAG 2.5.8 Level AA which requires a minimum 24×24 CSS pixel target size for pointer inputs.
Solution: Added vertical padding (3px top/bottom) and min-height (24px) to
.radio-labeland.checkbox-labelclasses, ensuring the clickable target area meets accessibility requirements.Impact
Users with motor impairments, including those with tremors, reduced dexterity, or using touch devices, will now have an easier time selecting radio buttons and checkboxes throughout the Zanichelli applications.
Test Plan
Evidence
View before/after screenshots and full audit details:
https://app.workback.ai/dashboard/issue/5071/
WCAG Reference:
2.5.8 Target Size (Minimum)