From 2e860e86d21c18b1c648a6d30ff84b386beb523d Mon Sep 17 00:00:00 2001 From: "beeps (Kim Grey)" Date: Wed, 8 Feb 2023 16:43:45 +0000 Subject: [PATCH 1/5] First pass on EtP attached keyboard instructions --- .../components/exit-this-page/_index.scss | 24 ++++++ .../exit-this-page/exit-this-page.mjs | 75 +++++++++++++++++-- 2 files changed, 94 insertions(+), 5 deletions(-) diff --git a/src/govuk/components/exit-this-page/_index.scss b/src/govuk/components/exit-this-page/_index.scss index 79ac877267..3aa77908b7 100644 --- a/src/govuk/components/exit-this-page/_index.scss +++ b/src/govuk/components/exit-this-page/_index.scss @@ -13,6 +13,8 @@ @include govuk-media-query($from: tablet) { display: inline-block; + display: inline-flex; + flex-direction: column; right: 0; left: auto; width: auto; @@ -66,6 +68,28 @@ } } + .govuk-exit-this-page__help { + @include govuk-responsive-padding(2); + @include govuk-font($size: 16); + display: none; + border: 1px solid $govuk-border-colour; + border-top: none; + background-color: govuk-colour("white"); + text-align: center; + + kbd { + @include govuk-font($size: 16); + display: inline-block; + padding: 0 govuk-spacing(1); + border: 1px solid $govuk-border-colour; + border-radius: 4px; + } + + @include mq($from: tablet) { + display: block; + } + } + @media only print { .govuk-exit-this-page { display: none; diff --git a/src/govuk/components/exit-this-page/exit-this-page.mjs b/src/govuk/components/exit-this-page/exit-this-page.mjs index 4ac7dd5b10..6f29db4894 100644 --- a/src/govuk/components/exit-this-page/exit-this-page.mjs +++ b/src/govuk/components/exit-this-page/exit-this-page.mjs @@ -1,21 +1,50 @@ /* eslint-disable es-x/no-function-prototype-bind -- Polyfill imported */ -import { nodeListForEach } from '../../common.mjs' +import { normaliseDataset } from '../../common/normalise-dataset.mjs' +import { nodeListForEach, mergeConfigs, extractConfigByNamespace } from '../../common.mjs' +import { I18n } from '../../i18n.mjs' import '../../vendor/polyfills/Element/prototype/classList.mjs' import '../../vendor/polyfills/Element/prototype/dataset.mjs' import '../../vendor/polyfills/Function/prototype/bind.mjs' +/** + * @constant + * @type {ExitThisPageTranslations} + * @see Default value for {@link ExitThisPageConfig.i18n} + * @default + */ +var EXIT_THIS_PAGE_TRANSLATIONS = { + keypressProgress: 'Exit this Page key press %{press} of 3', + keypressComplete: 'Exit this page activated', + helpText: 'press Shift 3 times to exit the page' +} + /** * JavaScript functionality for the Exit this Page component * * @class * @param {HTMLElement} $module - HTML element that wraps the EtP button + * @param {ExitThisPageConfig} [config] - Exit this Page config */ -function ExitThisPage ($module) { +function ExitThisPage ($module, config) { this.$module = $module + + var defaultConfig = { + i18n: EXIT_THIS_PAGE_TRANSLATIONS + } + + this.config = mergeConfigs( + defaultConfig, + config || {}, + normaliseDataset($module.dataset) + ) + + this.i18n = new I18n(extractConfigByNamespace(this.config, 'i18n')) + this.$button = $module.querySelector('.govuk-exit-this-page__button') this.$skiplinkButton = document.querySelector('.govuk-js-exit-this-page-skiplink') this.$updateSpan = null + this.$helpTextSpan = null this.$indicatorContainer = null this.$overlay = null this.escCounter = 0 @@ -29,12 +58,23 @@ function ExitThisPage ($module) { */ ExitThisPage.prototype.initUpdateSpan = function () { this.$updateSpan = document.createElement('span') + this.$updateSpan.className = 'govuk-visually-hidden' this.$updateSpan.setAttribute('aria-live', 'polite') - this.$updateSpan.setAttribute('class', 'govuk-visually-hidden') this.$button.appendChild(this.$updateSpan) } +/** + * Create the and text advising the user of the keyboard shortcut. + */ +ExitThisPage.prototype.initHelpText = function () { + this.$helpTextSpan = document.createElement('div') + this.$helpTextSpan.className = 'govuk-exit-this-page__help' + this.$helpTextSpan.innerHTML = this.i18n.t('helpText') + + this.$module.appendChild(this.$helpTextSpan) +} + /** * Create button click handlers. */ @@ -146,10 +186,12 @@ ExitThisPage.prototype.handleEscKeypress = function (e) { if (this.escCounter >= 3) { this.escCounter = 0 - this.$updateSpan.innerText = 'Exit this page activated' + this.$updateSpan.innerText = this.i18n.t('keypressComplete') this.exitPage() } else { - this.$updateSpan.innerText = 'Exit this Page key press ' + this.escCounter + ' of 3' + this.$updateSpan.innerText = this.i18n.t('keypressProgress', { + press: this.escCounter + }) } this.setEscTimer() @@ -211,6 +253,7 @@ ExitThisPage.prototype.syncOverlayVisibility = function () { */ ExitThisPage.prototype.init = function () { this.buildIndicator() + this.initHelpText() this.initUpdateSpan() this.initButtonClickHandler() @@ -231,3 +274,25 @@ ExitThisPage.prototype.init = function () { } export default ExitThisPage + +/** + * Exit this Page config + * + * @typedef {object} ExitThisPageConfig + * @property {ExitThisPageTranslations} [i18n = EXIT_THIS_PAGE_TRANSLATIONS] - See constant {@link EXIT_THIS_PAGE_TRANSLATIONS} + */ + +/** + * Exit this Page translations + * + * @typedef {object} ExitThisPageTranslations + * + * Messages used by the component programatically inserted text, including help + * text and screen reader announcements. + * @property {string} [helpText] - The text content for the keyboard help text + * displayed beneath the button. + * @property {string} [keypressProgress] - The text announced by screen readers + * when the user activates each step of the keyboard shortcut. + * @property {string} [keypressComplete] - The text announced by screen readers + * when the user completes the keyboard shortcut. + */ From fc974042c1e5df2a6949bf02b93d43c4a0f43a86 Mon Sep 17 00:00:00 2001 From: "beeps (Kim Grey)" Date: Thu, 9 Feb 2023 14:31:31 +0000 Subject: [PATCH 2/5] EtP button layout tweaks and fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Removes use of inline-block/inline-flex. These were redundant as the EtP button container is either full-width (mobile) or floated (tablet, desktop). In both situations, `display: block` is either desirable or enforced by the browser due to the float. Curiously, having the `@supports` query appear before the `@media` query seemed to be the only reason styles were broken on IE—the `@media` query was being ignored completely. Simply swapping them around fixed the IE layout weirdness. --- src/govuk/components/exit-this-page/_index.scss | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/govuk/components/exit-this-page/_index.scss b/src/govuk/components/exit-this-page/_index.scss index 3aa77908b7..ba12920b3a 100644 --- a/src/govuk/components/exit-this-page/_index.scss +++ b/src/govuk/components/exit-this-page/_index.scss @@ -2,27 +2,26 @@ @include govuk-exports("govuk/component/exit-this-page") { .govuk-exit-this-page { + @include govuk-responsive-padding(8, "bottom"); z-index: 1000; top: 0; left: 0; width: 100%; - @supports (position: sticky) { - @include govuk-responsive-padding(8, "bottom"); - position: sticky; - } @include govuk-media-query($from: tablet) { - display: inline-block; - display: inline-flex; - flex-direction: column; right: 0; left: auto; width: auto; float: right; } + + @supports (position: sticky) { + position: sticky; + } } .govuk-exit-this-page__button { + width: 100%; margin-bottom: 0; } @@ -85,7 +84,7 @@ border-radius: 4px; } - @include mq($from: tablet) { + @include govuk-media-query($from: tablet) { display: block; } } From 13421783659fa1e3b61a13b3799255a1a1b4d87b Mon Sep 17 00:00:00 2001 From: "beeps (Kim Grey)" Date: Thu, 9 Feb 2023 16:06:33 +0000 Subject: [PATCH 3/5] Shift button design tweak Make it look a little more key-ish --- src/govuk/components/exit-this-page/_index.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/govuk/components/exit-this-page/_index.scss b/src/govuk/components/exit-this-page/_index.scss index ba12920b3a..a241ae049e 100644 --- a/src/govuk/components/exit-this-page/_index.scss +++ b/src/govuk/components/exit-this-page/_index.scss @@ -82,6 +82,8 @@ padding: 0 govuk-spacing(1); border: 1px solid $govuk-border-colour; border-radius: 4px; + background-color: govuk-colour("white"); + box-shadow: 0 1px 0 govuk-colour("white"), 0 2px 0 $govuk-border-colour; } @include govuk-media-query($from: tablet) { From 691123335de80b9baf14d240f450ae8b2e1604e9 Mon Sep 17 00:00:00 2001 From: "beeps (Kim Grey)" Date: Mon, 13 Feb 2023 13:56:34 +0000 Subject: [PATCH 4/5] Screen reader fixes Fix some styles and whitespace that was affecting how VoiceOver read the elements --- src/govuk/components/exit-this-page/_index.scss | 2 -- src/govuk/components/exit-this-page/exit-this-page.mjs | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/govuk/components/exit-this-page/_index.scss b/src/govuk/components/exit-this-page/_index.scss index a241ae049e..9b4111b308 100644 --- a/src/govuk/components/exit-this-page/_index.scss +++ b/src/govuk/components/exit-this-page/_index.scss @@ -6,7 +6,6 @@ z-index: 1000; top: 0; left: 0; - width: 100%; @include govuk-media-query($from: tablet) { right: 0; @@ -78,7 +77,6 @@ kbd { @include govuk-font($size: 16); - display: inline-block; padding: 0 govuk-spacing(1); border: 1px solid $govuk-border-colour; border-radius: 4px; diff --git a/src/govuk/components/exit-this-page/exit-this-page.mjs b/src/govuk/components/exit-this-page/exit-this-page.mjs index 6f29db4894..0366948fed 100644 --- a/src/govuk/components/exit-this-page/exit-this-page.mjs +++ b/src/govuk/components/exit-this-page/exit-this-page.mjs @@ -16,7 +16,7 @@ import '../../vendor/polyfills/Function/prototype/bind.mjs' var EXIT_THIS_PAGE_TRANSLATIONS = { keypressProgress: 'Exit this Page key press %{press} of 3', keypressComplete: 'Exit this page activated', - helpText: 'press Shift 3 times to exit the page' + helpText: 'press Shift 3 times to exit the page' } /** From 7eda1b04fc68ce1dad329dec64547773febe1de0 Mon Sep 17 00:00:00 2001 From: "beeps (Kim Grey)" Date: Tue, 14 Feb 2023 16:28:08 +0000 Subject: [PATCH 5/5] Update EtP help copy --- src/govuk/components/exit-this-page/_index.scss | 1 + src/govuk/components/exit-this-page/exit-this-page.mjs | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/govuk/components/exit-this-page/_index.scss b/src/govuk/components/exit-this-page/_index.scss index 9b4111b308..4749ec1a81 100644 --- a/src/govuk/components/exit-this-page/_index.scss +++ b/src/govuk/components/exit-this-page/_index.scss @@ -82,6 +82,7 @@ border-radius: 4px; background-color: govuk-colour("white"); box-shadow: 0 1px 0 govuk-colour("white"), 0 2px 0 $govuk-border-colour; + white-space: nowrap; } @include govuk-media-query($from: tablet) { diff --git a/src/govuk/components/exit-this-page/exit-this-page.mjs b/src/govuk/components/exit-this-page/exit-this-page.mjs index 0366948fed..ecc710c44b 100644 --- a/src/govuk/components/exit-this-page/exit-this-page.mjs +++ b/src/govuk/components/exit-this-page/exit-this-page.mjs @@ -16,7 +16,7 @@ import '../../vendor/polyfills/Function/prototype/bind.mjs' var EXIT_THIS_PAGE_TRANSLATIONS = { keypressProgress: 'Exit this Page key press %{press} of 3', keypressComplete: 'Exit this page activated', - helpText: 'press Shift 3 times to exit the page' + helpText: 'Or press ⇧ Shift key 3 times to exit the page' } /**