From e43c919056b2593f79d932d76f763823014312ff Mon Sep 17 00:00:00 2001
From: Alex Pott <alex.a.pott@googlemail.com>
Date: Mon, 4 May 2020 09:48:22 +0100
Subject: [PATCH] Issue #3119279 by dww, Lendude, alexpott, lauriii:
views-view-table.html.twig template directly uses details without render
array and polyfills
---
.../views/templates/views-view-table.html.twig | 12 +++---------
.../src/Functional/Plugin/StyleTableTest.php | 4 ++++
core/modules/views/views.theme.inc | 15 +++++++++++++++
.../classy/views/views-view-table.html.twig | 12 +++---------
.../Core/Theme/ConfirmClassyCopiesTest.php | 2 +-
.../classy/views/views-view-table.html.twig | 12 +++---------
.../classy/views/views-view-table.html.twig | 12 +++---------
.../templates/views/views-view-table.html.twig | 12 +++---------
.../classy/views/views-view-table.html.twig | 12 +++---------
.../templates/views/views-view-table.html.twig | 12 +++---------
.../templates/views/views-view-table.html.twig | 12 +++---------
11 files changed, 44 insertions(+), 73 deletions(-)
diff --git a/core/modules/views/templates/views-view-table.html.twig b/core/modules/views/templates/views-view-table.html.twig
index 2bc1a9e4c51a..0f0bd5ebcbaf 100644
--- a/core/modules/views/templates/views-view-table.html.twig
+++ b/core/modules/views/templates/views-view-table.html.twig
@@ -26,6 +26,7 @@
* used.
* - responsive: A flag indicating whether table is responsive.
* - sticky: A flag indicating whether table header is sticky.
+ * - summary_element: A render array with table summary information (if any).
*
* @see template_preprocess_views_view_table()
*
@@ -47,15 +48,8 @@
{% else %}
{{ title }}
{% endif %}
- {% if (summary is not empty) or (description is not empty) %}
- <details>
- {% if summary is not empty %}
- <summary>{{ summary }}</summary>
- {% endif %}
- {% if description is not empty %}
- {{ description }}
- {% endif %}
- </details>
+ {% if (summary_element is not empty) %}
+ {{ summary_element }}
{% endif %}
</caption>
{% endif %}
diff --git a/core/modules/views/tests/src/Functional/Plugin/StyleTableTest.php b/core/modules/views/tests/src/Functional/Plugin/StyleTableTest.php
index 77f43eb5e5f6..c42dc0eabf5e 100644
--- a/core/modules/views/tests/src/Functional/Plugin/StyleTableTest.php
+++ b/core/modules/views/tests/src/Functional/Plugin/StyleTableTest.php
@@ -48,6 +48,10 @@ public function testAccessibilitySettings() {
$result = $this->xpath('//summary/child::text()');
$this->assertNotEmpty($result, 'The summary appears on the table.');
$this->assertEqual(trim($result[0]->getText()), 'summary-text');
+ // Check that the summary has the right accessibility settings.
+ $summary = $this->xpath('//summary')[0];
+ $this->assertTrue($summary->hasAttribute('role'));
+ $this->assertTrue($summary->hasAttribute('aria-expanded'));
$result = $this->xpath('//caption/details/child::text()[normalize-space()]');
$this->assertNotEmpty($result, 'The table description appears on the table.');
diff --git a/core/modules/views/views.theme.inc b/core/modules/views/views.theme.inc
index 8c94534ff906..ba9559760887 100644
--- a/core/modules/views/views.theme.inc
+++ b/core/modules/views/views.theme.inc
@@ -660,8 +660,23 @@ function template_preprocess_views_view_table(&$variables) {
$variables['caption_needed'] = FALSE;
}
+ // For backwards compatibility, initialize the 'summary' and 'description'
+ // variables, although core templates now all use 'summary_element' instead.
$variables['summary'] = $handler->options['summary'];
$variables['description'] = $handler->options['description'];
+ $variables['summary_element'] = [
+ '#type' => 'details',
+ '#title' => $handler->options['summary'],
+ // To ensure that the description is properly escaped during rendering, use
+ // an 'inline_template' to let Twig do its magic, instead of 'markup'.
+ 'description' => [
+ '#type' => 'inline_template',
+ '#template' => '{{ description }}',
+ '#context' => [
+ 'description' => $handler->options['description'],
+ ],
+ ],
+ ];
$variables['caption_needed'] |= !empty($variables['summary']) || !empty($variables['description']);
$variables['responsive'] = FALSE;
diff --git a/core/profiles/demo_umami/themes/umami/templates/classy/views/views-view-table.html.twig b/core/profiles/demo_umami/themes/umami/templates/classy/views/views-view-table.html.twig
index 990ecb8b90a3..edc14983da77 100644
--- a/core/profiles/demo_umami/themes/umami/templates/classy/views/views-view-table.html.twig
+++ b/core/profiles/demo_umami/themes/umami/templates/classy/views/views-view-table.html.twig
@@ -26,6 +26,7 @@
* used.
* - responsive: A flag indicating whether table is responsive.
* - sticky: A flag indicating whether table header is sticky.
+ * - summary_element: A render array with table summary information (if any).
*
* @see template_preprocess_views_view_table()
*/
@@ -47,15 +48,8 @@
{% else %}
{{ title }}
{% endif %}
- {% if (summary is not empty) or (description is not empty) %}
- <details>
- {% if summary is not empty %}
- <summary>{{ summary }}</summary>
- {% endif %}
- {% if description is not empty %}
- {{ description }}
- {% endif %}
- </details>
+ {% if (summary_element is not empty) %}
+ {{ summary_element }}
{% endif %}
</caption>
{% endif %}
diff --git a/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php b/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php
index 68ca73be2260..f760cf9f0ddd 100644
--- a/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php
+++ b/core/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php
@@ -834,7 +834,7 @@ protected function getClassyHash($type, $file) {
'views-exposed-form.html.twig' => 'd88119f917c62e0caa75ca0becc8c327',
'views-view-grouping.html.twig' => 'e766e383b51511b86fc0815c94167c18',
'views-view-summary.html.twig' => '38639cb9e815e387782b126cb613bb40',
- 'views-view-table.html.twig' => 'bff52235899b901aa6cd225e7e71bf31',
+ 'views-view-table.html.twig' => '206e53d257651ea8b0eead68888878c0',
'views-view-list.html.twig' => '7480144ffa90384ad2c3162f03ad042f',
'views-view-unformatted.html.twig' => 'b2faf1bd77678dba68e1e6bb05c3a219',
'views-view-row-rss.html.twig' => '0721785e0471ca23bbed6358dde0df68',
diff --git a/core/themes/bartik/templates/classy/views/views-view-table.html.twig b/core/themes/bartik/templates/classy/views/views-view-table.html.twig
index 990ecb8b90a3..edc14983da77 100644
--- a/core/themes/bartik/templates/classy/views/views-view-table.html.twig
+++ b/core/themes/bartik/templates/classy/views/views-view-table.html.twig
@@ -26,6 +26,7 @@
* used.
* - responsive: A flag indicating whether table is responsive.
* - sticky: A flag indicating whether table header is sticky.
+ * - summary_element: A render array with table summary information (if any).
*
* @see template_preprocess_views_view_table()
*/
@@ -47,15 +48,8 @@
{% else %}
{{ title }}
{% endif %}
- {% if (summary is not empty) or (description is not empty) %}
- <details>
- {% if summary is not empty %}
- <summary>{{ summary }}</summary>
- {% endif %}
- {% if description is not empty %}
- {{ description }}
- {% endif %}
- </details>
+ {% if (summary_element is not empty) %}
+ {{ summary_element }}
{% endif %}
</caption>
{% endif %}
diff --git a/core/themes/claro/templates/classy/views/views-view-table.html.twig b/core/themes/claro/templates/classy/views/views-view-table.html.twig
index 990ecb8b90a3..edc14983da77 100644
--- a/core/themes/claro/templates/classy/views/views-view-table.html.twig
+++ b/core/themes/claro/templates/classy/views/views-view-table.html.twig
@@ -26,6 +26,7 @@
* used.
* - responsive: A flag indicating whether table is responsive.
* - sticky: A flag indicating whether table header is sticky.
+ * - summary_element: A render array with table summary information (if any).
*
* @see template_preprocess_views_view_table()
*/
@@ -47,15 +48,8 @@
{% else %}
{{ title }}
{% endif %}
- {% if (summary is not empty) or (description is not empty) %}
- <details>
- {% if summary is not empty %}
- <summary>{{ summary }}</summary>
- {% endif %}
- {% if description is not empty %}
- {{ description }}
- {% endif %}
- </details>
+ {% if (summary_element is not empty) %}
+ {{ summary_element }}
{% endif %}
</caption>
{% endif %}
diff --git a/core/themes/classy/templates/views/views-view-table.html.twig b/core/themes/classy/templates/views/views-view-table.html.twig
index 990ecb8b90a3..edc14983da77 100644
--- a/core/themes/classy/templates/views/views-view-table.html.twig
+++ b/core/themes/classy/templates/views/views-view-table.html.twig
@@ -26,6 +26,7 @@
* used.
* - responsive: A flag indicating whether table is responsive.
* - sticky: A flag indicating whether table header is sticky.
+ * - summary_element: A render array with table summary information (if any).
*
* @see template_preprocess_views_view_table()
*/
@@ -47,15 +48,8 @@
{% else %}
{{ title }}
{% endif %}
- {% if (summary is not empty) or (description is not empty) %}
- <details>
- {% if summary is not empty %}
- <summary>{{ summary }}</summary>
- {% endif %}
- {% if description is not empty %}
- {{ description }}
- {% endif %}
- </details>
+ {% if (summary_element is not empty) %}
+ {{ summary_element }}
{% endif %}
</caption>
{% endif %}
diff --git a/core/themes/seven/templates/classy/views/views-view-table.html.twig b/core/themes/seven/templates/classy/views/views-view-table.html.twig
index 990ecb8b90a3..edc14983da77 100644
--- a/core/themes/seven/templates/classy/views/views-view-table.html.twig
+++ b/core/themes/seven/templates/classy/views/views-view-table.html.twig
@@ -26,6 +26,7 @@
* used.
* - responsive: A flag indicating whether table is responsive.
* - sticky: A flag indicating whether table header is sticky.
+ * - summary_element: A render array with table summary information (if any).
*
* @see template_preprocess_views_view_table()
*/
@@ -47,15 +48,8 @@
{% else %}
{{ title }}
{% endif %}
- {% if (summary is not empty) or (description is not empty) %}
- <details>
- {% if summary is not empty %}
- <summary>{{ summary }}</summary>
- {% endif %}
- {% if description is not empty %}
- {{ description }}
- {% endif %}
- </details>
+ {% if (summary_element is not empty) %}
+ {{ summary_element }}
{% endif %}
</caption>
{% endif %}
diff --git a/core/themes/stable/templates/views/views-view-table.html.twig b/core/themes/stable/templates/views/views-view-table.html.twig
index 1f4910ab48f6..a26eaeba8561 100644
--- a/core/themes/stable/templates/views/views-view-table.html.twig
+++ b/core/themes/stable/templates/views/views-view-table.html.twig
@@ -26,6 +26,7 @@
* used.
* - responsive: A flag indicating whether table is responsive.
* - sticky: A flag indicating whether table header is sticky.
+ * - summary_element: A render array with table summary information (if any).
*
* @see template_preprocess_views_view_table()
*/
@@ -45,15 +46,8 @@
{% else %}
{{ title }}
{% endif %}
- {% if (summary is not empty) or (description is not empty) %}
- <details>
- {% if summary is not empty %}
- <summary>{{ summary }}</summary>
- {% endif %}
- {% if description is not empty %}
- {{ description }}
- {% endif %}
- </details>
+ {% if (summary_element is not empty) %}
+ {{ summary_element }}
{% endif %}
</caption>
{% endif %}
diff --git a/core/themes/stable9/templates/views/views-view-table.html.twig b/core/themes/stable9/templates/views/views-view-table.html.twig
index 1f4910ab48f6..a26eaeba8561 100644
--- a/core/themes/stable9/templates/views/views-view-table.html.twig
+++ b/core/themes/stable9/templates/views/views-view-table.html.twig
@@ -26,6 +26,7 @@
* used.
* - responsive: A flag indicating whether table is responsive.
* - sticky: A flag indicating whether table header is sticky.
+ * - summary_element: A render array with table summary information (if any).
*
* @see template_preprocess_views_view_table()
*/
@@ -45,15 +46,8 @@
{% else %}
{{ title }}
{% endif %}
- {% if (summary is not empty) or (description is not empty) %}
- <details>
- {% if summary is not empty %}
- <summary>{{ summary }}</summary>
- {% endif %}
- {% if description is not empty %}
- {{ description }}
- {% endif %}
- </details>
+ {% if (summary_element is not empty) %}
+ {{ summary_element }}
{% endif %}
</caption>
{% endif %}
--
GitLab