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 7fa40e55585f..53cba224c629 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 8e30421eacaa..316dee2f63c5 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">
--
GitLab