From 4569c101d24265e39bc50a0ba960dae76c15a970 Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Mon, 4 May 2020 17:38:59 +0300
Subject: [PATCH] Issue #2980304 by dww, jrockowitz, Rithesh BK, Kristen Pol,
 andrewmacpherson, dorianwinterfeld, bnjmnm: Seven theme's details/summary
 focus style is broken/missing in some browsers

---
 core/themes/seven/css/base/elements.css       | 10 ++++++++++
 core/themes/seven/templates/details.html.twig |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/core/themes/seven/css/base/elements.css b/core/themes/seven/css/base/elements.css
index 7fa40e55585..53cba224c62 100644
--- a/core/themes/seven/css/base/elements.css
+++ b/core/themes/seven/css/base/elements.css
@@ -164,6 +164,16 @@ details summary:focus {
   text-decoration: underline;
   outline: none;
 }
+/**
+ * Unfortunately, text-decoration for details summary is not supported on all
+ * browsers. So we add a span (which can handle text-decoration) in Seven's
+ * templates/details.html.twig. In case there are other details templates that
+ * don't have the span, we leave the text-decoration in the parent selector.
+ * This provides maximum compatibility and coverage with minimal disruption.
+ */
+details summary:focus span {
+  text-decoration: underline;
+}
 img {
   max-width: 100%;
   height: auto;
diff --git a/core/themes/seven/templates/details.html.twig b/core/themes/seven/templates/details.html.twig
index 8e30421eaca..316dee2f63c 100644
--- a/core/themes/seven/templates/details.html.twig
+++ b/core/themes/seven/templates/details.html.twig
@@ -30,7 +30,7 @@
       ]
     %}
     <summary{{ summary_attributes.addClass(summary_classes) }}>
-      {{- title -}}
+      <span>{{ title }}</span>
     </summary>
   {%- endif -%}
   <div class="seven-details__wrapper details-wrapper">