fix: move footer to main layout and improve contrast for WCAG compliance#542
Conversation
…ibility standarts
…move components directory, pre-commit run
cuteshaun
force-pushed
the
cuteshaun/fix-footer-a11y
branch
from
820131d to
34eaebf
Compare
docs/_sass/custom/custom.scss
Outdated
| .site-footer { | ||
| position: static; | ||
| width: 100%; | ||
| color: #6a686d; |
There was a problem hiding this comment.
Fixes colour contrast for light mode (🎉) but makes it worse in dark mode.
(new: #6a686d contrast ratio 2:27:1)
(old: #959396 contrast ratio 4:9:1)
Pretty sure we need to be theme-agnostic here and I think using $body-text-color from the upstream scss code works:
| 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.
There was a problem hiding this comment.
Thanks for noticing this! My bad, forgot to check it in dark mode. I think the body text color fits pretty well, though.
samcunliffe
added
enhancement
|
Link checker: 🟨 yellow card. |
|
|
||
| <div class="side-bar"> | ||
| <div class="site-header" role="banner"> | ||
| <a href="{{ '/' | relative_url }}" class="site-title lh-tight" |
There was a problem hiding this comment.
Oh! I'm sorry for doubting you, dear link-checker. I take back the yellow card.
|
Thanks again! @all-contributors please add @cuteshaun for a11y and code! |
|
I've put up a pull request to add @cuteshaun! 🎉 |
Adds @cuteshaun as a contributor for a11y, code. This was requested by samcunliffe [in this comment](#542 (comment)) --------- Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com>
2 participants
This PR resolves two WCAG 2.1 AA accessibility issues observed when the page is zoomed to 400%:
Issues
Changes
Header → Main Content → Footer
New footer position:
Closes: #538
Related upstream: just-the-docs/just-the-docs#1667
🔎 Note: The upstream issue has been opened in JustTheDocs. However, since the upstream review may take time (last comments in issues in February 2025), this PR applies a local fix in the meantime.
🧪 Testing
Confirmed fix via keyboard navigation at 400% zoom
Verified footer contrast with WCAG contrast checker tools