diff --git a/core/core.libraries.yml b/core/core.libraries.yml index fc659c8401804b30ef6d4c22a2304313cff78553..dc714deda4ee4920a85d7feb8c95b7d3d974e330 100644 --- a/core/core.libraries.yml +++ b/core/core.libraries.yml @@ -124,6 +124,7 @@ drupal.batch: drupal.collapse: version: VERSION js: + misc/details-aria.js: {} misc/collapse.js: {} dependencies: - core/jquery diff --git a/core/includes/form.inc b/core/includes/form.inc index 9190e314d5b3c29ea0399dfc705e93854b02904d..01d9068d9c215d70c33bce5d161b53e7077bc70e 100644 --- a/core/includes/form.inc +++ b/core/includes/form.inc @@ -225,7 +225,7 @@ function template_preprocess_details(&$variables) { if (!empty($element['#attributes']['id'])) { $variables['summary_attributes']['aria-controls'] = $element['#attributes']['id']; } - $variables['summary_attributes']['aria-expanded'] = !empty($element['#attributes']['open']); + $variables['summary_attributes']['aria-expanded'] = !empty($element['#attributes']['open']) ? 'true' : 'false'; $variables['summary_attributes']['aria-pressed'] = $variables['summary_attributes']['aria-expanded']; } $variables['title'] = (!empty($element['#title'])) ? $element['#title'] : ''; diff --git a/core/misc/collapse.js b/core/misc/collapse.js index 6aa2e254b429401a3564d4dbca03095c6fb95870..2d44e3f403b3c6b0d8ee1a75aeb9c5e2b947501f 100644 --- a/core/misc/collapse.js +++ b/core/misc/collapse.js @@ -91,7 +91,11 @@ else { $summaryPrefix.html(Drupal.t('Hide')); } - this.$node.attr('open', !isOpen); + // Delay setting the attribute to emulate chrome behavior and make + // details-aria.js work as expected with this polyfill. + setTimeout(function () { + this.$node.attr('open', !isOpen); + }.bind(this), 0); } }); diff --git a/core/misc/details-aria.js b/core/misc/details-aria.js new file mode 100644 index 0000000000000000000000000000000000000000..b400b4fc7a1c188e0cf85bdbaf86d306e8f8fc96 --- /dev/null +++ b/core/misc/details-aria.js @@ -0,0 +1,24 @@ +/** + * @file + * Add aria attribute handling for details and summary elements. + */ + +(function ($, Drupal) { + + "use strict"; + + Drupal.behaviors.detailsAria = { + attach: function () { + $('body').once('detailsAria').on('click.detailsAria', 'summary', function (event) { + var $summary = $(event.currentTarget); + var open = $(event.currentTarget.parentNode).attr('open') === 'open' ? 'false' : 'true'; + + $summary.attr({ + 'aria-expanded': open, + 'aria-pressed': open + }); + }); + } + }; + +})(jQuery, Drupal);