Issue #3269082 by longwave, Spokje, mherchel, andregp, kostyashupenko, bnjmnm, nod_: Remove HTML5 details collapse polyfill

(cherry picked from commit 9ad9131346)

core/core.libraries.yml

@@ -469,10 +469,9 @@ drupal.collapse:
   js:
     misc/details-summarized-content.js: {}
     misc/details-aria.js: {}
-    misc/collapse.js: {}
+    misc/details.js: {}
   dependencies:
     - core/jquery
-    - core/modernizr
     - core/drupal
     - core/drupal.form
     - core/once

core/misc/collapse.js

@@ -1,155 +0,0 @@
-/**
- * @file
- * Polyfill for HTML5 details elements.
- */
-
-(function ($, Modernizr, Drupal) {
-  /**
-   * The collapsible details object represents a single details element.
-   *
-   * @constructor Drupal.CollapsibleDetails
-   *
-   * @param {HTMLElement} node
-   *   The details element.
-   */
-  function CollapsibleDetails(node) {
-    this.$node = $(node);
-    this.$node.data('details', this);
-    // Expand details if there are errors inside, or if it contains an
-    // element that is targeted by the URI fragment identifier.
-    const anchor =
-      window.location.hash && window.location.hash !== '#'
-        ? `, ${window.location.hash}`
-        : '';
-    if (this.$node.find(`.error${anchor}`).length) {
-      this.$node.attr('open', true);
-    }
-    // Initialize and set up the summary polyfill.
-    this.setupSummaryPolyfill();
-  }
-
-  $.extend(
-    CollapsibleDetails,
-    /** @lends Drupal.CollapsibleDetails */ {
-      /**
-       * Holds references to instantiated CollapsibleDetails objects.
-       *
-       * @type {Array.<Drupal.CollapsibleDetails>}
-       */
-      instances: [],
-    },
-  );
-
-  $.extend(
-    CollapsibleDetails.prototype,
-    /** @lends Drupal.CollapsibleDetails# */ {
-      /**
-       * Initialize and setup summary markup.
-       */
-      setupSummaryPolyfill() {
-        // Turn the summary into a clickable link.
-        const $summary = this.$node.find('> summary');
-
-        // If this polyfill is in use, the browser does not recognize
-        // <summary> as a focusable element. The tabindex is set to -1 so the
-        // tabbable library does not incorrectly identify it as tabbable.
-        $summary.attr('tabindex', '-1');
-
-        $('<span class="details-summary-prefix visually-hidden"></span>')
-          .append(this.$node.attr('open') ? Drupal.t('Hide') : Drupal.t('Show'))
-          .prependTo($summary)
-          .after(document.createTextNode(' '));
-
-        // .wrapInner() does not retain bound events.
-        $('<a class="details-title"></a>')
-          .attr('href', `#${this.$node.attr('id')}`)
-          .prepend($summary.contents())
-          .appendTo($summary);
-
-        $summary
-          .append(this.$summary)
-          .on('click', $.proxy(this.onSummaryClick, this));
-      },
-
-      /**
-       * Handle summary clicks.
-       *
-       * @param {jQuery.Event} e
-       *   The event triggered.
-       */
-      onSummaryClick(e) {
-        this.toggle();
-        e.preventDefault();
-      },
-
-      /**
-       * Toggle the visibility of a details element using smooth animations.
-       */
-      toggle() {
-        const isOpen = !!this.$node.attr('open');
-        const $summaryPrefix = this.$node.find(
-          '> summary span.details-summary-prefix',
-        );
-        if (isOpen) {
-          $summaryPrefix.html(Drupal.t('Show'));
-        } else {
-          $summaryPrefix.html(Drupal.t('Hide'));
-        }
-        // Delay setting the attribute to emulate chrome behavior and make
-        // details-aria.js work as expected with this polyfill.
-        setTimeout(() => {
-          this.$node.attr('open', !isOpen);
-        }, 0);
-      },
-    },
-  );
-
-  /**
-   * Polyfill HTML5 details element.
-   *
-   * @type {Drupal~behavior}
-   *
-   * @prop {Drupal~behaviorAttach} attach
-   *   Attaches behavior for the details element.
-   */
-  Drupal.behaviors.collapse = {
-    attach(context) {
-      if (Modernizr.details) {
-        return;
-      }
-      once('collapse', 'details', context).forEach((detail) => {
-        // This class is used for styling purpose only.
-        detail.classList.add('collapse-processed');
-        CollapsibleDetails.instances.push(new CollapsibleDetails(detail));
-      });
-    },
-  };
-
-  /**
-   * Open parent details elements of a targeted page fragment.
-   *
-   * Opens all (nested) details element on a hash change or fragment link click
-   * when the target is a child element, in order to make sure the targeted
-   * element is visible. Aria attributes on the summary
-   * are set by triggering the click event listener in details-aria.js.
-   *
-   * @param {jQuery.Event} e
-   *   The event triggered.
-   * @param {jQuery} $target
-   *   The targeted node as a jQuery object.
-   */
-  const handleFragmentLinkClickOrHashChange = (e, $target) => {
-    $target.parents('details').not('[open]').find('> summary').trigger('click');
-  };
-
-  /**
-   * Binds a listener to handle fragment link clicks and URL hash changes.
-   */
-  $('body').on(
-    'formFragmentLinkClickOrHashChange.details',
-    handleFragmentLinkClickOrHashChange,
-  );
-
-  // Expose constructor in the public space.
-  Drupal.CollapsibleDetails = CollapsibleDetails;
-})(jQuery, Modernizr, Drupal);

