From 3cd911f3ca777bb447c17a2f32b4a6ac96112552 Mon Sep 17 00:00:00 2001
From: "lina.wolf" <lwolf@w-commerce.de>
Date: Thu, 14 Dec 2023 19:25:57 +0100
Subject: [PATCH] [TASK] Improve keys of bootstrap tabs

---
 .../template/body/directive/tabs.html.twig    |  8 ++-
 .../body/directive/tabs/tabs-body.html.twig   |  2 +-
 .../body/directive/tabs/tabs-button.html.twig |  9 ++-
 .../Bootstrap/Directives/TabsDirective.php    | 22 ++++----
 .../bootstrap-tabs/expected/index.html        | 56 +++++++++++--------
 5 files changed, 57 insertions(+), 40 deletions(-)

diff --git a/packages/guides-theme-bootstrap/resources/template/body/directive/tabs.html.twig b/packages/guides-theme-bootstrap/resources/template/body/directive/tabs.html.twig
index ca5e2268f..e6432d01f 100644
--- a/packages/guides-theme-bootstrap/resources/template/body/directive/tabs.html.twig
+++ b/packages/guides-theme-bootstrap/resources/template/body/directive/tabs.html.twig
@@ -1,14 +1,16 @@
-<div class="tabs-container {% if node.classes %} {{ node.classesString }}{% endif %}">
-    <ul class="nav nav-tabs" id="{{ node.key }}" role="tablist">
+<div class="tabs">
+    <ul class="nav nav-tabs" id="tab-{{ node.key }}" role="tablist">
         {% for tab in node.tabs -%}
             {% include "body/directive/tabs/tabs-button.html.twig" with {
+                tabsId: node.key,
                 tab:tab
             } %}
         {%- endfor %}
     </ul>
-    <div class="tab-content" id="{{ node.key }}-content">
+    <div class="tab-content" id="tab-content-{{ node.key }}">
         {% for tab in node.tabs -%}
             {% include "body/directive/tabs/tabs-body.html.twig" with {
+                tabsId: node.key,
                 tab:tab
             } %}
         {%- endfor %}
diff --git a/packages/guides-theme-bootstrap/resources/template/body/directive/tabs/tabs-body.html.twig b/packages/guides-theme-bootstrap/resources/template/body/directive/tabs/tabs-body.html.twig
index e159bb404..1daa6bf64 100644
--- a/packages/guides-theme-bootstrap/resources/template/body/directive/tabs/tabs-body.html.twig
+++ b/packages/guides-theme-bootstrap/resources/template/body/directive/tabs/tabs-body.html.twig
@@ -1,3 +1,3 @@
-<div class="tab-pane fade {%- if tab.active %} show active{% endif -%} {%- if tab.classes %} {{ tab.classesString }}{% endif %}" id="{{ tab.key }}-tab-pane" role="tabpanel" aria-labelledby="{{ tab.key }}-tab" tabindex="0">
+<div class="tab-pane fade {%- if tab.active %} show active{% endif -%}" id="{{ tab.key }}-{{ tabsId }}" role="tabpanel" aria-labelledby="{{ tab.key }}-tab-{{ tabsId }}">
     {{ renderNode(tab.value) }}
 </div>
diff --git a/packages/guides-theme-bootstrap/resources/template/body/directive/tabs/tabs-button.html.twig b/packages/guides-theme-bootstrap/resources/template/body/directive/tabs/tabs-button.html.twig
index edd540201..1fe4a6422 100644
--- a/packages/guides-theme-bootstrap/resources/template/body/directive/tabs/tabs-button.html.twig
+++ b/packages/guides-theme-bootstrap/resources/template/body/directive/tabs/tabs-button.html.twig
@@ -1,5 +1,8 @@
 <li class="nav-item" role="presentation">
