Initial Drupal 11 with DDEV setup

web/core/misc/details.js

@@ -0,0 +1,44 @@
+/**
+ * @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,
+  );
+
+  /**
+   * Binds a listener to handle required fields in details elements.
+   */
+  window.addEventListener(
+    'invalid',
+    (event) => {
+      if (event.target.matches('details input[required]')) {
+        handleFragmentLinkClickOrHashChange(event, $(event.target));
+      }
+    },
+    { capture: true },
+  );
+})(jQuery);