core/misc/details.js

@@ -0,0 +1,31 @@
+/**
+ * @file
+ * Additional functionality for HTML5 details elements.
+ */
+
+(function ($) {
+  /**
+   * Open parent details elements of a targeted page fragment.
+   *
+   * Opens all (nested) details element on a hash change or fragment link click
+   * when the target is a child element, in order to make sure the targeted
+   * element is visible. Aria attributes on the summary
+   * are set by triggering the click event listener in details-aria.js.
+   *
+   * @param {jQuery.Event} e
+   *   The event triggered.
+   * @param {jQuery} $target
+   *   The targeted node as a jQuery object.
+   */
+  const handleFragmentLinkClickOrHashChange = (e, $target) => {
+    $target.parents('details').not('[open]').find('> summary').trigger('click');
+  };
+
+  /**
+   * Binds a listener to handle fragment link clicks and URL hash changes.
+   */
+  $('body').on(
+    'formFragmentLinkClickOrHashChange.details',
+    handleFragmentLinkClickOrHashChange,
+  );
+})(jQuery);

core/modules/system/tests/src/Functional/Form/ElementsVerticalTabsTest.php

@@ -49,21 +49,6 @@ class ElementsVerticalTabsTest extends BrowserTestBase {
     $this->drupalLogin($this->adminUser);
   }
 
-  /**
-   * Ensures that vertical-tabs.js is included before collapse.js.
-   *
-   * Otherwise, collapse.js adds "SHOW" or "HIDE" labels to the tabs.
-   */
-  public function testJavaScriptOrdering() {
-    $this->drupalGet('form_test/vertical-tabs');
-    $content = $this->getSession()->getPage()->getContent();
-    $position1 = strpos($content, 'core/misc/vertical-tabs.js');
-    $position2 = strpos($content, 'core/misc/collapse.js');
-    $this->assertNotFalse($position1);
-    $this->assertNotFalse($position2);
-    $this->assertGreaterThan($position1, $position2, 'vertical-tabs.js is included before collapse.js');
-  }
-
   /**
    * Ensures that vertical tab markup is not shown if user has no tab access.
    */

core/modules/system/tests/themes/test_theme/test_theme.info.yml

@@ -26,7 +26,6 @@ libraries-override:
     css:
       component:
         css/components/button.css: css/my-button.css
-        css/components/collapse-processed.css: css/my-collapse-processed.css
         css/components/container-inline.css: /themes/my_theme/css/my-container-inline.css
         css/components/details.css: /themes/my_theme/css/my-details.css
   # Remove particular library assets.

core/profiles/demo_umami/themes/umami/css/classy/components/collapse-processed.css

@@ -1,32 +0,0 @@
-/**
- * @file
- * Visual styles for collapsible fieldsets.
- */
-
-.collapse-processed > summary {
-  padding-right: 0.5em;
-  padding-left: 0.5em;
-}
-.collapse-processed > summary:before {
-  float: left; /* LTR */
-  width: 1em;
-  height: 1em;
-  content: "";
-  background: url(../../../../../../../misc/menu-expanded.png) 0 100% no-repeat; /* LTR */
-}
-[dir="rtl"] .collapse-processed > summary:before {
-  float: right;
-  background-position: 100% 100%;
-}
-.collapse-processed:not([open]) > summary:before {
-  -ms-transform: rotate(-90deg);
-  -webkit-transform: rotate(-90deg);
-  transform: rotate(-90deg);
-  background-position: 25% 35%; /* LTR */
-}
-[dir="rtl"] .collapse-processed:not([open]) > summary:before {
-  -ms-transform: rotate(90deg);
-  -webkit-transform: rotate(90deg);
-  transform: rotate(90deg);
-  background-position: 75% 35%;
-}

core/profiles/demo_umami/themes/umami/umami.libraries.yml

@@ -152,7 +152,6 @@ classy.base:
       css/classy/components/action-links.css: { weight: -10 }
       css/classy/components/breadcrumb.css: { weight: -10 }
       css/classy/components/button.css: { weight: -10 }
-      css/classy/components/collapse-processed.css: { weight: -10 }
       css/classy/components/container-inline.css: { weight: -10 }
       css/classy/components/details.css: { weight: -10 }
       css/classy/components/exposed-filters.css: { weight: -10 }

core/tests/Drupal/KernelTests/Core/Asset/LibraryDiscoveryIntegrationTest.php

