diff --git a/app/assets/javascripts/autofocus.js b/app/assets/javascripts/autofocus.js index 002a676a2..4d3d94849 100644 --- a/app/assets/javascripts/autofocus.js +++ b/app/assets/javascripts/autofocus.js @@ -3,13 +3,26 @@ Modules.Autofocus = function() { this.start = function(component) { - var forceFocus = $(component).data('forceFocus'); + 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; } - $(component).filter('input, textarea, select').eq(0).trigger('focus'); + // 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); }; };