Made the configuration block tabs accessible

Author: javiereguiluz

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(),

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 %}

tests/fixtures/expected/blocks/directives/configuration-block.html

@@ -1,17 +1,19 @@
 <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>
                 <pre class="codeblock-code"><code><span class="hljs-comment"># app/config/services.yml</span></code></pre>
             </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>