Add skip link for keyboard users. Fix #5406 (#5780)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

CHANGELOG.txt

@@ -52,6 +52,7 @@ Changelog
  * Deprecate use of unidecode within form builder field names (Michael van Tellingen, LB (Ben Johnston))
  * Improve error feedback when editing a page with a missing model class (Andy Babic)
  * Change Wagtail tabs implementation to only allow slug-formatted tab identifiers, reducing false positives from security audits (Matt Westcott)
+ * Add skip link for keyboard users to bypass Wagtail navigation in the admin (Martin Coote)
  * Fix: Support IPv6 domain (Alex Gleason, Coen van der Kamp)
  * Fix: Ensure link to add a new user works when no users are visible in the users list (LB (Ben Johnston))
  * Fix: `AbstractEmailForm` saved submission fields are now aligned with the email content fields, `form.cleaned_data` will be used instead of `form.fields` (Haydn Greatnews)

client/scss/components/_skiplink.scss

@@ -0,0 +1,16 @@
+.skiplink {
+    display: block;
+    position: fixed;
+    top: -1000rem;
+    left: 1rem;
+    z-index: 30;
+
+    &:focus {
+        top: 1rem;
+    }
+
+    &.button {
+        background: $color-green-darker;
+        border: $color-green-darker;
+    }
+}

client/scss/settings/_variables.scss

@@ -39,6 +39,7 @@ $color-orange: #e9b04d;
 $color-orange-dark: #bb5b03;
 $color-green: #189370;
 $color-green-dark: #157b57;
+$color-green-darker: #105d42; // White has AAA compatibility when this is used in bgd.
 $color-salmon: #f37e77;
 $color-salmon-light: #fcf2f2;
 $color-white: #fff;

client/scss/styles.scss

@@ -129,6 +129,7 @@ These are classes for components.
 @import 'components/privacy-indicator';
 @import 'components/status-tag';
 @import 'components/button-select';
+@import 'components/skiplink';
 
 
 /* OVERRIDES

client/src/includes/initSkipLink.js

@@ -0,0 +1,25 @@
+const initSkipLink = () => {
+  // Inspired by https://github.com/selfthinker/dokuwiki_template_writr/blob/master/js/skip-link-focus-fix.js
+
+  const skiplink = document.querySelector('[data-skiplink]');
+  const main = document.querySelector('main');
+
+  const handleBlur = () => {
+    main.removeAttribute('tabindex');
+    main.removeEventListener('blur', handleBlur);
+    main.removeEventListener('focusout', handleBlur);
+  };
+
+  const handleClick = () => {
+    main.setAttribute('tabindex', -1);
+    main.addEventListener('blur', handleBlur);
+    main.addEventListener('focusout', handleBlur);
+    main.focus();
+  };
+
+  if (skiplink && main) {
+    skiplink.addEventListener('click', handleClick);
+  }
+};
+
+export { initSkipLink };

client/src/index.js

@@ -12,6 +12,7 @@ import PublicationStatus from './components/PublicationStatus/PublicationStatus'
 import Transition from './components/Transition/Transition';
 import { initFocusOutline } from './utils/focus';
 import { initSubmenus } from './includes/initSubmenus';
+import { initSkipLink } from './includes/initSkipLink';
 import { initUpgradeNotification } from './components/UpgradeNotification';
 
 export {
@@ -26,5 +27,6 @@ export {
   initExplorer,
   initFocusOutline,
   initSubmenus,
+  initSkipLink,
   initUpgradeNotification,
 };

docs/releases/2.10.rst

@@ -70,6 +70,7 @@ Other features
  * Deprecate use of unidecode within form builder field names (Michael van Tellingen, LB (Ben Johnston))
  * Improve error feedback when editing a page with a missing model class (Andy Babic)
  * Change Wagtail tabs implementation to only allow slug-formatted tab identifiers, reducing false positives from security audits (Matt Westcott)
+ * Add skip link for keyboard users to bypass Wagtail navigation in the admin (Martin Coote)
 
 
 Bug fixes

wagtail/admin/static_src/wagtailadmin/app/wagtailadmin.entry.js

@@ -6,6 +6,7 @@ import {
   initExplorer,
   initFocusOutline,
   initSubmenus,
+  initSkipLink,
   initUpgradeNotification,
 } from 'wagtail-client';
 
@@ -37,4 +38,5 @@ document.addEventListener('DOMContentLoaded', () => {
   initFocusOutline();
   initSubmenus();
   initUpgradeNotification();
+  initSkipLink();
 });

wagtail/admin/static_src/wagtailadmin/js/core.js

@@ -338,7 +338,6 @@ $(function() {
     });
 });
 
-
 // =============================================================================
 // Wagtail global module, mainly useful for debugging.
 // =============================================================================

wagtail/admin/templates/wagtailadmin/base.html

@@ -24,7 +24,7 @@
         <div class="explorer__wrapper" data-explorer-menu></div>
     </aside>
 
-    <main class="content-wrapper" role="main">
+    <main class="content-wrapper" role="main" id="main">
         <div class="content">
             {# Always show messages div so it can be appended to by JS #}
             <div class="messages">

wagtail/admin/templates/wagtailadmin/skeleton.html

@@ -33,6 +33,8 @@
 
     {% block js %}{% endblock %}
 
+    <a class="skiplink button" href="#main" data-skiplink>{% trans 'Skip to main content' %}</a>
+
     <div class="wrapper">
        {% block furniture %}{% endblock %}
     </div>