app/assets/javascripts/autofocus.js

(function(Modules) {
  "use strict";

  Modules.Autofocus = function() {
    this.start = function(component) {
      var $component = $(component),
          forceFocus = $component.data('forceFocus');

      // 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');

    };
  };

})(window.GOVUK.Modules);
Make autofocus textbox module This commit adds a very small Javascript module to autofocus a textbox on page load. It should only be used once per page. It also adds a parameter to the textbox macro which adds the attribute to trigger autofocus. 2016-02-02 16:16:29 +00:00			`(function(Modules) {`
			`"use strict";`

			`Modules.Autofocus = function() {`
Fix reference to non-existent jQuery collection Raised on PR as comment: https://github.com/alphagov/notifications-admin/pull/2880/commits/e4b4be9d459b73196bb5c403cdec881f68462440#r270781103 2019-04-02 11:38:27 +01:00			`this.start = function(component) {`
Simulate page load announcement in autofocus JS 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. 2020-09-15 22:09:03 +01:00			`var $component = $(component),`
Don't prefix with the page title on focus Doing this was helpful to Voiceover users as its announcement of the label meant the page title (normally announced onload) wasn't skipped. This isn't the case with JAWS so, prefixing the title makes it announce it twice. JAWS has a lot more users and the title being announced twice is more confusing than not at all so this removes it. 2020-10-03 19:47:39 +01:00			`forceFocus = $component.data('forceFocus');`
Make autofocus textbox module This commit adds a very small Javascript module to autofocus a textbox on page load. It should only be used once per page. It also adds a parameter to the textbox macro which adds the attribute to trigger autofocus. 2016-02-02 16:16:29 +00:00
Prevent autofocus when page has scrolled If users scroll a page with an autofocus component on so it is off-screen it seems safe to assume they won't want it focused if they return to it. This prevents that happening. This adds a data-attribute flag to allow this behaviour to be overridden. We have some situations where the assumption here isn't appropriate, for example on pages where the component with autofocus is in a sticky element. This means it will appear offscreen when the page loads but, when its parent becomes sticky, will be visible again. 2019-03-28 16:45:36 +00:00			`// 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; }`

Simulate page load announcement in autofocus JS 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. 2020-09-15 22:09:03 +01:00			`$component.filter('input, textarea, select').eq(0).trigger('focus');`

Make autofocus textbox module This commit adds a very small Javascript module to autofocus a textbox on page load. It should only be used once per page. It also adds a parameter to the textbox macro which adds the attribute to trigger autofocus. 2016-02-02 16:16:29 +00:00			`};`
			`};`

			`})(window.GOVUK.Modules);`