maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

autofocus Skip Link on keyboard navigation (#13828)

Browse source 
* autofocus Skip Link on keyboard navigation

* focus Skip Link on route change if Skip Link exists

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
This commit is contained in:
Monica Mateiu 2021-05-27 12:13:46 +01:00 • committed by GitHub
parent 7b05bd81fe
commit 486c1890f2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/base.js.erb
View file

@ -123,6 +123,10 @@ var instantClick
prog.classList.remove("showing");
if (newUrl) {
const skipLink = document.querySelector('.skip-content-link');
if (skipLink) {
skipLink.focus();
}
history.pushState(null, null, newUrl.replace("?samepage=true","").replace("&samepage=true",""))
var hashIndex = newUrl.indexOf('#'),

17
app/assets/stylesheets/components/header.scss
View file

@ -134,14 +134,17 @@
height: var(--header-height);
transform: translate(-50%, -200%);
transition: transform var(--transition-props);
}
&:focus,
&:focus-within {
pointer-events: auto;
transform: translate(-50%, 0);
outline: none;
border: 2px solid var(--header-button-focus-color);
}
.js-focus-visible .skip-content-link:focus:not(.focus-visible) {
visibility: hidden;
}
.js-focus-visible .skip-content-link:focus {
pointer-events: auto;
transform: translate(-50%, 0);
outline: none;
border: 2px solid var(--header-button-focus-color);
}
.pwa-nav-buttons {