diff --git a/CHANGELOG.txt b/CHANGELOG.txt index f72af9f56e..f12d5e969a 100644 --- a/CHANGELOG.txt +++ b/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) diff --git a/client/scss/components/_skiplink.scss b/client/scss/components/_skiplink.scss new file mode 100644 index 0000000000..657cc8b992 --- /dev/null +++ b/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; + } +} diff --git a/client/scss/settings/_variables.scss b/client/scss/settings/_variables.scss index 9e9dcddb66..d9792b61d6 100644 --- a/client/scss/settings/_variables.scss +++ b/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; diff --git a/client/scss/styles.scss b/client/scss/styles.scss index eb247f7a65..f18e9195b0 100644 --- a/client/scss/styles.scss +++ b/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 diff --git a/client/src/includes/initSkipLink.js b/client/src/includes/initSkipLink.js new file mode 100644 index 0000000000..cb9d3fb351 --- /dev/null +++ b/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 }; diff --git a/client/src/index.js b/client/src/index.js index 48ac864f5f..999e5d90a3 100644 --- a/client/src/index.js +++ b/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, }; diff --git a/docs/releases/2.10.rst b/docs/releases/2.10.rst index 6f6d82670e..1b57cae894 100644 --- a/docs/releases/2.10.rst +++ b/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 diff --git a/wagtail/admin/static_src/wagtailadmin/app/wagtailadmin.entry.js b/wagtail/admin/static_src/wagtailadmin/app/wagtailadmin.entry.js index 6a4598d990..ef2e6f503b 100644 --- a/wagtail/admin/static_src/wagtailadmin/app/wagtailadmin.entry.js +++ b/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(); }); diff --git a/wagtail/admin/static_src/wagtailadmin/js/core.js b/wagtail/admin/static_src/wagtailadmin/js/core.js index aa65e6779d..7f021f180d 100644 --- a/wagtail/admin/static_src/wagtailadmin/js/core.js +++ b/wagtail/admin/static_src/wagtailadmin/js/core.js @@ -338,7 +338,6 @@ $(function() { }); }); - // ============================================================================= // Wagtail global module, mainly useful for debugging. // ============================================================================= diff --git a/wagtail/admin/templates/wagtailadmin/base.html b/wagtail/admin/templates/wagtailadmin/base.html index 01e138d08c..8e05969023 100644 --- a/wagtail/admin/templates/wagtailadmin/base.html +++ b/wagtail/admin/templates/wagtailadmin/base.html @@ -24,7 +24,7 @@
-
+
{# Always show messages div so it can be appended to by JS #}
diff --git a/wagtail/admin/templates/wagtailadmin/skeleton.html b/wagtail/admin/templates/wagtailadmin/skeleton.html index 65b72ee1ef..d54be7aa27 100644 --- a/wagtail/admin/templates/wagtailadmin/skeleton.html +++ b/wagtail/admin/templates/wagtailadmin/skeleton.html @@ -33,6 +33,8 @@ {% block js %}{% endblock %} + +
{% block furniture %}{% endblock %}