Skip to content

Fix accessibility issues arising from code highlighter #277

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
FilisLiu merged 22 commits into from
Jun 30, 2026
Merged

Fix accessibility issues arising from code highlighter #277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
11076a5
Add component reference links for various components in the design sy…
FilisLiu May 18, 2026
aee4e21
Put back buttons
FilisLiu May 19, 2026
926e587
format
FilisLiu May 19, 2026
a4a3413
t18n for brand name
FilisLiu May 19, 2026
854ae90
t18n for base url
FilisLiu May 19, 2026
15e5436
fix wrong heading in inset text
FilisLiu May 19, 2026
0ac9494
rm component_reference caller
FilisLiu May 19, 2026
e27cf0f
Extend component_preview
FilisLiu May 19, 2026
cf42c2a
rm newlines
FilisLiu May 19, 2026
ee32f6e
streamline signature in views
FilisLiu May 27, 2026
1b4a944
fix locale
FilisLiu May 27, 2026
b423fd5
streamline signatures
FilisLiu May 27, 2026
181cce2
update tests
FilisLiu Jun 1, 2026
31690be
Fix component_preview locale key mismatch and tidy refs
FilisLiu Jun 1, 2026
47b25f0
Revert button.rb change — keep it out of this PR
FilisLiu Jun 1, 2026
03e1d95
Fix WCAG CI runner and add compliant preview pages to pa11y tests
FilisLiu Jun 3, 2026
3072ab6
Darken hljs syntax-highlighting colors for WCAG AA contrast
FilisLiu Jun 3, 2026
aeba661
Further darken hljs colors for improved WCAG AA compliance
FilisLiu Jun 3, 2026
69cec09
revert colors
FilisLiu Jun 5, 2026
373121c
add urls
FilisLiu Jun 5, 2026
9ae3859
Merge branch 'main' into feature/hljs-contrast-fix
FilisLiu Jun 29, 2026
e72700d
Update syntax highlighting background color in nhsuk.scss for improve…
FilisLiu Jun 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/assets/stylesheets/design_system/_hljs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
.hljs-quote,
.hljs-template-tag {
/* var(--highlight-namespace) */
color: #b75501;
color: #b25301;
}

.hljs-selector-class {
Expand Down Expand Up @@ -84,7 +84,7 @@
.hljs-title,
.hljs-literal {
/* var(--highlight-literal) */
color: #b75501;
color: #b25301;
}

.hljs-bullet,
Expand Down
5 changes: 5 additions & 0 deletions app/assets/stylesheets/design_system/govuk.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,11 @@
overflow-x: auto;
overflow-y: auto;
padding: 0.5rem;

&:focus {
outline: 3px solid #fd0;
outline-offset: 2px;
}
}

.app-example__code pre {
Expand Down
7 changes: 6 additions & 1 deletion app/assets/stylesheets/design_system/nhsuk.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,11 @@
overflow-x: auto;
overflow-y: auto;
padding: 0.5rem;

&:focus {
outline: 3px solid #fd0;
outline-offset: 2px;
}
}

.app-example__code pre {
Expand All @@ -36,7 +41,7 @@
}

.app-example__code pre code.hljs {
background: transparent;
background: #f0f4f5;
}

.app-example__copy-button {
Expand Down
2 changes: 1 addition & 1 deletion lib/design_system/generic/builders/code.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ def render_code(code, language)
content_tag(:div, class: 'app-example__code', data: { controller: 'ds--clipboard' }) do
content_tag(:button, 'Copy', class: 'app-example__copy-button',
data: { action: 'click->ds--clipboard#copy', 'ds--clipboard-target': 'buttonText' }) +
content_tag(:div, class: 'app-example__scroll') do
content_tag(:div, class: 'app-example__scroll', tabindex: 0) do
content_tag(:pre, data: { 'ds--clipboard-target': 'source' }) do
content_tag(:code, code, data: { controller: 'ds--code-highlight' },
class: "hljs language-#{language}")
Expand Down
Loading