mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-13 15:04:33 -05:00
2639406ae2
Screenreaders announce the title of the page when it loads and their users are used to it signifying a new page. By focusing a form control when the page loads, this announcement is replaced with that of the control label. This commit prefixes the label with the page title so it gets announced when the page loads, notifying screenreader users that they are on a new page. The page title prefix is removed once focus shifts from the form control as its presence in any further announcements could be confusing.
31 lines
1.1 KiB
JavaScript
31 lines
1.1 KiB
JavaScript
(function(Modules) {
|
|
"use strict";
|
|
|
|
Modules.Autofocus = function() {
|
|
this.start = function(component) {
|
|
var $component = $(component),
|
|
forceFocus = $component.data('forceFocus'),
|
|
labelText = $('label[for="' + $component.attr('id') + '"]').eq(0).text().trim(),
|
|
clearAriaLabel = evt => {
|
|
$component.removeAttr('aria-label');
|
|
$component.off('blur', clearAriaLabel);
|
|
};
|
|
|
|
// if the page loads with a scroll position, we can't assume the item to focus onload
|
|
// is still where users intend to start
|
|
if (($(window).scrollTop() > 0) && !forceFocus) { return; }
|
|
|
|
// screenreaders announce the page title when a new page loads
|
|
// this will be lost when focus is moved to our form control so add it to the label instead
|
|
$component.attr('aria-label', document.title + ' - ' + labelText);
|
|
|
|
$component.filter('input, textarea, select').eq(0).trigger('focus');
|
|
|
|
// the page title prefix is only needed on page load so remove once focus has shifted
|
|
$component.on('blur', clearAriaLabel);
|
|
|
|
};
|
|
};
|
|
|
|
})(window.GOVUK.Modules);
|