Issue #3119279 by dww, Lendude, alexpott, lauriii: views-view-table.h…

…tml.twig template directly uses details without render array and polyfills
drupal · May 4, 2020 · b3c9613 · b3c9613
1 parent 5df7d68
commit b3c9613
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 64 deletions.
diff --git a/modules/views/templates/views-view-table.html.twig b/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/modules/views/tests/src/Functional/Plugin/StyleTableTest.php b/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/modules/views/views.theme.inc b/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/profiles/demo_umami/themes/umami/templates/classy/views/views-view-table.html.twig b/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/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php b/tests/Drupal/KernelTests/Core/Theme/ConfirmClassyCopiesTest.php
@@ -843,7 +843,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/themes/bartik/templates/classy/views/views-view-table.html.twig b/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/themes/claro/templates/classy/views/views-view-table.html.twig b/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/themes/classy/templates/views/views-view-table.html.twig b/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/themes/seven/templates/classy/views/views-view-table.html.twig b/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/themes/stable/templates/views/views-view-table.html.twig b/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 %}