-    <button class="nav-link {%- if tab.active %} active{% endif -%}" id="{{ tab.key }}-tab" data-bs-toggle="tab" data-bs-target="#{{ tab.key }}-tab-pane"
-            type="button" role="tab" aria-controls="{{ tab.key }}-tab-pane"
-            aria-selected="{%- if tab.active -%} true {%- else -%} false{% endif -%}">{{ renderNode(tab.content) }}</button>
+    <button class="nav-link {%- if tab.active %} active{% endif -%}"
+            id="{{ tab.key }}-tab-{{ tabsId }}" data-bs-toggle="tab" data-bs-target="#{{ tab.key }}-{{ tabsId }}"
+            type="button" role="tab" aria-controls="{{ tab.key }}-{{ tabsId }}"
+            aria-selected="{{ selected }}">
+        {{ renderNode(tab.content) }}
+    </button>
 </li>
diff --git a/packages/guides-theme-bootstrap/src/Bootstrap/Directives/TabsDirective.php b/packages/guides-theme-bootstrap/src/Bootstrap/Directives/TabsDirective.php
index 55708564d..4b9a37128 100644
--- a/packages/guides-theme-bootstrap/src/Bootstrap/Directives/TabsDirective.php
+++ b/packages/guides-theme-bootstrap/src/Bootstrap/Directives/TabsDirective.php
@@ -18,6 +18,7 @@
 use phpDocumentor\Guides\Nodes\CollectionNode;
 use phpDocumentor\Guides\Nodes\InlineCompoundNode;
 use phpDocumentor\Guides\Nodes\Node;
+use phpDocumentor\Guides\ReferenceResolvers\AnchorReducer;
 use phpDocumentor\Guides\RestructuredText\Directives\SubDirective;
 use phpDocumentor\Guides\RestructuredText\Parser\BlockContext;
 use phpDocumentor\Guides\RestructuredText\Parser\Directive;
@@ -25,17 +26,17 @@
 use Psr\Log\LoggerInterface;
 
 use function is_string;
