diff --git a/core/modules/views/templates/views-view-table.html.twig b/core/modules/views/templates/views-view-table.html.twig index 2bc1a9e4c51a09a6710272adb854653f17dc9150..0f0bd5ebcbafaa9911256b2da5a13d4c9db375eb 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 77f43eb5e5f61d008647bc7f0fc96614f6da6512..c42dc0eabf5eb573964e95555ba33eae805e9608 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 8c94534ff906b8a4b3dc23951adb09b38f8274c2..ba955976088731e837b88be1a4c088e785f3d9c9 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 990ecb8b90a3c9681ac357e1797d0e84a2cc9a55..edc14983da77f19519d5e5fcba6230c281cc634a 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 68ca73be2260faaf7fa625bf94080059739d5ed3..f760cf9f0dddd0538a176f11d0fcff942e3355a8 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 990ecb8b90a3c9681ac357e1797d0e84a2cc9a55..edc14983da77f19519d5e5fcba6230c281cc634a 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 990ecb8b90a3c9681ac357e1797d0e84a2cc9a55..edc14983da77f19519d5e5fcba6230c281cc634a 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 990ecb8b90a3c9681ac357e1797d0e84a2cc9a55..edc14983da77f19519d5e5fcba6230c281cc634a 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 990ecb8b90a3c9681ac357e1797d0e84a2cc9a55..edc14983da77f19519d5e5fcba6230c281cc634a 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 1f4910ab48f61944e0aa6d3b219a28db10a46951..a26eaeba8561a33b8b4f987439902881258699ef 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 1f4910ab48f61944e0aa6d3b219a28db10a46951..a26eaeba8561a33b8b4f987439902881258699ef 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 %}