Issue #2472177 by Dom., nod_, drubb, mgifford: Collapsible fieldset have...

Issue #2472177 by Dom., nod_, drubb, mgifford: Collapsible fieldset have duplicated and wrong aria-expanded

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

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'] : '';

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);
     }
   });
 

core/misc/details-aria.js

+/**
+ * @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);