templates: add missing roles to project header mobile toggle to

correctly show the content of each tab. fixes #2507
liqd · Apr 23, 2024 · af48a10 · af48a10
1 parent 6da0c1e
commit af48a10
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/adhocracy-plus/templates/includes/project_header_mobile_toggle.html b/adhocracy-plus/templates/includes/project_header_mobile_toggle.html
@@ -14,30 +14,33 @@
           </a>
           <div class="dropdown-menu dropdown-menu-end">
               <a
-                  class="dropdown-item"
                   id="tab-project-{{ project.pk }}-information"
+                  class="dropdown-item"
+                  data-bs-toggle="tab"
                   href="#tabpanel-project-{{ project.pk }}-information"
+                  role="tab"
                   aria-controls="tabpanel-project-{{ project.pk }}-information"
-                  aria-expanded="false"
-                  data-bs-toggle="tab">
+                  aria-expanded="false">
                   {% translate 'Information' %}
               </a>
               <a
-                  class="dropdown-item"
                   id="tab-project-{{ project.pk }}-participation"
+                  class="dropdown-item active"
+                  data-bs-toggle="tab"
                   href="#tabpanel-project-{{ project.pk }}-participation"
+                  role="tab"
                   aria-controls="tabpanel-project-{{ project.pk }}-participation"
-                  aria-expanded="true"
-                  data-bs-toggle="tab">
+                  aria-expanded="true">
                   {% translate 'Participation' %}
               </a>
               <a
+                  id="tab-project-{{ project.pk }}-result"
                   class="dropdown-item"
+                  data-bs-toggle="tab"
                   href="#tabpanel-project-{{ project.pk }}-result"
-                  id="tab-project-{{ project.pk }}-result"
+                  role="tab"
                   aria-controls="tabpanel-project-{{ project.pk }}-result"
-                  aria-expanded="false"
-                  data-bs-toggle="tab">
+                  aria-expanded="false">
                   {% translate 'Result' %}
               </a>
           </div>

diff --git a/changelog/2507.md b/changelog/2507.md
@@ -0,0 +1,4 @@
+### Fixed
+
+- add missing roles to project header tab dropdown on mobile, each tab now shows
+  the correct content.