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

@@ -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",""))
 

app/assets/stylesheets/admin.scss

@@ -4,6 +4,7 @@
 @import 'scaffolds';
 
 @import 'components/admin/users';
+@import 'components/skip-link';
 
 // overriding Bootstrap styles
 label {

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;

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);
+}

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

app/views/layouts/_top_bar.html.erb

@@ -1,5 +1,6 @@
 <div class="navigation-progress" id="navigation-progress"></div>
 <header class="crayons-header print-hidden">
+  <span id="route-change-target" tabindex="-1"></span>
   <a href="#main-content" class="skip-content-link"><%= t("views.main.header.skip") %></a>
   <div class="crayons-header__container">
     <button class="crayons-btn crayons-btn--ghost crayons-btn--icon-rounded js-hamburger-trigger inline-block m:hidden mx-2">

app/views/layouts/admin.html.erb

@@ -32,7 +32,8 @@
   data-controller="snackbar"
   data-action="snackbar:add@document->snackbar#addItem">
   <header class="crayons-header">
-    <a href="#main-content" class="skip-content-link">Skip to content</a>
+    <span id="route-change-target" tabindex="-1"></span>
+    <a href="#main-content" class="skip-content-link"><%= t("views.main.header.skip") %></a>
     <div class="crayons-header__container">
       <%= render "layouts/logo" %>
 

cypress/integration/seededFlows/searchFlows/skipToContent.spec.js

@@ -1,33 +0,0 @@
-describe('Search on homepage', () => {
-  beforeEach(() => {
-    cy.testSetup();
-    cy.visit('/');
-  });
-
-  it('Does not show the "Skip to content" link if button is pressed', () => {
-    cy.findByRole('search')
-      .findByLabelText('Search term')
-      .type('admin mcadmin');
-
-    cy.findByRole('button', { name: 'Search' }).click();
-
-    cy.url().should('include', '/search');
-
-    // Make sure the page has loaded before assertion
-    cy.findByRole('heading', { name: 'Test article' });
-    cy.get('.skip-content-link').should('not.be.visible');
-  });
-
-  it('Shows "Skip to content" if search is submitted by Enter press', () => {
-    cy.findByRole('search')
-      .findByLabelText('Search term')
-      .type('admin mcadmin{enter}');
-
-    cy.url().should('include', '/search');
-    // Make sure the page has loaded before assertion
-    cy.findByRole('heading', { name: 'Test article' });
-
-    cy.get('.skip-content-link').should('be.visible');
-    cy.get('.skip-content-link').should('have.focus');
-  });
-});