@@ -58,7 +58,6 @@ class LibraryDiscoveryIntegrationTest extends KernelTestBase {
     // removed.
     $this->activateTheme('starterkit_theme');
     $this->assertAssetInLibrary('core/themes/starterkit_theme/css/components/button.css', 'starterkit_theme', 'base', 'css');
-    $this->assertAssetInLibrary('core/themes/starterkit_theme/css/components/collapse-processed.css', 'starterkit_theme', 'base', 'css');
     $this->assertAssetInLibrary('core/themes/starterkit_theme/css/components/container-inline.css', 'starterkit_theme', 'base', 'css');
     $this->assertAssetInLibrary('core/themes/starterkit_theme/css/components/details.css', 'starterkit_theme', 'base', 'css');
     $this->assertAssetInLibrary('core/themes/starterkit_theme/css/components/dialog.css', 'starterkit_theme', 'dialog', 'css');
@@ -75,13 +74,11 @@ class LibraryDiscoveryIntegrationTest extends KernelTestBase {
     // Assert that starterkit_theme library assets were correctly overridden or
     // removed.
     $this->assertNoAssetInLibrary('core/themes/starterkit_theme/css/components/button.css', 'starterkit_theme', 'base', 'css');
-    $this->assertNoAssetInLibrary('core/themes/starterkit_theme/css/components/collapse-processed.css', 'starterkit_theme', 'base', 'css');
     $this->assertNoAssetInLibrary('core/themes/starterkit_theme/css/components/container-inline.css', 'starterkit_theme', 'base', 'css');
     $this->assertNoAssetInLibrary('core/themes/starterkit_theme/css/components/details.css', 'starterkit_theme', 'base', 'css');
     $this->assertNoAssetInLibrary('core/themes/starterkit_theme/css/components/dialog.css', 'starterkit_theme', 'dialog', 'css');
 
     $this->assertAssetInLibrary('core/modules/system/tests/themes/test_theme/css/my-button.css', 'starterkit_theme', 'base', 'css');
-    $this->assertAssetInLibrary('core/modules/system/tests/themes/test_theme/css/my-collapse-processed.css', 'starterkit_theme', 'base', 'css');
     $this->assertAssetInLibrary('themes/my_theme/css/my-container-inline.css', 'starterkit_theme', 'base', 'css');
     $this->assertAssetInLibrary('themes/my_theme/css/my-details.css', 'starterkit_theme', 'base', 'css');
 

core/themes/claro/css/components/details.css

@@ -334,15 +334,11 @@ td .claro-details {
 
 /**
  * Active has to be here for Firefox.
- * Merges standard collapse-processed selectors.
  */
 
 [open] > .claro-details__summary--accordion:not(:focus, :active)::after,
 [open] > .claro-details__summary--accordion-item:not(:focus, :active)::after,
-.collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
+[open] > .claro-details__summary--vertical-tabs-item:not(:focus, :active)::after {
-.collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
-[open] > .claro-details__summary--vertical-tabs-item:not(:focus, :active)::after,
-.collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
   opacity: 1;
   border: var(--details-summary-focus-border-size) solid var(--color-absolutezero);
   border-width: 0 0 0 var(--details-summary-focus-border-size); /* LTR */
@@ -351,16 +347,12 @@ td .claro-details {
 
 [dir="rtl"] [open] > .claro-details__summary--accordion:not(:focus)::after,
 [dir="rtl"] [open] > .claro-details__summary--accordion-item:not(:focus)::after,
-[dir="rtl"] .collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
+[dir="rtl"] [open] > .claro-details__summary--vertical-tabs-item:not(:focus)::after {
-[dir="rtl"] .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
-[dir="rtl"] [open] > .claro-details__summary--vertical-tabs-item:not(:focus)::after,
-[dir="rtl"] .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
   border-width: 0 var(--details-summary-focus-border-size) 0 0;
 }
 
 .claro-details__summary:focus::after,
-.claro-details__summary:active::after,
+.claro-details__summary:active::after {
-.collapse-processed > .claro-details__summary .details-title:focus::after {
   opacity: 1;
 }
 
@@ -470,99 +462,6 @@ td .claro-details {
   color: var(--input--disabled-fg-color);
 }
 
-/**
- * Collapse processed for non-supporting browsers like IE or Edge.
- */
-
-.collapse-processed > .claro-details__summary {
-  padding: 0;
-}
-
-.collapse-processed > .claro-details__summary::after {
-  content: none;
-}
-
-.collapse-processed > .claro-details__summary .details-title {
-  position: relative;
-  display: block;
-  padding: var(--space-m) var(--space-m) var(--space-m) var(--details-desktop-wrapper-padding-start); /* LTR */
-  text-decoration: none;
-  color: inherit;
-  border-radius: var(--size-summary-border-radius);
-}
-
-[dir="rtl"] .collapse-processed > .claro-details__summary .details-title {
-  padding-right: var(--details-desktop-wrapper-padding-start);
-  padding-left: var(--space-m);
-}
-
-.collapse-processed > .claro-details__summary--accordion .details-title,
-.collapse-processed > .claro-details__summary--accordion-item .details-title,
-.collapse-processed > .claro-details__summary--vertical-tabs-item .details-title {
-  padding: var(--summary-accordion-padding-vertical) var(--space-l) var(--summary-accordion-padding-vertical) var(--details-desktop-wrapper-padding-start); /* LTR */
-}
-
-[dir="rtl"] .collapse-processed > .claro-details__summary--accordion .details-title,
-[dir="rtl"] .collapse-processed > .claro-details__summary--accordion-item .details-title,
-[dir="rtl"] .collapse-processed > .claro-details__summary--vertical-tabs-item .details-title {
-  padding-right: var(--details-desktop-wrapper-padding-start);
-  padding-left: var(--space-l);
-}
-
-/* Focus and hover states. */
-
-.collapse-processed > .claro-details__summary .details-title:focus,
-.collapse-processed > .claro-details__summary .details-title:hover {
-  z-index: 1;
-  text-decoration: none;
-  outline: none;
-  box-shadow: none;
-}
-
-.collapse-processed > .claro-details__summary .details-title::after {
-  position: absolute;
-  top: -1px;
-  right: -1px;
-  bottom: -1px;
-  left: -1px;
-  content: "";
-  transition: opacity var(--details-box-shadow-transition-duration) ease-in-out;
-  pointer-events: none;
-  opacity: 0;
-  border: var(--details-summary-focus-border-size) solid var(--color-focus);
-  border-radius: var(--details-border-size-radius);
-}
-
-.collapse-processed > .claro-details__summary .details-title:focus::after {
-  opacity: 1;
-}
-
-/* Accordion item modifiers for the focus box. */
-
-.collapse-processed > .claro-details__summary--accordion-item .details-title::after,
-.vertical-tabs__item > .claro-details__summary--vertical-tabs-item .details-title::after {
-  border-radius: 0;
-}
-
-.collapse-processed:first-child > .claro-details__summary--accordion-item .details-title::after,
-.vertical-tabs__item--first > .claro-details__summary--vertical-tabs-item .details-title::after {
-  border-top-left-radius: var(--details-border-size-radius);
-  border-top-right-radius: var(--details-border-size-radius);
-}
-
-.collapse-processed:last-child > .claro-details__summary--accordion-item .details-title::after,
-.vertical-tabs__item--last > .claro-details__summary--vertical-tabs-item .details-title::after {
-  border-bottom-right-radius: var(--details-border-size-radius);
-  border-bottom-left-radius: var(--details-border-size-radius);
-}
-
-.collapse-processed[open] > .claro-details__summary--accordion .details-title::after,
-.collapse-processed[open] > .claro-details__summary--accordion-item .details-title::after,
-.vertical-tabs__item[open] > .claro-details__summary--vertical-tabs-item .details-title::after {
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
 .claro-details__summary-summary {
   display: block;
   color: var(--color-gray-800);
@@ -570,24 +469,6 @@ td .claro-details {
   font-weight: normal;
 }
 
-@media (forced-colors: active) {
-  .collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
-  .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
-  .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
-    top: -1px;
-    right: -1px;
-    bottom: -1px;
-    left: -1px;
-  }
-  .collapse-processed > .claro-details__summary .details-title::after {
-    top: -0.3125rem;
-    right: -0.3125rem;
-    bottom: -0.3125rem;
-    left: -0.3125rem;
-    border: 2px dotted;
-  }
-}
-
 .required-mark::after {
   display: inline-block;
   width: 0.4375rem;

core/themes/claro/css/components/details.pcss.css

@@ -314,14 +314,10 @@
 
 /**
  * Active has to be here for Firefox.
- * Merges standard collapse-processed selectors.
  */
 [open] > .claro-details__summary--accordion:not(:focus, :active)::after,
 [open] > .claro-details__summary--accordion-item:not(:focus, :active)::after,
-.collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
+[open] > .claro-details__summary--vertical-tabs-item:not(:focus, :active)::after {
-.collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
-[open] > .claro-details__summary--vertical-tabs-item:not(:focus, :active)::after,
-.collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
   opacity: 1;
   border: var(--details-summary-focus-border-size) solid var(--color-absolutezero);
   border-width: 0 0 0 var(--details-summary-focus-border-size); /* LTR */
@@ -329,16 +325,12 @@
 }
 [dir="rtl"] [open] > .claro-details__summary--accordion:not(:focus)::after,
 [dir="rtl"] [open] > .claro-details__summary--accordion-item:not(:focus)::after,
-[dir="rtl"] .collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
+[dir="rtl"] [open] > .claro-details__summary--vertical-tabs-item:not(:focus)::after {
-[dir="rtl"] .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
-[dir="rtl"] [open] > .claro-details__summary--vertical-tabs-item:not(:focus)::after,
-[dir="rtl"] .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
   border-width: 0 var(--details-summary-focus-border-size) 0 0;
 }
 
 .claro-details__summary:focus::after,
-.claro-details__summary:active::after,
+.claro-details__summary:active::after {
-.collapse-processed > .claro-details__summary .details-title:focus::after {
   opacity: 1;
 }
 
@@ -442,95 +434,6 @@
   color: var(--input--disabled-fg-color);
 }
 
-/**
- * Collapse processed for non-supporting browsers like IE or Edge.
- */
-.collapse-processed > .claro-details__summary {
-  padding: 0;
-}
-
-.collapse-processed > .claro-details__summary::after {
-  content: none;
-}
-
-.collapse-processed > .claro-details__summary .details-title {
-  position: relative;
-  display: block;
-  padding: var(--space-m) var(--space-m) var(--space-m) var(--details-desktop-wrapper-padding-start); /* LTR */
-  text-decoration: none;
-  color: inherit;
-  border-radius: var(--size-summary-border-radius);
-}
-[dir="rtl"] .collapse-processed > .claro-details__summary .details-title {
-  padding-right: var(--details-desktop-wrapper-padding-start);
-  padding-left: var(--space-m);
-}
-
-.collapse-processed > .claro-details__summary--accordion .details-title,
-.collapse-processed > .claro-details__summary--accordion-item .details-title,
-.collapse-processed > .claro-details__summary--vertical-tabs-item .details-title {
-  padding: var(--summary-accordion-padding-vertical) var(--space-l) var(--summary-accordion-padding-vertical) var(--details-desktop-wrapper-padding-start); /* LTR */
-}
-[dir="rtl"] .collapse-processed > .claro-details__summary--accordion .details-title,
-[dir="rtl"] .collapse-processed > .claro-details__summary--accordion-item .details-title,
-[dir="rtl"] .collapse-processed > .claro-details__summary--vertical-tabs-item .details-title {
-  padding-right: var(--details-desktop-wrapper-padding-start);
-  padding-left: var(--space-l);
-}
-
-/* Focus and hover states. */
-.collapse-processed > .claro-details__summary .details-title:focus,
-.collapse-processed > .claro-details__summary .details-title:hover {
-  z-index: 1;
-  text-decoration: none;
-  outline: none;
-  box-shadow: none;
-}
-
-.collapse-processed > .claro-details__summary .details-title::after {
-  position: absolute;
-  top: -1px;
-  right: -1px;
-  bottom: -1px;
-  left: -1px;
-  content: "";
-  transition: opacity var(--details-box-shadow-transition-duration) ease-in-out;
-  pointer-events: none;
-  opacity: 0;
-  border: var(--details-summary-focus-border-size) solid var(--color-focus);
-  border-radius: var(--details-border-size-radius);
-}
-
-.collapse-processed > .claro-details__summary .details-title:focus::after {
-  opacity: 1;
-}
-
-/* Accordion item modifiers for the focus box. */
-
-.collapse-processed > .claro-details__summary--accordion-item .details-title::after,
-.vertical-tabs__item > .claro-details__summary--vertical-tabs-item .details-title::after {
-  border-radius: 0;
-}
-
-.collapse-processed:first-child > .claro-details__summary--accordion-item .details-title::after,
-.vertical-tabs__item--first > .claro-details__summary--vertical-tabs-item .details-title::after {
-  border-top-left-radius: var(--details-border-size-radius);
-  border-top-right-radius: var(--details-border-size-radius);
-}
-
-.collapse-processed:last-child > .claro-details__summary--accordion-item .details-title::after,
-.vertical-tabs__item--last > .claro-details__summary--vertical-tabs-item .details-title::after {
-  border-bottom-right-radius: var(--details-border-size-radius);
-  border-bottom-left-radius: var(--details-border-size-radius);
-}
-
-.collapse-processed[open] > .claro-details__summary--accordion .details-title::after,
-.collapse-processed[open] > .claro-details__summary--accordion-item .details-title::after,
-.vertical-tabs__item[open] > .claro-details__summary--vertical-tabs-item .details-title::after {
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
 .claro-details__summary-summary {
   display: block;
   color: var(--color-gray-800);
@@ -538,24 +441,6 @@
   font-weight: normal;
 }
 
-@media (forced-colors: active) {
-  .collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
-  .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
-  .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
-    top: -1px;
-    right: -1px;
-    bottom: -1px;
-    left: -1px;
-  }
-  .collapse-processed > .claro-details__summary .details-title::after {
-    top: -5px;
-    right: -5px;
-    bottom: -5px;
-    left: -5px;
-    border: 2px dotted;
-  }
-}
-
 .required-mark::after {
   display: inline-block;
   width: 0.4375rem;

core/themes/claro/css/components/system-status-report.css

@@ -43,8 +43,6 @@
   box-shadow: none;
 }
 
-/* Account for native and poly-filled details element */
-
 .system-status-report__status-title {
   position: relative;
   box-sizing: border-box;
@@ -53,26 +51,7 @@
   font-weight: bold;
 }
 
-.system-status-report__status-title .details-title {
+.system-status-report__status-icon:before {
-  text-transform: none;
-  color: inherit;
-}
-
-.system-status-report__status-title .details-title {
-  padding-left: 3em; /* LTR */
-}
-
-[dir="rtl"] .system-status-report__status-title .details-title {
-  padding-right: 3em;
-  padding-left: 0;
-}
-
-[dir="rtl"].details .system-status-report__status-title {
-  padding: 1em 3em 1em 1em;
-}
-
-.system-status-report__status-title .details-title:before,
-.details .system-status-report__status-icon:before {
   position: absolute;
   top: 1em;
   left: 0.625rem; /* LTR */
@@ -87,26 +66,22 @@
   background-size: contain;
 }
 
-[dir="rtl"] .system-status-report__status-title .details-title:before,
+[dir="rtl"] .system-status-report__status-title:before {
-[dir="rtl"].details .system-status-report__status-title:before {
   right: 0.625rem;
   left: auto;
   margin-right: 0;
 }
 
-.system-status-report__status-icon--error .details-title:before,
+.system-status-report__status-icon--error:before {
-.details .system-status-report__status-icon--error:before {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc2323'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");
 }
 
-.system-status-report__status-icon--warning .details-title:before,
+.system-status-report__status-icon--warning:before {
-.details .system-status-report__status-icon--warning:before {
   background-image: url("data:image/svg+xml,%3csvg fill='%23e29700' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m14.66 12.316-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625z'/%3e%3c/svg%3e");
 }
 
 @media (forced-colors: active) {
-  .system-status-report__status-title .details-title:before,
+  .system-status-report__status-icon:before {
-  .details .system-status-report__status-icon:before {
     background-color: canvastext;
     background-image: none;
     -webkit-mask-repeat: no-repeat;
@@ -116,13 +91,11 @@
     -webkit-mask-size: contain;
     mask-size: contain;
   }
-  .system-status-report__status-icon--error .details-title:before,
+  .system-status-report__status-icon--error:before {
-  .details .system-status-report__status-icon--error:before {
     -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc2323'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");
     mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc2323'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");
   }
-  .system-status-report__status-icon--warning .details-title:before,
+  .system-status-report__status-icon--warning:before {
-  .details .system-status-report__status-icon--warning:before {
     -webkit-mask-image: url("data:image/svg+xml,%3csvg fill='%23e29700' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m14.66 12.316-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625z'/%3e%3c/svg%3e");
     mask-image: url("data:image/svg+xml,%3csvg fill='%23e29700' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m14.66 12.316-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625z'/%3e%3c/svg%3e");
   }
@@ -167,10 +140,6 @@
   html.js .system-status-report__status-title::-webkit-details-marker {
     display: none;
   }
-  .collapse-processed > .system-status-report__status-title:before {
-    position: relative;
-    top: 0.1875rem;
-  }
   .system-status-report__entry__value {
     display: block;
     width: calc(100% - 23em);

core/themes/claro/css/components/system-status-report.pcss.css

@@ -32,7 +32,6 @@
   box-shadow: none;
 }
 
-/* Account for native and poly-filled details element */
 .system-status-report__status-title {
   position: relative;
   box-sizing: border-box;
@@ -40,23 +39,8 @@
   padding: 1em 1em 1em 3em; /* LTR */
   font-weight: bold;
 }
-.system-status-report__status-title .details-title {
-  text-transform: none;
-  color: inherit;
-}
-.system-status-report__status-title .details-title {
-  padding-left: 3em; /* LTR */
-}
-[dir="rtl"] .system-status-report__status-title .details-title {
-  padding-right: 3em;
-  padding-left: 0;
-}
-[dir="rtl"].details .system-status-report__status-title {
-  padding: 1em 3em 1em 1em;
-}
 
-.system-status-report__status-title .details-title:before,
+.system-status-report__status-icon:before {
-.details .system-status-report__status-icon:before {
   position: absolute;
   top: 1em;
   left: 10px; /* LTR */
@@ -70,36 +54,30 @@
   background-position: top center;
   background-size: contain;
 }
-[dir="rtl"] .system-status-report__status-title .details-title:before,
+[dir="rtl"] .system-status-report__status-title:before {
-[dir="rtl"].details .system-status-report__status-title:before {
   right: 10px;
   left: auto;
   margin-right: 0;
 }
-.system-status-report__status-icon--error .details-title:before,
+.system-status-report__status-icon--error:before {
-.details .system-status-report__status-icon--error:before {
   background-image: url(../../../../misc/icons/dc2323/error.svg);
 }
-.system-status-report__status-icon--warning .details-title:before,
+.system-status-report__status-icon--warning:before {
-.details .system-status-report__status-icon--warning:before {
   background-image: url(../../images/core/e29700/warning.svg);
 }
 
 @media (forced-colors: active) {
-  .system-status-report__status-title .details-title:before,
+  .system-status-report__status-icon:before {
-  .details .system-status-report__status-icon:before {
     background-color: canvastext;
     background-image: none;
     mask-repeat: no-repeat;
     mask-position: top center;
     mask-size: contain;
   }
-  .system-status-report__status-icon--error .details-title:before,
+  .system-status-report__status-icon--error:before {
-  .details .system-status-report__status-icon--error:before {
     mask-image: url(../../../../misc/icons/dc2323/error.svg);
   }
-  .system-status-report__status-icon--warning .details-title:before,
+  .system-status-report__status-icon--warning:before {
-  .details .system-status-report__status-icon--warning:before {
     mask-image: url(../../images/core/e29700/warning.svg);
   }
 }
@@ -142,10 +120,6 @@
   html.js .system-status-report__status-title::-webkit-details-marker {
     display: none;
   }
-  .collapse-processed > .system-status-report__status-title:before {
-    position: relative;
-    top: 3px;
-  }
   .system-status-report__entry__value {
     display: block;
     width: calc(100% - 23em);

core/themes/claro/js/details.js

@@ -3,7 +3,7 @@
  * Claro's polyfill enhancements for HTML5 details.
  */
 
-(($, Modernizr, Drupal) => {
+(($, Drupal) => {
   /**
    * Workaround for Firefox.
    *
@@ -28,35 +28,6 @@
     },
   };
 
-  /**
-   * Workaround for non-supporting browsers.
-   *
-   * This shim extends HTML5 Shiv used by core.
-   *
-   * HTML5 Shiv toggles focused details for hitting enter. We copy that for
-   * space key as well to make the behavior consistent across browsers.
-   *
-   * @type {Drupal~behavior}
-   */
-  Drupal.behaviors.claroDetailsToggleShim = {
-    attach(context) {
-      if (Modernizr.details || !Drupal.CollapsibleDetails.instances.length) {
-        return;
-      }
-
-      $(once('claroDetailsToggleShim', 'details .details-title', context)).on(
-        'keypress',
-        (event) => {
-          const keyCode = event.keyCode || event.charCode;
-          if (keyCode === 32) {
-            $(event.target).closest('summary').trigger('click');
-            event.preventDefault();
-          }
-        },
-      );
-    },
-  };
-
   /**
    * Theme override providing a wrapper for summarized details content.
    *
@@ -75,4 +46,4 @@
    *   The formatted summarized content text.
    */
   Drupal.theme.detailsSummarizedContentText = (text) => text || '';
-})(jQuery, Modernizr, Drupal);
+})(jQuery, Drupal);

core/themes/olivero/css/components/details.css

@@ -75,18 +75,15 @@
 
 /* Arrow icon */
 
-[dir="ltr"] .olivero-details__summary:before,[dir="ltr"] 
+[dir="ltr"] .olivero-details__summary:before {
-.collapse-processed > .olivero-details__summary .details-title:before {
   left: var(--sp0-75);
 }
 
-[dir="rtl"] .olivero-details__summary:before,[dir="rtl"] 
+[dir="rtl"] .olivero-details__summary:before {
-.collapse-processed > .olivero-details__summary .details-title:before {
   right: var(--sp0-75);
 }
 
-.olivero-details__summary:before,
+.olivero-details__summary:before {
-.collapse-processed > .olivero-details__summary .details-title:before {
   position: absolute;
   top: 50%;
   display: block;
@@ -98,15 +95,13 @@
   border-right: solid 2px currentColor;
 }
 
-[dir="rtl"] .olivero-details__summary:before,
+[dir="rtl"] .olivero-details__summary:before {
-  [dir="rtl"] .collapse-processed > .olivero-details__summary .details-title:before {
   transform: translateY(-50%) rotate(-135deg);
-  }
+}
 
 /* Pseudo-selector to manage focus styles */
 
-.olivero-details__summary:after,
+.olivero-details__summary:after {
-.collapse-processed > .olivero-details__summary .details-title:after {
   position: absolute;
   top: calc(var(--details-border-width) * -1);
   right: calc(var(--details-border-width) * -1);
@@ -141,96 +136,17 @@
 /* Details summary, focus and active states */
 
 .olivero-details__summary:focus:after,
-.olivero-details__summary:active:after,
+.olivero-details__summary:active:after {
-.collapse-processed > .olivero-details__summary .details-title:focus:after,
-.collapse-processed > .olivero-details__summary .details-title:active:after {
   opacity: 1;
 }
 
 /* Rotate arrow icon of the details summary, when details expanded */
 
-.olivero-details[open] > .olivero-details__summary::before,
+.olivero-details[open] > .olivero-details__summary::before {
-.collapse-processed[open] > .olivero-details__summary .details-title::before {
   margin-top: -2px;
   transform: translateY(-50%) rotate(135deg);
 }
 
-/* Collapse processed for non-supporting browsers like IE or Edge */
-
-[dir="ltr"] .collapse-processed > .olivero-details__summary {
-  padding-left: 0;
-}
-
-[dir="rtl"] .collapse-processed > .olivero-details__summary {
-  padding-right: 0;
-}
-
-[dir="ltr"] .collapse-processed > .olivero-details__summary {
-  padding-right: 0;
-}
-
-[dir="rtl"] .collapse-processed > .olivero-details__summary {
-  padding-left: 0;
-}
-
-.collapse-processed > .olivero-details__summary {
-  padding-top: 0;
-  padding-bottom: 0
-}
-
-.collapse-processed > .olivero-details__summary:before {
-    content: none;
-  }
-
-.collapse-processed > .olivero-details__summary:after {
-    content: none;
-  }
-
-[dir="ltr"] .collapse-processed > .olivero-details__summary .details-title {
-  padding-left: var(--sp2);
-}
-
-[dir="rtl"] .collapse-processed > .olivero-details__summary .details-title {
-  padding-right: var(--sp2);
-}
-
-[dir="ltr"] .collapse-processed > .olivero-details__summary .details-title {
-  padding-right: var(--sp1);
-}
-
-[dir="rtl"] .collapse-processed > .olivero-details__summary .details-title {
-  padding-left: var(--sp1);
-}
-
-.collapse-processed > .olivero-details__summary .details-title {
-  position: relative;
-  display: block;
-  padding-top: var(--sp1);
-  padding-bottom: var(--sp1);
-  transition: var(--details-summary-transition);
-  text-decoration: none;
-  color: inherit;
-  background-color: var(--color--gray-100);
-}
-
-.collapse-processed > .olivero-details__summary .details-title:focus {
-  outline: solid 2px transparent;
-}
-
-.collapse-processed > .olivero-details__summary .details-title:hover {
-  background-color: var(--color--gray-95);
-}
-
-@media screen and (-ms-high-contrast: active) {
-  .collapse-processed > .olivero-details__summary .details-title::after {
-    top: -0.3125rem;
-    right: -0.3125rem;
-    bottom: -0.3125rem;
-    left: -0.3125rem;
-    border: 2px dotted;
-  }
-}
-
 /* Details content wrapper */
 
 .olivero-details__wrapper {

core/themes/olivero/css/components/details.pcss.css

@@ -38,8 +38,7 @@
 }
 
 /* Arrow icon */
-.olivero-details__summary:before,
+.olivero-details__summary:before {
-.collapse-processed > .olivero-details__summary .details-title:before {
   position: absolute;
   inset-block-start: 50%;
   inset-inline-start: var(--sp0-75);
@@ -52,16 +51,12 @@
   border-right: solid 2px currentColor;
 }
 
-[dir="rtl"] {
+[dir="rtl"] .olivero-details__summary:before {
-  & .olivero-details__summary:before,
-  & .collapse-processed > .olivero-details__summary .details-title:before {
   transform: translateY(-50%) rotate(-135deg);
-  }
 }
 
 /* Pseudo-selector to manage focus styles */
-.olivero-details__summary:after,
+.olivero-details__summary:after {
-.collapse-processed > .olivero-details__summary .details-title:after {
   position: absolute;
   inset: calc(var(--details-border-width) * -1);
   content: "";
@@ -89,61 +84,16 @@
 
 /* Details summary, focus and active states */
 .olivero-details__summary:focus:after,
-.olivero-details__summary:active:after,
+.olivero-details__summary:active:after {
-.collapse-processed > .olivero-details__summary .details-title:focus:after,
-.collapse-processed > .olivero-details__summary .details-title:active:after {
   opacity: 1;
 }
 
 /* Rotate arrow icon of the details summary, when details expanded */
-.olivero-details[open] > .olivero-details__summary::before,
+.olivero-details[open] > .olivero-details__summary::before {
-.collapse-processed[open] > .olivero-details__summary .details-title::before {
   margin-block-start: -2px;
   transform: translateY(-50%) rotate(135deg);
 }
 
-/* Collapse processed for non-supporting browsers like IE or Edge */
-.collapse-processed > .olivero-details__summary {
-  padding-block: 0;
-  padding-inline-start: 0;
-  padding-inline-end: 0;
-
-  &:before {
-    content: none;
-  }
-
-  &:after {
-    content: none;
-  }
-}
-
-.collapse-processed > .olivero-details__summary .details-title {
-  position: relative;
-  display: block;
-  padding-block: var(--sp1);
-  padding-inline-start: var(--sp2);
-  padding-inline-end: var(--sp1);
-  transition: var(--details-summary-transition);
-  text-decoration: none;
-  color: inherit;
-  background-color: var(--color--gray-100);
-}
-
-.collapse-processed > .olivero-details__summary .details-title:focus {
-  outline: solid 2px transparent;
-}
-
-.collapse-processed > .olivero-details__summary .details-title:hover {
-  background-color: var(--color--gray-95);
-}
-
-@media screen and (-ms-high-contrast: active) {
-  .collapse-processed > .olivero-details__summary .details-title::after {
-    inset: -5px;
-    border: 2px dotted;
-  }
-}
-
 /* Details content wrapper */
 .olivero-details__wrapper {
   margin: var(--sp1);

core/themes/starterkit_theme/css/components/collapse-processed.css

@@ -1,32 +0,0 @@
-/**
- * @file
- * Visual styles for collapsible fieldsets.
- */
-
-.collapse-processed > summary {
-  padding-right: 0.5em;
-  padding-left: 0.5em;
-}
-.collapse-processed > summary:before {
-  float: left; /* LTR */
-  width: 1em;
-  height: 1em;
-  content: "";
-  background: url(../../images/icons/menu-expanded.png) 0 100% no-repeat; /* LTR */
-}
-[dir="rtl"] .collapse-processed > summary:before {
-  float: right;
-  background-position: 100% 100%;
-}
-.collapse-processed:not([open]) > summary:before {
-  -ms-transform: rotate(-90deg);
-  -webkit-transform: rotate(-90deg);
-  transform: rotate(-90deg);
-  background-position: 25% 35%; /* LTR */
-}
-[dir="rtl"] .collapse-processed:not([open]) > summary:before {
-  -ms-transform: rotate(90deg);
-  -webkit-transform: rotate(90deg);
-  transform: rotate(90deg);
-  background-position: 75% 35%;
-}

core/themes/starterkit_theme/starterkit_theme.libraries.yml

@@ -8,8 +8,6 @@ base:
         weight: -10
       css/components/button.css:
         weight: -10
-      css/components/collapse-processed.css:
-        weight: -10
       css/components/container-inline.css:
         weight: -10
       css/components/details.css: