13 links rely on color to be distinguishable on item view page #79
+32
−0
Conversation
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
Adds underline and focus styles to links in full and simple item pages to meet WCAG 1.4.1 requirements, ensuring links are distinguishable by more than color alone and have visible focus outlines.
Updated SCSS selectors to prevent Font Awesome icon links (.fab, .fas, .far) from receiving underline styles intended for accessible text links, ensuring visual consistency and improved accessibility compliance.
Replaces underline styles with bold and italic for non-button links in full and simple item page components to ensure links are distinguishable by more than color alone, addressing WCAG 1.4.1 requirements.
There was a problem hiding this comment.
Pull Request Overview
This pull request enhances accessibility on item view pages by making links distinguishable through more than just color, addressing WCAG 1.4.1 compliance. The changes add visual styling (bold, italic, underlines) and keyboard focus indicators to standard links while excluding button-like and icon elements.
Key Changes:
- Added CSS rules to make links bold and italic by default
- Enhanced hover/focus states with increased underline thickness
- Added visible focus outlines for keyboard navigation
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 7 comments.
| File | Description |
|---|---|
src/app/item-page/simple/item-page.component.scss |
Added accessibility styles for links within .item-page container, excluding buttons, badges, navigation links, and icon classes |
src/app/item-page/full/full-item-page.component.scss |
Added similar accessibility styles for links within .full-item-info container, with fewer element exclusions than the simple view |
Replaces hardcoded #1459c4 color with the $primary SCSS variable for link focus outlines in both full and simple item page components to improve theme consistency.
Added .badge, .nav-link, and .dropdown-item to the list of excluded classes for custom link styles to prevent unintended styling on these elements and improve WCAG compliance.
Cleaned up SCSS for full and simple item pages by removing redundant !important flags from link styling rules, improving maintainability and specificity.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This pull request improves accessibility for links on both the full and simple item pages by ensuring they are visually distinguishable by more than just color, in compliance with WCAG 1.4.1 guidelines. The changes add underlines and focus outlines to links that are not styled as buttons or icons.
Accessibility improvements:
full-item-page.component.scssso that links in.full-item-info(excluding buttons and icons) are underlined, with increased thickness on hover/focus, and a visible outline for keyboard focus.item-page.component.scssfor links in.item-page, ensuring consistent accessibility enhancements for simple item pages.