From 15fed1cce4d7d16898d26a4736a4e92ff0293560 Mon Sep 17 00:00:00 2001 From: Suzanne Aitchison Date: Thu, 18 Nov 2021 13:45:08 +0000 Subject: [PATCH] Revise skip link behaviour (#15401) * Revise skip link route change behaviour * remove cypress test for divergent behaviour no longer needed * fix import path * remove duplicate styles - woops * use translated string --- app/assets/javascripts/base.js.erb | 9 +++-- app/assets/stylesheets/admin.scss | 1 + app/assets/stylesheets/components/header.scss | 28 +--------------- .../stylesheets/components/skip-link.scss | 26 +++++++++++++++ app/javascript/packs/admin.js | 1 + app/views/layouts/_top_bar.html.erb | 1 + app/views/layouts/admin.html.erb | 3 +- .../searchFlows/skipToContent.spec.js | 33 ------------------- 8 files changed, 36 insertions(+), 66 deletions(-) create mode 100644 app/assets/stylesheets/components/skip-link.scss delete mode 100644 cypress/integration/seededFlows/searchFlows/skipToContent.spec.js diff --git a/app/assets/javascripts/base.js.erb b/app/assets/javascripts/base.js.erb index 987aa7f17..f33dbf96e 100644 --- a/app/assets/javascripts/base.js.erb +++ b/app/assets/javascripts/base.js.erb @@ -127,11 +127,10 @@ var instantClick prog.classList.remove("showing"); if (newUrl) { - const skipLink = document.querySelector('.skip-content-link'); - const noSkipLink = newUrl.includes('/search?') && ['iOS', 'Android'].includes(Runtime.currentOS()); - if (skipLink && !noSkipLink) { - skipLink.focus(); - } + const routeChangeTarget = document.getElementById('route-change-target'); + if(routeChangeTarget) { + routeChangeTarget.focus(); + } document.getElementById('page-route-change').textContent = title; history.pushState(null, null, newUrl.replace("?samepage=true","").replace("&samepage=true","")) diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index d1115ebad..a1ca3f78c 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -4,6 +4,7 @@ @import 'scaffolds'; @import 'components/admin/users'; +@import 'components/skip-link'; // overriding Bootstrap styles label { diff --git a/app/assets/stylesheets/components/header.scss b/app/assets/stylesheets/components/header.scss index 608703e3d..ef6abad6f 100644 --- a/app/assets/stylesheets/components/header.scss +++ b/app/assets/stylesheets/components/header.scss @@ -1,4 +1,5 @@ @import '../config/import'; +@import './skip-link'; .crayons-header { --indicator-outline: var(--header-bg); @@ -126,33 +127,6 @@ } } -.skip-content-link { - position: absolute; - left: 50%; - background: var(--body-color); - color: var(--body-color-inverted); - z-index: var(--z-popover); - padding: var(--su-4); - pointer-events: none; - border-radius: var(--radius); - height: var(--header-height); - transform: translate(-50%, -200%); - transition: transform var(--transition-props); - opacity: var(--opacity-0); -} - -.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); - opacity: var(--opacity-1); -} - .pwa-nav-buttons { height: 100%; display: none; diff --git a/app/assets/stylesheets/components/skip-link.scss b/app/assets/stylesheets/components/skip-link.scss new file mode 100644 index 000000000..d0a18f87d --- /dev/null +++ b/app/assets/stylesheets/components/skip-link.scss @@ -0,0 +1,26 @@ +.skip-content-link { + position: absolute; + left: 50%; + background: var(--body-color); + color: var(--body-color-inverted); + z-index: var(--z-popover); + padding: var(--su-4); + pointer-events: none; + border-radius: var(--radius); + height: var(--header-height); + transform: translate(-50%, -200%); + transition: transform var(--transition-props); + opacity: var(--opacity-0); +} + +.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); + opacity: var(--opacity-1); +} diff --git a/app/javascript/packs/admin.js b/app/javascript/packs/admin.js index 40f54651b..2a100ad4a 100644 --- a/app/javascript/packs/admin.js +++ b/app/javascript/packs/admin.js @@ -2,6 +2,7 @@ import { Application } from '@hotwired/stimulus'; import { definitionsFromContext } from '@hotwired/stimulus-webpack-helpers'; import { LocalTimeElement } from '@github/time-elements'; // eslint-disable-line no-unused-vars import Rails from '@rails/ujs'; +import 'focus-visible'; // Initialize Rails unobtrusive scripting adapter // https://github.com/rails/rails/blob/main/actionview/app/assets/javascripts/README.md#es2015 diff --git a/app/views/layouts/_top_bar.html.erb b/app/views/layouts/_top_bar.html.erb index c64cbe4cf..a83f59c98 100644 --- a/app/views/layouts/_top_bar.html.erb +++ b/app/views/layouts/_top_bar.html.erb @@ -1,5 +1,6 @@
+ <%= t("views.main.header.skip") %>