diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
index 844fa7b870..32d6ac72e8 100644
--- a/core/themes/claro/css/components/details.css
+++ b/core/themes/claro/css/components/details.css
@@ -371,8 +371,8 @@ rgba(0, 0, 0, 0.1);
  * Merges standard collapse-processed selectors.
  */
 
-[open] > .claro-details__summary--accordion:not(:focus):not(:active)::after,
-[open] > .claro-details__summary--accordion-item:not(:focus):not(:active)::after,
+[open] > .claro-details__summary--accordion:not(:focus)::after,
+[open] > .claro-details__summary--accordion-item:not(:focus)::after,
 .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,
 [open] > .claro-details__summary--vertical-tabs-item:not(:focus):not(:active)::after,
@@ -393,11 +393,32 @@ rgba(0, 0, 0, 0.1);
 }
 
 .claro-details__summary:focus::after,
-.claro-details__summary:active::after,
 .collapse-processed > .claro-details__summary .details-title:focus::after {
   opacity: 1;
 }
 
+/**
+ * Firefox on OSX only applies :focus state to details summary if it was reached
+ * by keyboard navigation.
+ *
+ * Previously, Claro had a workaround for this behavior (which made this :focus
+ * state consistent across browsers) but that was removed in
+ * https://drupal.org/node/3085794.
+ *
+ * The rules below remove the weird flash of the focus outline that is
+ * illustrated in comment #17 https://drupal.org/node/3085794#comment-13334325.
+ *
+ * We might consider using media query @supports (-moz-osx-font-smoothing: auto)
+ * or @-moz-document url-prefix() here...
+ */
+
+.claro-details:not([open]) > .claro-details__summary--accordion:not(:focus)::after,
+.claro-details:not([open]) > .claro-details__summary--accordion-item:not(:focus)::after {
+  opacity: 0;
+  border-color: transparent;
+  box-shadow: none;
+}
+
 /**
  * Safari workaround.
  */
diff --git a/core/themes/claro/css/components/details.pcss.css b/core/themes/claro/css/components/details.pcss.css
index 2dcd6df22a..5bc345d581 100644
--- a/core/themes/claro/css/components/details.pcss.css
+++ b/core/themes/claro/css/components/details.pcss.css
@@ -308,8 +308,8 @@
  * Active has to be here for Firefox.
  * Merges standard collapse-processed selectors.
  */
-[open] > .claro-details__summary--accordion:not(:focus):not(:active)::after,
-[open] > .claro-details__summary--accordion-item:not(:focus):not(:active)::after,
+[open] > .claro-details__summary--accordion:not(:focus)::after,
+[open] > .claro-details__summary--accordion-item:not(:focus)::after,
 .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,
 [open] > .claro-details__summary--vertical-tabs-item:not(:focus):not(:active)::after,
@@ -329,11 +329,31 @@
 }
 
 .claro-details__summary:focus::after,
-.claro-details__summary:active::after,
 .collapse-processed > .claro-details__summary .details-title:focus::after {
   opacity: 1;
 }
 
+/**
+ * Firefox on OSX only applies :focus state to details summary if it was reached
+ * by keyboard navigation.
+ *
+ * Previously, Claro had a workaround for this behavior (which made this :focus
+ * state consistent across browsers) but that was removed in
+ * https://drupal.org/node/3085794.
+ *
+ * The rules below remove the weird flash of the focus outline that is
+ * illustrated in comment #17 https://drupal.org/node/3085794#comment-13334325.
+ *
+ * We might consider using media query @supports (-moz-osx-font-smoothing: auto)
+ * or @-moz-document url-prefix() here...
+ */
+.claro-details:not([open]) > .claro-details__summary--accordion:not(:focus)::after,
+.claro-details:not([open]) > .claro-details__summary--accordion-item:not(:focus)::after {
+  opacity: 0;
+  border-color: transparent;
+  box-shadow: none;
+}
+
 /**
  * Safari workaround.
  */
diff --git a/core/themes/claro/js/details.es6.js b/core/themes/claro/js/details.es6.js
index f7ad00e25e..f80d6dae59 100644
--- a/core/themes/claro/js/details.es6.js
+++ b/core/themes/claro/js/details.es6.js
@@ -4,27 +4,6 @@
  */
 
 (($, Modernizr, Drupal) => {
-  /**
-   * Workaround for Firefox.
-   *
-   * Firefox applies the focus state only for keyboard navigation.
-   * We have to manually trigger focus to make the behavior consistent across
-   * browsers.
-   *
-   * @type {Drupal~behavior}
-   */
-  Drupal.behaviors.claroDetails = {
-    attach(context) {
-      $(context)
-        .once('claroDetails')
-        .on('click', event => {
-          if (event.target.nodeName === 'SUMMARY') {
-            $(event.target).trigger('focus');
-          }
-        });
-    },
-  };
-
   /**
    * Workaround for non-supporting browsers.
    *
diff --git a/core/themes/claro/js/details.js b/core/themes/claro/js/details.js
index 24630f200a..a9d4e71afe 100644
--- a/core/themes/claro/js/details.js
+++ b/core/themes/claro/js/details.js
@@ -6,15 +6,6 @@
 **/
 
 (function ($, Modernizr, Drupal) {
-  Drupal.behaviors.claroDetails = {
-    attach: function attach(context) {
-      $(context).once('claroDetails').on('click', function (event) {
-        if (event.target.nodeName === 'SUMMARY') {
-          $(event.target).trigger('focus');
-        }
-      });
-    }
-  };
   Drupal.behaviors.claroDetailsToggleShim = {
     attach: function attach(context) {
       if (Modernizr.details || !Drupal.CollapsibleDetails.instances.length) {