diff --git a/web/themes/contrib/civictheme/assets/js/status-messages/status-messages.js b/web/themes/contrib/civictheme/assets/js/status-messages/status-messages.js new file mode 100644 index 0000000000..1fcd3f47d4 --- /dev/null +++ b/web/themes/contrib/civictheme/assets/js/status-messages/status-messages.js @@ -0,0 +1,16 @@ +// CivicTheme status-messages.js +(function ($, Drupal) { + Drupal.behaviors.ctFocusErrorSummary = { + attach: function (context, settings) { + // Wait for DOM update after AJAX or normal load + setTimeout(function () { + // Find any element with id starting with 'error-summary-' + var $error = $('[id^="error-summary-"]', context).first(); + if ($error.length) { + $error.attr('tabindex', '-1'); // ensure focusable (in case) + $error.focus(); + } + }, 30); + } + }; +})(jQuery, Drupal); diff --git a/web/themes/contrib/civictheme/civictheme_starter_kit/assets/js/status-messages/status-messages.js b/web/themes/contrib/civictheme/civictheme_starter_kit/assets/js/status-messages/status-messages.js new file mode 100644 index 0000000000..1fcd3f47d4 --- /dev/null +++ b/web/themes/contrib/civictheme/civictheme_starter_kit/assets/js/status-messages/status-messages.js @@ -0,0 +1,16 @@ +// CivicTheme status-messages.js +(function ($, Drupal) { + Drupal.behaviors.ctFocusErrorSummary = { + attach: function (context, settings) { + // Wait for DOM update after AJAX or normal load + setTimeout(function () { + // Find any element with id starting with 'error-summary-' + var $error = $('[id^="error-summary-"]', context).first(); + if ($error.length) { + $error.attr('tabindex', '-1'); // ensure focusable (in case) + $error.focus(); + } + }, 30); + } + }; +})(jQuery, Drupal); diff --git a/web/themes/contrib/civictheme/templates/misc/status-messages.html.twig b/web/themes/contrib/civictheme/templates/misc/status-messages.html.twig index 47d2ea703f..861d9f1eca 100644 --- a/web/themes/contrib/civictheme/templates/misc/status-messages.html.twig +++ b/web/themes/contrib/civictheme/templates/misc/status-messages.html.twig @@ -6,11 +6,14 @@ #} {% for type, messages in message_list %} {% for message in messages %} + {% set id_suffix = type == 'error' ? loop.parent.loop.index ~ '-' ~ loop.index : '' %} + {% set id_attr = type == 'error' ? 'id="error-summary-' ~ id_suffix ~ '" tabindex="-1"' : '' %} {% include 'civictheme:message' with { title: status_headings[type] ? status_headings[type] : type|capitalize, content: message|render, type: (type == 'status' or type == 'info') ? 'information' : type, vertical_spacing: 'both', + attributes: id_attr, } only %} {% endfor %} {% endfor %}