diff --git a/core/core.libraries.yml b/core/core.libraries.yml
index 6bccc054bc90070d235fa867ab7a7b7f5ce87d94..88f4978bbc811f3a01c3b3fc84ced94c208eb30d 100644
--- a/core/core.libraries.yml
+++ b/core/core.libraries.yml
@@ -122,6 +122,7 @@ drupal.checkbox:
drupal.collapse:
version: VERSION
js:
+ misc/details-summarized-content.js: {}
misc/details-aria.js: {}
misc/collapse.js: {}
dependencies:
diff --git a/core/misc/collapse.es6.js b/core/misc/collapse.es6.js
index 52fd244bc13034ff5f411731f09373fee8297bdf..a0eb2edae8923d4f5298ab5aa827e979af6f322c 100644
--- a/core/misc/collapse.es6.js
+++ b/core/misc/collapse.es6.js
@@ -24,10 +24,8 @@
if (this.$node.find(`.error${anchor}`).length) {
this.$node.attr('open', true);
}
- // Initialize and setup the summary,
- this.setupSummary();
- // Initialize and setup the legend.
- this.setupLegend();
+ // Initialize and set up the summary polyfill.
+ this.setupSummaryPolyfill();
}
$.extend(
@@ -46,61 +44,39 @@
CollapsibleDetails.prototype,
/** @lends Drupal.CollapsibleDetails# */ {
/**
- * Initialize and setup summary events and markup.
- *
- * @fires event:summaryUpdated
- *
- * @listens event:summaryUpdated
- */
- setupSummary() {
- this.$summary = $('<span class="summary"></span>');
- this.$node
- .on('summaryUpdated', $.proxy(this.onSummaryUpdated, this))
- .trigger('summaryUpdated');
- },
-
- /**
- * Initialize and setup legend markup.
+ * Initialize and setup summary markup.
*/
- setupLegend() {
+ setupSummaryPolyfill() {
// Turn the summary into a clickable link.
- const $legend = this.$node.find('> summary');
+ const $summary = this.$node.find('> summary');
$('<span class="details-summary-prefix visually-hidden"></span>')
.append(this.$node.attr('open') ? Drupal.t('Hide') : Drupal.t('Show'))
- .prependTo($legend)
+ .prependTo($summary)
.after(document.createTextNode(' '));
// .wrapInner() does not retain bound events.
$('<a class="details-title"></a>')
.attr('href', `#${this.$node.attr('id')}`)
- .prepend($legend.contents())
- .appendTo($legend);
+ .prepend($summary.contents())
+ .appendTo($summary);
- $legend
+ $summary
.append(this.$summary)
- .on('click', $.proxy(this.onLegendClick, this));
+ .on('click', $.proxy(this.onSummaryClick, this));
},
/**
- * Handle legend clicks.
+ * Handle summary clicks.
*
* @param {jQuery.Event} e
* The event triggered.
*/
- onLegendClick(e) {
+ onSummaryClick(e) {
this.toggle();
e.preventDefault();
},
- /**
- * Update summary.
- */
- onSummaryUpdated() {
- const text = $.trim(this.$node.drupalGetSummary());
- this.$summary.html(text ? ` (${text})` : '');
- },
-
/**
* Toggle the visibility of a details element using smooth animations.
*/
diff --git a/core/misc/collapse.js b/core/misc/collapse.js
index bf312b97cea45bb02f7e01a75b34d3e50997fbf0..c2cddeef54e8060b2b4dfc1dd9362ad7d164e035 100644
--- a/core/misc/collapse.js
+++ b/core/misc/collapse.js
@@ -15,32 +15,23 @@
this.$node.attr('open', true);
}
- this.setupSummary();
- this.setupLegend();
+ this.setupSummaryPolyfill();
}
$.extend(CollapsibleDetails, {
instances: []
});
$.extend(CollapsibleDetails.prototype, {
- setupSummary: function setupSummary() {
- this.$summary = $('<span class="summary"></span>');
- this.$node.on('summaryUpdated', $.proxy(this.onSummaryUpdated, this)).trigger('summaryUpdated');
+ setupSummaryPolyfill: function setupSummaryPolyfill() {
+ var $summary = this.$node.find('> summary');
+ $('<span class="details-summary-prefix visually-hidden"></span>').append(this.$node.attr('open') ? Drupal.t('Hide') : Drupal.t('Show')).prependTo($summary).after(document.createTextNode(' '));
+ $('<a class="details-title"></a>').attr('href', "#".concat(this.$node.attr('id'))).prepend($summary.contents()).appendTo($summary);
+ $summary.append(this.$summary).on('click', $.proxy(this.onSummaryClick, this));
},
- setupLegend: function setupLegend() {
- var $legend = this.$node.find('> summary');
- $('<span class="details-summary-prefix visually-hidden"></span>').append(this.$node.attr('open') ? Drupal.t('Hide') : Drupal.t('Show')).prependTo($legend).after(document.createTextNode(' '));
- $('<a class="details-title"></a>').attr('href', "#".concat(this.$node.attr('id'))).prepend($legend.contents()).appendTo($legend);
- $legend.append(this.$summary).on('click', $.proxy(this.onLegendClick, this));
- },
- onLegendClick: function onLegendClick(e) {
+ onSummaryClick: function onSummaryClick(e) {
this.toggle();
e.preventDefault();
},
- onSummaryUpdated: function onSummaryUpdated() {
- var text = $.trim(this.$node.drupalGetSummary());
- this.$summary.html(text ? " (".concat(text, ")") : '');
- },
toggle: function toggle() {
var _this = this;
diff --git a/core/misc/details-summarized-content.es6.js b/core/misc/details-summarized-content.es6.js
new file mode 100644
index 0000000000000000000000000000000000000000..7cc1d709b4b1f065bcd727bd54ac7d58fc3fdaba
--- /dev/null
+++ b/core/misc/details-summarized-content.es6.js
@@ -0,0 +1,108 @@
+/**
+ * @file
+ * Adds a summary of a details element's contents to its summary element.
+ */
+(($, Drupal) => {
+ /**
+ * The DetailsSummarizedContent object represents a single details element.
+ *
+ * @constructor Drupal.DetailsSummarizedContent
+ *
+ * @param {HTMLElement} node
+ * A details element, the summary of which may have supplemental text.
+ * The supplemental text summarizes the details element's contents.
+ */
+ function DetailsSummarizedContent(node) {
+ this.$node = $(node);
+ this.setupSummary();
+ }
+
+ $.extend(
+ DetailsSummarizedContent,
+ /** @lends Drupal.DetailsSummarizedContent */ {
+ /**
+ * Holds references to instantiated DetailsSummarizedContent objects.
+ *
+ * @type {Array.<Drupal.DetailsSummarizedContent>}
+ */
+ instances: [],
+ },
+ );
+
+ $.extend(
+ DetailsSummarizedContent.prototype,
+ /** @lends Drupal.DetailsSummarizedContent# */ {
+ /**
+ * Initialize and setup summary events and markup.
+ *
+ * @fires event:summaryUpdated
+ *
+ * @listens event:summaryUpdated
+ */
+ setupSummary() {
+ this.$detailsSummarizedContentWrapper = $(
+ Drupal.theme('detailsSummarizedContentWrapper'),
+ );
+ this.$node
+ .on('summaryUpdated', $.proxy(this.onSummaryUpdated, this))
+ .trigger('summaryUpdated')
+ .find('> summary')
+ .append(this.$detailsSummarizedContentWrapper);
+ },
+
+ /**
+ * Update summary.
+ */
+ onSummaryUpdated() {
+ const text = $.trim(this.$node.drupalGetSummary());
+ this.$detailsSummarizedContentWrapper.html(
+ Drupal.theme('detailsSummarizedContentText', text),
+ );
+ },
+ },
+ );
+
+ /**
+ * Adds a summary of a details element's contents to its summary element.
+ *
+ * @type {Drupal~behavior}
+ *
+ * @prop {Drupal~behaviorAttach} attach
+ * Attaches behavior for the details element.
+ */
+ Drupal.behaviors.detailsSummary = {
+ attach(context) {
+ const $detailsElements = $(context)
+ .find('details')
+ .once('details');
+
+ DetailsSummarizedContent.instances = DetailsSummarizedContent.instances.concat(
+ $detailsElements
+ .map((index, details) => new DetailsSummarizedContent(details))
+ .get(),
+ );
+ },
+ };
+
+ Drupal.DetailsSummarizedContent = DetailsSummarizedContent;
+
+ /**
+ * The element containing a wrapper for summarized details content.
+ *
+ * @return {string}
+ * The markup for the element that will contain the summarized content.
+ */
+ Drupal.theme.detailsSummarizedContentWrapper = () =>
+ `<span class="summary"></span>`;
+
+ /**
+ * Formats the summarized details content text.
+ *
+ * @param {string|null} [text]
+ * (optional) The summarized content text displayed in the summary.
+ * @return {string}
+ * The formatted summarized content text.
+ */
+ Drupal.theme.detailsSummarizedContentText = text =>
+ text ? ` (${text})` : '';
+})(jQuery, Drupal);
diff --git a/core/misc/details-summarized-content.js b/core/misc/details-summarized-content.js
new file mode 100644
index 0000000000000000000000000000000000000000..2f67ef9c0f03f156a709a58ccd32c5ca2202f109
--- /dev/null
+++ b/core/misc/details-summarized-content.js
@@ -0,0 +1,44 @@
+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function ($, Drupal) {
+ function DetailsSummarizedContent(node) {
+ this.$node = $(node);
+ this.setupSummary();
+ }
+
+ $.extend(DetailsSummarizedContent, {
+ instances: []
+ });
+ $.extend(DetailsSummarizedContent.prototype, {
+ setupSummary: function setupSummary() {
+ this.$detailsSummarizedContentWrapper = $(Drupal.theme('detailsSummarizedContentWrapper'));
+ this.$node.on('summaryUpdated', $.proxy(this.onSummaryUpdated, this)).trigger('summaryUpdated').find('> summary').append(this.$detailsSummarizedContentWrapper);
+ },
+ onSummaryUpdated: function onSummaryUpdated() {
+ var text = $.trim(this.$node.drupalGetSummary());
+ this.$detailsSummarizedContentWrapper.html(Drupal.theme('detailsSummarizedContentText', text));
+ }
+ });
+ Drupal.behaviors.detailsSummary = {
+ attach: function attach(context) {
+ var $detailsElements = $(context).find('details').once('details');
+ DetailsSummarizedContent.instances = DetailsSummarizedContent.instances.concat($detailsElements.map(function (index, details) {
+ return new DetailsSummarizedContent(details);
+ }).get());
+ }
+ };
+ Drupal.DetailsSummarizedContent = DetailsSummarizedContent;
+
+ Drupal.theme.detailsSummarizedContentWrapper = function () {
+ return "<span class=\"summary\"></span>";
+ };
+
+ Drupal.theme.detailsSummarizedContentText = function (text) {
+ return text ? " (".concat(text, ")") : '';
+ };
+})(jQuery, Drupal);
\ No newline at end of file
diff --git a/core/modules/node/tests/src/FunctionalJavascript/CollapsedSummariesTest.php b/core/modules/node/tests/src/FunctionalJavascript/CollapsedSummariesTest.php
new file mode 100644
index 0000000000000000000000000000000000000000..e6736c9ea6f49ca6dcb749f1265ef53789d05857
--- /dev/null
+++ b/core/modules/node/tests/src/FunctionalJavascript/CollapsedSummariesTest.php
@@ -0,0 +1,77 @@
+<?php
+
+namespace Drupal\Tests\node\FunctionalJavascript;
+
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+
+/**
+ * Tests that outlines of node meta values are displayed in summaries and tabs.
+ *
+ * @group node
+ */
+class CollapsedSummariesTest extends WebDriverTestBase {
+
+ /**
+ * {@inheritdoc}
+ */
+ protected static $modules = ['node'];
+
+ /**
+ * {@inheritdoc}
+ */
+ protected $defaultTheme = 'stark';
+
+ /**
+ * {@inheritdoc}
+ */
+ protected function setUp(): void {
+ parent::setUp();
+
+ $this->drupalCreateContentType([
+ 'type' => 'page',
+ 'name' => 'Basic page',
+ ]);
+
+ $this->drupalCreateNode([
+ 'title' => $this->randomMachineName(),
+ 'type' => 'page',
+ ]);
+
+ $this->drupalLogin($this->createUser(['edit any page content']));
+ }
+
+ /**
+ * Confirm that summaries are provided for node meta at all widths.
+ */
+ public function testSummaries() {
+ $page = $this->getSession()->getPage();
+ $assert_session = $this->assertSession();
+
+ // At a wider width, vertical tabs are used for the meta section of the node
+ // form.
+ $this->getSession()->resizeWindow(1200, 1200);
+ $this->drupalGet('node/1/edit');
+
+ $assert_session->waitForText("New revision");
+ $summary = $assert_session->waitForElement('css', '.vertical-tabs__menu-item-summary');
+ $this->assertNotNull($summary);
+ $this->assertTrue($summary->isVisible());
+ $this->assertEquals('New revision', $summary->getText());
+ $page->uncheckField('revision');
+ $assert_session->waitForText('No revision');
+ $this->assertEquals('No revision', $summary->getText());
+
+ // At a narrower width, details are used for the meta section of the node
+ // form.
+ $this->getSession()->resizeWindow(600, 1200);
+ $this->drupalGet('node/1/edit');
+
+ $summary = $assert_session->waitForElement('css', 'span.summary');
+ $this->assertNotNull($summary);
+ $this->assertTrue($summary->isVisible());
+ $page->uncheckField('revision');
+ $assert_session->waitForText('No revision');
+ $this->assertEquals('(No revision)', $summary->getText());
+ }
+
+}
diff --git a/core/themes/claro/css/components/accordion.css b/core/themes/claro/css/components/accordion.css
index 80d41e2d0bb3d4ffe82ac3b22ffc1dac2a59e00c..ffa62b38ff6fe53cdc26ce8728c2308dcb80de85 100644
--- a/core/themes/claro/css/components/accordion.css
+++ b/core/themes/claro/css/components/accordion.css
@@ -89,14 +89,8 @@ rgba(0, 0, 0, 0.1);
border-bottom-left-radius: 2px;
}
-/**
- * Hide JS summary from the details polyfill to make it consistent with native
- * details elements.
- *
- * @todo Consider removing this after https://www.drupal.org/node/2493957 has
- * been solved.
- */
-
.accordion__item .claro-details__summary .summary {
- display: none;
+ display: block;
+ color: #545560;
+ font-weight: normal;
}
diff --git a/core/themes/claro/css/components/accordion.pcss.css b/core/themes/claro/css/components/accordion.pcss.css
index 57961a20db896734d3d0637b5b618049fdd9caf1..4195c1cbe940c931bd4c5447bf50971e0af245a5 100644
--- a/core/themes/claro/css/components/accordion.pcss.css
+++ b/core/themes/claro/css/components/accordion.pcss.css
@@ -34,13 +34,8 @@
border-bottom-left-radius: var(--details-accordion-border-size-radius);
}
-/**
- * Hide JS summary from the details polyfill to make it consistent with native
- * details elements.
- *
- * @todo Consider removing this after https://www.drupal.org/node/2493957 has
- * been solved.
- */
.accordion__item .claro-details__summary .summary {
- display: none;
+ display: block;
+ color: var(--color-davysgray);
+ font-weight: normal;
}
diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
index 434a55c0e8d4a3e3d07a6e0a94d734d0c0b5aabe..9dee79b377cf48a57237f3bf0a5da31bb2689e37 100644
--- a/core/themes/claro/css/components/details.css
+++ b/core/themes/claro/css/components/details.css
@@ -597,18 +597,11 @@ rgba(0, 0, 0, 0.1);
border-bottom-left-radius: 0;
}
-/**
- * Hide JS summary from the details polyfill to make it consistent with native
- * details elements.
- *
- * @todo Consider removing this after https://www.drupal.org/node/2493957 has
- * been solved.
- */
-
-.claro-details__summary--accordion .summary,
-.claro-details__summary--accordion-item .summary,
-.claro-details__summary--vertical-tabs-item .summary {
- display: none;
+.claro-details__summary-summary {
+ display: block;
+ color: #545560;
+ font-size: 0.889rem;
+ font-weight: normal;
}
@media screen and (-ms-high-contrast: active) {
diff --git a/core/themes/claro/css/components/details.pcss.css b/core/themes/claro/css/components/details.pcss.css
index 6be2fc54f03f73e1b2f4a19e4692563c89a2c621..987cf064728df0ed3c9c8c06ea9bd5ef2da4c0be 100644
--- a/core/themes/claro/css/components/details.pcss.css
+++ b/core/themes/claro/css/components/details.pcss.css
@@ -523,17 +523,11 @@
border-bottom-left-radius: 0;
}
-/**
- * Hide JS summary from the details polyfill to make it consistent with native
- * details elements.
- *
- * @todo Consider removing this after https://www.drupal.org/node/2493957 has
- * been solved.
- */
-.claro-details__summary--accordion .summary,
-.claro-details__summary--accordion-item .summary,
-.claro-details__summary--vertical-tabs-item .summary {
- display: none;
+.claro-details__summary-summary {
+ display: block;
+ color: var(--color-davysgray);
+ font-size: var(--font-size-s);
+ font-weight: normal;
}
@media screen and (-ms-high-contrast: active) {
diff --git a/core/themes/claro/css/components/vertical-tabs.css b/core/themes/claro/css/components/vertical-tabs.css
index 7e939da8260092c1a700e634b03dd1f352643daf..2e46e8942a07289a1286b356327c10a2dd30d456 100644
--- a/core/themes/claro/css/components/vertical-tabs.css
+++ b/core/themes/claro/css/components/vertical-tabs.css
@@ -313,8 +313,7 @@ rgba(0, 0, 0, 0.1);
* Details summary in vertical tabs menu link and in the summary of the details.
*/
-.vertical-tabs__menu-link-summary,
-.vertical-tabs__details-summary-summary {
+.vertical-tabs__menu-link-summary {
display: block;
color: #545560;
font-size: 0.889rem;
diff --git a/core/themes/claro/css/components/vertical-tabs.pcss.css b/core/themes/claro/css/components/vertical-tabs.pcss.css
index 12ed6a86476355d94de90f4bf93644f45c59e0d7..283cafaf6ea6d53a18cd592aea89d5b380bee64f 100644
--- a/core/themes/claro/css/components/vertical-tabs.pcss.css
+++ b/core/themes/claro/css/components/vertical-tabs.pcss.css
@@ -256,8 +256,7 @@
/**
* Details summary in vertical tabs menu link and in the summary of the details.
*/
-.vertical-tabs__menu-link-summary,
-.vertical-tabs__details-summary-summary {
+.vertical-tabs__menu-link-summary {
display: block;
color: var(--color-davysgray);
font-size: var(--font-size-s);
diff --git a/core/themes/claro/js/details.es6.js b/core/themes/claro/js/details.es6.js
index f7ad00e25e2a92737981e32d34e695e8b11a96be..1a0e76afa7979b9a71a12fe8fe992f7783d55b2a 100644
--- a/core/themes/claro/js/details.es6.js
+++ b/core/themes/claro/js/details.es6.js
@@ -55,4 +55,23 @@
});
},
};
+
+ /**
+ * Theme override providing a wrapper for summarized details content.
+ *
+ * @return {string}
+ * The markup for the element that will contain the summarized content.
+ */
+ Drupal.theme.detailsSummarizedContentWrapper = () =>
+ `<span class="claro-details__summary-summary"></span>`;
+
+ /**
+ * Theme override of summarized details content text.
+ *
+ * @param {string|null} [text]
+ * (optional) The summarized content displayed in the summary.
+ * @return {string}
+ * The formatted summarized content text.
+ */
+ Drupal.theme.detailsSummarizedContentText = text => text || '';
})(jQuery, Modernizr, Drupal);
diff --git a/core/themes/claro/js/details.js b/core/themes/claro/js/details.js
index 24630f200a9d0074c941a13a5059f0e4d0e226c3..f9d12b91e232dc86137ec0f8ec7cbe0a1f3763d1 100644
--- a/core/themes/claro/js/details.js
+++ b/core/themes/claro/js/details.js
@@ -31,4 +31,12 @@
});
}
};
+
+ Drupal.theme.detailsSummarizedContentWrapper = function () {
+ return "<span class=\"claro-details__summary-summary\"></span>";
+ };
+
+ Drupal.theme.detailsSummarizedContentText = function (text) {
+ return text || '';
+ };
})(jQuery, Modernizr, Drupal);
\ No newline at end of file
diff --git a/core/themes/claro/js/vertical-tabs.es6.js b/core/themes/claro/js/vertical-tabs.es6.js
index 7547917152c403fa91bd5d663ba588e14bbf460a..adee64487d2cf6221c0ac798cb7cddb0f8de90ec 100644
--- a/core/themes/claro/js/vertical-tabs.es6.js
+++ b/core/themes/claro/js/vertical-tabs.es6.js
@@ -194,10 +194,6 @@
this.link.attr('href', `#${settings.details.attr('id')}`);
- this.detailsSummaryDescription = $(
- Drupal.theme.verticalTabDetailsDescription(),
- ).appendTo(this.details.find('> summary'));
-
this.link.on('click', event => {
event.preventDefault();
self.focus();
@@ -315,7 +311,6 @@
*/
updateSummary() {
const summary = this.details.drupalGetSummary();
- this.detailsSummaryDescription.html(summary);
this.summary.html(summary);
},
@@ -450,15 +445,6 @@
Drupal.theme.verticalTabListWrapper = () =>
'<ul class="vertical-tabs__menu"></ul>';
- /**
- * The wrapper of the details summary message added to the summary element.
- *
- * @return {string}
- * A string representing the DOM fragment.
- */
- Drupal.theme.verticalTabDetailsDescription = () =>
- '<span class="vertical-tabs__details-summary-summary"></span>';
-
/**
* Themes the active vertical tab menu item message.
*
diff --git a/core/themes/claro/js/vertical-tabs.js b/core/themes/claro/js/vertical-tabs.js
index 57f420464def24c6c30d8d1b98be41f8c85841a3..8618af2d1eee7dceb22acec88b110e174c84d845 100644
--- a/core/themes/claro/js/vertical-tabs.js
+++ b/core/themes/claro/js/vertical-tabs.js
@@ -63,7 +63,6 @@
$.extend(this, settings, Drupal.theme('verticalTab', settings));
this.item.addClass('js-vertical-tabs-menu-item');
this.link.attr('href', "#".concat(settings.details.attr('id')));
- this.detailsSummaryDescription = $(Drupal.theme.verticalTabDetailsDescription()).appendTo(this.details.find('> summary'));
this.link.on('click', function (event) {
event.preventDefault();
self.focus();
@@ -133,7 +132,6 @@
},
updateSummary: function updateSummary() {
var summary = this.details.drupalGetSummary();
- this.detailsSummaryDescription.html(summary);
this.summary.html(summary);
},
tabShow: function tabShow() {
@@ -176,10 +174,6 @@
return '<ul class="vertical-tabs__menu"></ul>';
};
- Drupal.theme.verticalTabDetailsDescription = function () {
- return '<span class="vertical-tabs__details-summary-summary"></span>';
- };
-
Drupal.theme.verticalTabActiveTabIndicator = function () {
return "<span class=\"visually-hidden\">".concat(Drupal.t('(active tab)'), "</span>");
};
diff --git a/core/themes/seven/css/base/elements.css b/core/themes/seven/css/base/elements.css
index 53cba224c629ac5f586c4cb266cf6b7ab81ced2e..4da963a3912136280345380a9b931a7696c7012c 100644
--- a/core/themes/seven/css/base/elements.css
+++ b/core/themes/seven/css/base/elements.css
@@ -161,16 +161,18 @@ details summary {
padding: 0.95em 1.45em;
}
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.
+ * don't have the span, we provide text-decoration in the parent selector.
* This provides maximum compatibility and coverage with minimal disruption.
*/
+details summary:not(.seven-details__summary):focus {
+ text-decoration: underline;
+}
details summary:focus span {
text-decoration: underline;
}
diff --git a/core/themes/seven/css/components/entity-meta.css b/core/themes/seven/css/components/entity-meta.css
index cf614fd729fe174816f25385f36abb5109cb5afc..11be99177bcdd4a7250ec6e2040c8be198ed8a7f 100644
--- a/core/themes/seven/css/components/entity-meta.css
+++ b/core/themes/seven/css/components/entity-meta.css
@@ -59,14 +59,12 @@
padding: 0.85em 1.25em;
text-shadow: 0 1px 0 white;
}
-
-/**
- * Hide JS summary from the details polyfill to make it consistent with native
- * details elements.
- *
- * @todo Consider removing this after https://www.drupal.org/node/2493957 has
- * been solved.
- */
-.entity-meta .seven-details .summary {
- display: none;
+.seven-details__summary > .summary {
+ text-transform: none;
+ color: #595959;
+ font-size: 0.95em;
+ font-weight: normal;
+}
+.seven-details__summary:focus > .summary {
+ text-decoration: none;
}