-use function preg_replace;
-use function rand;
-use function str_replace;
-use function strtolower;
-use function strval;
 
 class TabsDirective extends SubDirective
 {
+    private int $tabsCounter = 0;
+
     /** @param Rule<CollectionNode> $startingRule */
-    public function __construct(protected Rule $startingRule, private readonly LoggerInterface $logger)
-    {
+    public function __construct(
+        protected Rule $startingRule,
+        private readonly LoggerInterface $logger,
+        private readonly AnchorReducer $anchorReducer,
+    ) {
         parent::__construct($startingRule);
     }
 
@@ -77,11 +78,10 @@ protected function processSub(
         }
 
         if (is_string($directive->getOption('key')->getValue())) {
-            $key = strtolower($directive->getOption('key')->getValue());
-            $key = str_replace(' ', '-', $key);
-            $key = strval(preg_replace('/[^a-zA-Z0-9\-_]/', '', $key));
+            $key = $this->anchorReducer->reduceAnchor($directive->getOption('key')->getValue());
         } else {
-            $key = 'tabs-' . rand(1, 1000);
+            $this->tabsCounter++;
+            $key = 'tabs-' . $this->tabsCounter;
         }
 
         return new TabsNode(
diff --git a/tests/Integration/tests/bootstrap/bootstrap-tabs/expected/index.html b/tests/Integration/tests/bootstrap/bootstrap-tabs/expected/index.html
index f91dfbbd2..e92678880 100644
--- a/tests/Integration/tests/bootstrap/bootstrap-tabs/expected/index.html
+++ b/tests/Integration/tests/bootstrap/bootstrap-tabs/expected/index.html
@@ -2,47 +2,59 @@
                         <div class="section" id="document-title">
     <h1>Document Title</h1>
 
-            <div class="tabs-container ">
-    <ul class="nav nav-tabs" id="my-tab" role="tablist">
+            <div class="tabs">
+    <ul class="nav nav-tabs" id="tab-my-tab" role="tablist">
         <li class="nav-item" role="presentation">
-    <button class="nav-link active" id="tab-1-tab" data-bs-toggle="tab" data-bs-target="#tab-1-tab-pane"
-            type="button" role="tab" aria-controls="tab-1-tab-pane"
-            aria-selected="true">Tab 1</button>
+    <button class="nav-link active"
+            id="tab-1-tab-my-tab" data-bs-toggle="tab" data-bs-target="#tab-1-my-tab"
+            type="button" role="tab" aria-controls="tab-1-my-tab"
+            aria-selected="">
+        Tab 1
+    </button>
 </li>
 <li class="nav-item" role="presentation">
-    <button class="nav-link" id="tab-2-tab" data-bs-toggle="tab" data-bs-target="#tab-2-tab-pane"
-            type="button" role="tab" aria-controls="tab-2-tab-pane"
-            aria-selected="false">Tab 2</button>
+    <button class="nav-link"
+            id="tab-2-tab-my-tab" data-bs-toggle="tab" data-bs-target="#tab-2-my-tab"
+            type="button" role="tab" aria-controls="tab-2-my-tab"
+            aria-selected="">
+        Tab 2
+    </button>
 </li>
     </ul>
-    <div class="tab-content" id="my-tab-content">
-        <div class="tab-pane fade show active" id="tab-1-tab-pane" role="tabpanel" aria-labelledby="tab-1-tab" tabindex="0">
+    <div class="tab-content" id="tab-content-my-tab">
+        <div class="tab-pane fade show active" id="tab-1-my-tab" role="tabpanel" aria-labelledby="tab-1-tab-my-tab">
     <p>Lorem Ipsum Dolor 1</p>
 </div>
-<div class="tab-pane fade" id="tab-2-tab-pane" role="tabpanel" aria-labelledby="tab-2-tab" tabindex="0">
+<div class="tab-pane fade" id="tab-2-my-tab" role="tabpanel" aria-labelledby="tab-2-tab-my-tab">
     <p>Lorem Ipsum Dolor 2</p>
 </div>
     </div>
 </div>
 
-            <div class="tabs-container ">
-    <ul class="nav nav-tabs" id="another-tab" role="tablist">
+            <div class="tabs">
+    <ul class="nav nav-tabs" id="tab-another-tab" role="tablist">
         <li class="nav-item" role="presentation">
-    <button class="nav-link" id="tab-3-tab" data-bs-toggle="tab" data-bs-target="#tab-3-tab-pane"
-            type="button" role="tab" aria-controls="tab-3-tab-pane"
-            aria-selected="false">Tab 3</button>
+    <button class="nav-link"
+            id="tab-3-tab-another-tab" data-bs-toggle="tab" data-bs-target="#tab-3-another-tab"
+            type="button" role="tab" aria-controls="tab-3-another-tab"
+            aria-selected="">
+        Tab 3
+    </button>
 </li>
 <li class="nav-item" role="presentation">
-    <button class="nav-link active" id="lorem-tab" data-bs-toggle="tab" data-bs-target="#lorem-tab-pane"
-            type="button" role="tab" aria-controls="lorem-tab-pane"
-            aria-selected="true">Tab 4</button>
+    <button class="nav-link active"
+            id="lorem-tab-another-tab" data-bs-toggle="tab" data-bs-target="#lorem-another-tab"
+            type="button" role="tab" aria-controls="lorem-another-tab"
+            aria-selected="">
+        Tab 4
+    </button>
 </li>
     </ul>
-    <div class="tab-content" id="another-tab-content">
-        <div class="tab-pane fade" id="tab-3-tab-pane" role="tabpanel" aria-labelledby="tab-3-tab" tabindex="0">
+    <div class="tab-content" id="tab-content-another-tab">
+        <div class="tab-pane fade" id="tab-3-another-tab" role="tabpanel" aria-labelledby="tab-3-tab-another-tab">
     <p>Lorem Ipsum Dolor 3</p>
 </div>
-<div class="tab-pane fade show active" id="lorem-tab-pane" role="tabpanel" aria-labelledby="lorem-tab" tabindex="0">
+<div class="tab-pane fade show active" id="lorem-another-tab" role="tabpanel" aria-labelledby="lorem-tab-another-tab">
     <p>Lorem Ipsum Dolor 4</p>
 </div>
     </div>