Fix accessibility issue on Show Pages: improve breadcrumb and thumbna…#3059
Open
trmccormick wants to merge 3 commits into
Open
Fix accessibility issue on Show Pages: improve breadcrumb and thumbna…#3059trmccormick wants to merge 3 commits into
trmccormick wants to merge 3 commits into
Conversation
…il title contrast Change breadcrumb link color to #000000 for better contrast (≥4.5:1). Resolves issue #3054.
Closes #3054 The tenant-configurable link color (#2e74b2) has insufficient contrast (4.16:1) against the breadcrumb background (#e9ecef), failing WCAG AA (4.5:1 minimum). Override the breadcrumb link color to #000000 in _appearance_styles.html.erb, after the dynamic link color rule, ensuring the override takes effect regardless of tenant appearance settings. Also removes the earlier, incorrect .breadcrumb-item a rule from hyku.scss which was ineffective since the inline style block loads after application.css.
trmccormick
added
accessibility
minor-ver
Test Results 3 files ± 0 3 suites ±0 15m 25s ⏱️ +31s Results for commit 3c1d07a. ± Comparison against base commit 1c32a79. This pull request removes 49 and adds 144 tests. Note that renamed tests count towards both.♻️ This comment has been updated with latest results. |
laritakr
requested changes
May 20, 2026
laritakr
left a comment
laritakr
left a comment
Collaborator
There was a problem hiding this comment.
Appearance styles doesn't seem the right place for this change. Normally things like this would be in the static css, not in the code that allows a tenant to customize their colors.
If the contrast fix is site-wide, it should probably go into hyku.scss. If it's theme-specific, there are special css files per theme.
If there's a reason it needs to be in the appearance_styles, feel free to offer additional detail.
…l.erb to hyku.scss - Remove breadcrumb/document-title link color overrides from tenant customization file (_appearance_styles.html.erb) - Add same rules to static CSS (hyku.scss) for WCAG AA compliance across all tenants - Addresses reviewer feedback that appearance styles shouldn't contain site-wide accessibility fixes
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.
Fixes #3054
Improve breadcrumb link contrast on Show Pages
Breadcrumb links on show pages (works, file sets, etc.) were using the tenant-configured link color (#2e74b2) against the Bootstrap breadcrumb background (#e9ecef), resulting in a contrast ratio of 4.16:1 — below the WCAG AA minimum of 4.5:1. This impacts readability for users with color blindness or low vision.
Root cause: The tenant link color is injected via an inline <style> block generated by _appearance_styles.html.erb (body.public-facing a { color: ; }). Because inline styles load after compiled CSS, SCSS-only fixes were overridden by the tenant appearance settings.
Fix: Added nav.breadcrumb a { color: #000000 !important; } at the end of the inline <style> block in _appearance_styles.html.erb, after the dynamic link color rule, ensuring it takes effect regardless of tenant appearance configuration.
Changes:
_appearance_styles.html.erb — Override breadcrumb link color to #000000 for WCAG AA compliance
hyku.scss — Remove earlier ineffective .breadcrumb-item a rule (wrong selector, wrong location)
Verified: Rule confirmed active in browser dev tools with computed color rgb(0, 0, 0) on the breadcrumb links.
@samvera/hyku-code-reviewers