Skip to content

fix: move footer to main layout and improve contrast for WCAG compliance #542

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
merged 7 commits into from
Jun 4, 2025
Merged

fix: move footer to main layout and improve contrast for WCAG compliance #542

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
934354b
fix: improve footer text contrast to meet WCAG 2.1 AA requirements
cuteshaun May 30, 2025
b740121
fix: move footer from sidebar to main layout template, to meet access…
cuteshaun Jun 3, 2025
34eaebf
fix: add anchor_icon component to avoid pre-commit prettier issue, re…
cuteshaun Jun 3, 2025
94fe733
fix: replace new footer color with body text color
cuteshaun Jun 3, 2025
e2bbcf0
fix: ignore Liquid template expressions in link checker
cuteshaun Jun 3, 2025
fe7c4b5
Merge branch 'main' into cuteshaun/fix-footer-a11y
cuteshaun Jun 3, 2025
fc22616
Ignore includes.
samcunliffe Jun 4, 2025
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
2 changes: 2 additions & 0 deletions docs/_config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ url: https://UCL-ARC.github.io/python-tooling

color_scheme: dark

layouts_dir: _layouts

aux_links:
Source repository: https://github.com/UCL-ARC/python-tooling
aux_links_new_tab: true
Expand Down
3 changes: 3 additions & 0 deletions docs/_includes/components/anchor_icon.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<svg viewBox="0 0 16 16" aria-hidden="true">
<use xlink:href="#svg-link"></use>
</svg>
25 changes: 25 additions & 0 deletions docs/_includes/sidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{%- comment -%} Include as: {%- include components/sidebar.html -%} Depends on:
page(?), site. Results in: HTML for the side bar. Includes: title.html,
components/site_nav.html, nav_footer_custom.html Overwrites: nav_footer_custom.
Should not be cached, because nav_footer_custom.html might depend on page. {%-
endcomment -%}

<div class="side-bar">
<div class="site-header" role="banner">
<a href="{{ '/' | relative_url }}" class="site-title lh-tight"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh! I'm sorry for doubting you, dear link-checker. I take back the yellow card.

>{% include title.html %}</a
>
<button
id="menu-button"
class="site-button btn-reset"
aria-label="Toggle menu"
aria-pressed="false"
>
<svg viewBox="0 0 24 24" class="icon" aria-hidden="true">
<use xlink:href="#svg-menu"></use>
</svg>
</button>
</div>

{% include_cached components/site_nav.html %}
</div>
44 changes: 44 additions & 0 deletions docs/_layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!doctype html>
<html lang="{{ site.lang | default: 'en-US' }}">
{% include head.html %}
<body>
<a class="skip-to-main" href="#main-content">Skip to main content</a>
{% include icons/icons.html %} {% if page.nav_enabled == true %} {% include
sidebar.html %} {% elsif layout.nav_enabled == true and page.nav_enabled ==
nil %} {% include sidebar.html %} {% elsif site.nav_enabled != false and
layout.nav_enabled == nil and page.nav_enabled == nil %} {% include
sidebar.html %} {% endif %}

<div class="main" id="top">
{% include components/header.html %}

<div class="main-content-wrap">
{% include components/breadcrumbs.html %}
<div id="main-content" class="main-content">
<main>
{% if site.heading_anchors != false %} {% capture raw_anchor_svg %}
{% include components/anchor_icon.html %} {% endcapture %} {% assign
anchor_svg = raw_anchor_svg | strip_newlines %} {% include
vendor/anchor_headings.html html=content beforeHeading="true"
anchorBody=anchor_svg anchorClass="anchor-heading"
anchorAttrs="aria-labelledby='%html_id%'" %} {% else %} {{ content
}} {% endif %} {% if page.has_toc != false %} {% include
components/children_nav.html %} {% endif %}
</main>
</div>
</div>

<footer class="site-footer">
This site uses
<a href="https://github.com/just-the-docs/just-the-docs"
>Just the Docs</a
>, a documentation theme for Jekyll.
</footer>

{% if site.search_enabled != false %} {% include
components/search_footer.html %} {% endif %}
</div>

{% if site.mermaid %} {% include components/mermaid.html %} {% endif %}
</body>
</html>
22 changes: 22 additions & 0 deletions docs/_sass/custom/custom.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
html,
body {
height: 100%;
margin: 0;
}

div.site-header {
max-height: 15em;
height: 15em;
Expand All @@ -6,3 +12,19 @@ div.site-header {
div.site-logo {
background-position: center center;
}

.main {
display: flex;
flex-direction: column;
min-height: 100%;
}

.main-content-wrap {
flex: 1;
}

.site-footer {
position: static;
width: 100%;
color: #6a686d;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixes colour contrast for light mode (🎉) but makes it worse in dark mode.

(new: #6a686d contrast ratio 2:27:1)
Screenshot 2025-06-03 at 10 25 30

(old: #959396 contrast ratio 4:9:1)
Screenshot 2025-06-03 at 10 35 21

Pretty sure we need to be theme-agnostic here and I think using $body-text-color from the upstream scss code works:

Suggested change
color: #6a686d;
color: $body-text-color;

I'm not sure about the styling though... that's probably a matter of taste. Do we prefer the footer to be a little bit less contrasty than the main body text?

Another option is to investigate intercepting the theme colours which may anyway be needed for #535.

Copy link
Contributor Author

@cuteshaun cuteshaun Jun 3, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for noticing this! My bad, forgot to check it in dark mode. I think the body text color fits pretty well, though.

}
Loading