fix(a11y): correct heading hierarchy in React components#1634
Open
juanmitriatti wants to merge 1 commit intodevfrom
Open
fix(a11y): correct heading hierarchy in React components#1634juanmitriatti wants to merge 1 commit intodevfrom
juanmitriatti wants to merge 1 commit intodevfrom
Conversation
Fixed heading hierarchy issues to improve accessibility by correcting heading level skips in AnchorMenu, ImageCarousel, and ImageGalleryCarousel. - Changed AnchorMenu from h4 to h2 to avoid skipping heading levels - Changed ImageCarousel and ImageGalleryCarousel from h3 to h2 - Updated CSS in unity-bootstrap-theme to maintain visual appearance - Used heading-three variables for h2 in image captions - Added explicit font-size, line-height, and letter-spacing - Ensures h2 displays identically to previous h3/h4 styles These changes ensure proper semantic HTML structure without affecting visual design.
Collaborator
|
Storybook deployed at https://unity-uds-staging.s3.us-west-2.amazonaws.com/pr-1634/index.html |
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
2 participants
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.
Fix heading hierarchy accessibility issues in React components
Fixed heading hierarchy issues to improve accessibility by correcting heading level skips in AnchorMenu,
ImageCarousel, and ImageGalleryCarousel.
These changes ensure proper semantic HTML structure without affecting visual design.
Description
Problem:
Heading hierarchy accessibility errors were occurring in several React components due to skipped heading levels. For
example, AnchorMenu was using h4 which skipped from h1 (page title) to h4, and image carousels were using h3 which
could skip heading levels depending on page context.
Added
h2 styles for image-gallery context
$heading-three-font-size,$heading-three-line-height,$heading-three-letter-spacing) instead of hardcoded valuesTesting Steps:
cd packages/unity-react-core && yarn storybookyarn test- all tests should passChecklist
Important Reminders
Links