From 77105235f22a9ecf73455415934cc957ccb449b7 Mon Sep 17 00:00:00 2001 From: Neil Dewhurst Date: Fri, 8 Dec 2023 14:16:25 +0000 Subject: [PATCH 01/19] a11y updates --- preview-src/index.adoc | 6 ++++++ src/css/body.css | 11 +++++++++++ src/css/doc.css | 8 ++++++-- src/css/vars.css | 4 ++-- src/js/14-external-links.js | 1 + src/layouts/default.hbs | 1 + src/partials/article.hbs | 1 + src/partials/body.hbs | 1 + src/partials/breadcrumbs.hbs | 2 +- src/partials/main.hbs | 6 ++++-- src/partials/pagination.hbs | 6 +++--- 11 files changed, 37 insertions(+), 10 deletions(-) diff --git a/preview-src/index.adoc b/preview-src/index.adoc index ea95298f..afca1ddc 100644 --- a/preview-src/index.adoc +++ b/preview-src/index.adoc @@ -740,3 +740,9 @@ For more information, see the link:/ops-manual[Operations Manual^] . Text <> text text. . Text <> text text. . Text `<>` text text. + + +== skip-to-content links +Link to a section down the page: link:#skip-to-content[] + +++++++ diff --git a/src/css/body.css b/src/css/body.css index 25323068..5fe388ce 100644 --- a/src/css/body.css +++ b/src/css/body.css @@ -7,3 +7,14 @@ display: flex; } } + +.show-for-sr, .show-on-focus { + position: absolute!important; + width: 1px!important; + height: 1px!important; + padding: 0!important; + overflow: hidden!important; + clip: rect(0,0,0,0)!important; + white-space: nowrap!important; + border: 0!important; +} diff --git a/src/css/doc.css b/src/css/doc.css index fb30eac7..9f9add06 100644 --- a/src/css/doc.css +++ b/src/css/doc.css @@ -171,11 +171,15 @@ body { .doc a { font-weight: 600; color: var(--link-font-color); + /* border-bottom: 1px solid var(--link-font-color); */ + /* text-decoration: none; */ + text-decoration: underline; } -.doc a:hover, -.doc a:hover code:hover { +.doc a:hover, .doc a:focus, +.doc a:hover code:hover, .doc a:focus code:focus { color: var(--link_hover-font-color); + /* border-bottom: 1px solid var(--link_hover-font-color); */ } .doc code a { diff --git a/src/css/vars.css b/src/css/vars.css index 6d2cdcdc..7a62a4b2 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -296,8 +296,8 @@ /* links */ --link-font-color: rgba(var(--colors-baltic-50)); - --link_hover-font-color: rgba(var(--colors-baltic-40)); - --link_visited-font-color: rgba(var(--colors-baltic-55)); + --link_hover-font-color: rgba(var(--colors-baltic-55)); + --link_visited-font-color: rgba(var(--colors-neutral-60)); --link_unresolved-font-color: var(--important-color); /* abstract */ diff --git a/src/js/14-external-links.js b/src/js/14-external-links.js index 23023201..3f01041c 100644 --- a/src/js/14-external-links.js +++ b/src/js/14-external-links.js @@ -4,5 +4,6 @@ document.querySelectorAll('.doc a[href^="http"], .doc a[target="_blank"]') .forEach(function (el) { el.classList.add('external') + el.setAttribute('aria-label', 'Link label (opens in new tab)') }) })() diff --git a/src/layouts/default.hbs b/src/layouts/default.hbs index 5f06a87b..4feef1bc 100644 --- a/src/layouts/default.hbs +++ b/src/layouts/default.hbs @@ -4,6 +4,7 @@ {{> head defaultPageTitle='Untitled'}} + {{> header}} {{> body}} {{> footer}} diff --git a/src/partials/article.hbs b/src/partials/article.hbs index 56948f0c..1d3b35dc 100644 --- a/src/partials/article.hbs +++ b/src/partials/article.hbs @@ -1,3 +1,4 @@ +
{{#if (eq page.layout '404')}}

{{{or page.title 'Page Not Found'}}}

diff --git a/src/partials/body.hbs b/src/partials/body.hbs index 4a0ac259..9ab52a65 100644 --- a/src/partials/body.hbs +++ b/src/partials/body.hbs @@ -1,4 +1,5 @@
+ {{> nav}} {{> main}}
diff --git a/src/partials/breadcrumbs.hbs b/src/partials/breadcrumbs.hbs index c03f1729..27822d8c 100644 --- a/src/partials/breadcrumbs.hbs +++ b/src/partials/breadcrumbs.hbs @@ -1,4 +1,4 @@ -