[BUGFIX] Correct aria-labels for tabs

phpDocumentor · Dec 14, 2023 · 2f713e2 · 2f713e2
1 parent 3cd911f
commit 2f713e2
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
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
@@ -2,7 +2,7 @@
     <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 }}">
+            aria-selected="{%- if tab.active -%} true {%- else -%} false {%- endif -%}">
         {{ renderNode(tab.content) }}
     </button>
 </li>
diff --git a/tests/Integration/tests/bootstrap/bootstrap-tabs/expected/index.html b/tests/Integration/tests/bootstrap/bootstrap-tabs/expected/index.html
@@ -8,15 +8,15 @@ <h1>Document Title</h1>
     <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="">
+            aria-selected="true">
         Tab 1
     </button>
 </li>
 <li class="nav-item" role="presentation">
     <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="">
+            aria-selected="false">
         Tab 2
     </button>
 </li>
@@ -37,15 +37,15 @@ <h1>Document Title</h1>
     <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="">
+            aria-selected="false">
         Tab 3
     </button>
 </li>
 <li class="nav-item" role="presentation">
     <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="">
+            aria-selected="true">
         Tab 4
     </button>
 </li>