From 4b0885f7d675922659187cbbafbe6fbb6a159676 Mon Sep 17 00:00:00 2001
From: Javier Eguiluz <javier.eguiluz@gmail.com>
Date: Wed, 22 Feb 2023 13:01:34 +0100
Subject: [PATCH] Made the configuration block tabs accessible

---
 src/Directive/ConfigurationBlockDirective.php      |  1 +
 .../html/directives/configuration-block.html.twig  | 12 +++++++-----
 .../blocks/directives/configuration-block.html     | 14 ++++++++------
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/Directive/ConfigurationBlockDirective.php b/src/Directive/ConfigurationBlockDirective.php
index 3a999435..8b0c8cb9 100644
--- a/src/Directive/ConfigurationBlockDirective.php
+++ b/src/Directive/ConfigurationBlockDirective.php
@@ -54,6 +54,7 @@ public function processSub(Parser $parser, ?Node $document, string $variable, st
             $language = $node->getLanguage() ?? 'Unknown';
 
             $blocks[] = [
+                'hash' => hash('sha1', $node->getValue()),
                 'language_label' => self::LANGUAGE_LABELS[$language] ?? ucfirst(str_replace('-', ' ', $language)),
                 'language' => $language,
                 'code' => $node->render(),
diff --git a/src/Templates/default/html/directives/configuration-block.html.twig b/src/Templates/default/html/directives/configuration-block.html.twig
index 4917382e..03a48d3e 100644
--- a/src/Templates/default/html/directives/configuration-block.html.twig
+++ b/src/Templates/default/html/directives/configuration-block.html.twig
@@ -1,14 +1,16 @@
 <div class="configuration-block">
-    <ul class="configuration-tabs configuration-tabs-length-{{ blocks|length }}">
+    <div role="tablist" aria-label="Configuration formats" class="configuration-tabs configuration-tabs-length-{{ blocks|length }}">
         {% for block in blocks %}
-            <li data-language="{{ block.language }}" {{ loop.first ? 'data-active="true"' }}>
+            <button role="tab" type="button" data-language="{{ block.language }}"
+                aria-controls="{{ 'configuration-block-tabpanel-' ~ block.hash }}" aria-selected="{{ loop.first ? 'true' : 'false' }}"
+                {{ loop.first ? 'data-active="true"' }} {{ not loop.first ? 'tabindex="-1"' }}>
                 <span>{{ block.language_label }}</span>
-            </li>
+            </button>
         {% endfor %}
-    </ul>
+    </div>
 
     {% for block in blocks %}
-        <div class="configuration-codeblock" data-language="{{ block.language }}" style="{{ not loop.first ? 'display: none' }}">
+        <div role="tabpanel" id="{{ 'configuration-block-tabpanel-' ~ block.hash }}" aria-label="{{ block.language_label }}" class="configuration-codeblock" data-language="{{ block.language }}" style="{{ not loop.first ? 'display: none' }}">
             {{ block.code|raw }}
         </div>
     {% endfor %}
diff --git a/tests/fixtures/expected/blocks/directives/configuration-block.html b/tests/fixtures/expected/blocks/directives/configuration-block.html
index bdff934b..4b940ce5 100644
--- a/tests/fixtures/expected/blocks/directives/configuration-block.html
+++ b/tests/fixtures/expected/blocks/directives/configuration-block.html
@@ -1,9 +1,10 @@
 <div class="configuration-block">
-    <ul class="configuration-tabs configuration-tabs-length-2">
-        <li data-language="yaml" data-active="true"> <span>YAML</span> </li>
-        <li data-language="php" > <span>PHP</span> </li>
-    </ul>
-    <div class="configuration-codeblock" data-language="yaml" style="">
+    <div role="tablist" aria-label="Configuration formats" class="configuration-tabs configuration-tabs-length-2">
+        <button role="tab" type="button" data-language="yaml" aria-controls="configuration-block-tabpanel-5c4d43ebaab8414c439c1c2a1cd2ec14602f7bdc" aria-selected="true" data-active="true"> <span>YAML</span> </button>
+        <button role="tab" type="button" data-language="php" aria-controls="configuration-block-tabpanel-4c07f6d0afcdafed7d2e707ad137654bcfedb8db" aria-selected="false" tabindex="-1"> <span>PHP</span> </button>
+    </div>
+
+    <div role="tabpanel" id="configuration-block-tabpanel-5c4d43ebaab8414c439c1c2a1cd2ec14602f7bdc" aria-label="YAML" class="configuration-codeblock" data-language="yaml" style>
         <div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-yaml">
             <div class="codeblock-scroll">
                 <pre class="codeblock-lines">1</pre>
@@ -11,7 +12,8 @@
             </div>
         </div>
     </div>
-    <div class="configuration-codeblock" data-language="php" style="display: none">
+
+    <div role="tabpanel" id="configuration-block-tabpanel-4c07f6d0afcdafed7d2e707ad137654bcfedb8db" aria-label="PHP" class="configuration-codeblock" data-language="php" style="display: none">
         <div translate="no" data-loc="1" class="notranslate codeblock codeblock-length-sm codeblock-php">
             <div class="codeblock-scroll">
                 <pre class="codeblock-lines">1</pre>