mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-06 19:34:15 -05:00
7fd034a83f
Includes implementation of new code on Reply-to email addresses page. The existing code put the live region on the module element so the id and button were read out when the state changed. The report from the Digital Accessibility Centre (DAC) said screenreader users were confused by the content changing because it wasn't announced. These changes attempt to make the state changes clearer by: 1. moving the live region out into a separate element so we can better control what is announced 2. adding hidden text around to the button and text above (sometimes the id, sometimes the 'Copied to clipboard' text) to give more context When the id is copied to clipboard, the button changes but this is not announced as the live-region text takes precedence (due to being set to 'assertive'). Because of this, hidden text has been added in change 2 to explain what the new button does.
86 lines
3.0 KiB
JavaScript
86 lines
3.0 KiB
JavaScript
(function(Modules) {
|
|
"use strict";
|
|
|
|
if (!document.queryCommandSupported('copy')) return;
|
|
|
|
Modules.ApiKey = function() {
|
|
|
|
const states = {
|
|
'keyVisible': (options) => `
|
|
<span class="api-key__key">
|
|
${options.keyLabel ? '<span class="govuk-visually-hidden">' + options.thing + ': </span>' : ''}${options.key}
|
|
</span>
|
|
<span class="api-key__notice govuk-visually-hidden" aria-live="assertive">
|
|
${options.onload ? '' : options.thing + ' returned to page, press button to copy to clipboard'}
|
|
</span>
|
|
<button class="govuk-button govuk-button--secondary api-key__button--copy">
|
|
Copy ${options.thing} to clipboard${options.name ? '<span class="govuk-visually-hidden"> for ' + options.name + '</span>' : ''}
|
|
</button>
|
|
`,
|
|
'keyCopied': (options) => `
|
|
<span class="api-key__notice" aria-live="assertive">
|
|
<span class="govuk-visually-hidden">${options.thing} </span>Copied to clipboard<span class="govuk-visually-hidden">, press button to show in page</span>
|
|
</span>
|
|
<button class="govuk-button govuk-button--secondary api-key__button--show">
|
|
Show ${options.thing}${options.name ? '<span class="govuk-visually-hidden"> for ' + options.name + '</span>' : ''}
|
|
</button>
|
|
`
|
|
};
|
|
|
|
this.copyKey = function(keyElement, callback) {
|
|
var selection = window.getSelection ? window.getSelection() : document.selection,
|
|
range = document.createRange();
|
|
selection.removeAllRanges();
|
|
range.selectNodeContents(keyElement);
|
|
selection.addRange(range);
|
|
document.execCommand('copy');
|
|
selection.removeAllRanges();
|
|
callback();
|
|
};
|
|
|
|
this.start = function(component) {
|
|
|
|
const $component = $(component),
|
|
stateOptions = {
|
|
key: $component.data('key'),
|
|
thing: $component.data('thing')
|
|
},
|
|
name = $component.data('name');
|
|
|
|
// if the name is distinct from the thing:
|
|
// - it will be used in the rendering
|
|
// - the key won't be identified by a heading so needs its own label
|
|
if (name !== stateOptions.thing) {
|
|
stateOptions.name = name;
|
|
stateOptions.keyLabel = true;
|
|
}
|
|
|
|
$component
|
|
.addClass('api-key')
|
|
.css('min-height', $component.height())
|
|
.html(states.keyVisible($.extend({ 'onload': true }, stateOptions)))
|
|
.on(
|
|
'click', '.api-key__button--copy', () =>
|
|
this.copyKey(
|
|
$('.api-key__key', component)[0], () =>
|
|
$component
|
|
.html(states.keyCopied(stateOptions))
|
|
.find('.govuk-button').focus()
|
|
)
|
|
)
|
|
.on(
|
|
'click', '.api-key__button--show', () =>
|
|
$component
|
|
.html(states.keyVisible(stateOptions))
|
|
.find('.govuk-button').focus()
|
|
);
|
|
|
|
if ('stickAtBottomWhenScrolling' in GOVUK) {
|
|
GOVUK.stickAtBottomWhenScrolling.recalculate();
|
|
}
|
|
|
|
};
|
|
};
|
|
|
|
})(window.GOVUK.Modules);
|