liqd · artyfakt · Mar 13, 2025
diff --git a/adhocracy-plus/templates/a4dashboard/base_dashboard.html b/adhocracy-plus/templates/a4dashboard/base_dashboard.html
@@ -52,19 +52,31 @@
             {% url 'a4dashboard:newsletter-create' organisation_slug=view.organisation.slug as newsletter_create %}
             {% url 'a4dashboard:organisation-settings' organisation_slug=view.organisation.slug as organisation_settings %}
 
-            <nav class="d-none d-sm-inline-block" aria-label="{% translate 'Dashboard' %}">
+            <nav class="d-none d-sm-inline-block dashboard-tabs" aria-label="{% translate 'Dashboard' %}" role="tablist">
                 <a href="{{ project_list }}"
-                   class="tab {% if view.menu_item == 'project' %}active{% endif %}">
+                   class="tab {% if view.menu_item == 'project' %}active{% endif %}"
+                   role="tab"
+                   aria-controls="container"
+                   aria-selected="{% if view.menu_item == 'project' %}true{% else %}false{% endif %}"
+                   tabindex="{% if view.menu_item == 'project' %}0{% else %}-1{% endif %}">
                     {% translate 'Participation projects' %}
                 </a>
                 <a href="{{ newsletter_create }}"
-                   class="tab {% if view.menu_item == 'communication' %}active{% endif %}">
+                   class="tab {% if view.menu_item == 'communication' %}active{% endif %}"
+                   role="tab"
+                   aria-controls="container"
+                   aria-selected="{% if view.menu_item == 'communication' %}true{% else %}false{% endif %}"
+                   tabindex="{% if view.menu_item == 'communication' %}0{% else %}-1{% endif %}">
                     {% translate 'Communication' %}
                 </a>
                 {% has_perm 'a4_candy_organisations.change_organisation' request.user view.organisation as user_may_change_organisation %}
                 {% if user_may_change_organisation %}
                 <a href="{{ organisation_settings }}"
-                   class="tab {% if view.menu_item == 'organisation' %}active{% endif %}">
+                   class="tab {% if view.menu_item == 'organisation' %}active{% endif %}"
+                   role="tab"
+                   aria-controls="container"
+                   aria-selected="{% if view.menu_item == 'organisation' %}true{% else %}false{% endif %}"
+                   tabindex="{% if view.menu_item == 'organisation' %}0{% else %}-1{% endif %}">
                     {% translate 'Organisation settings' %}
                 </a>
                 {% endif %}
@@ -80,7 +92,7 @@
                       role="button"
                       aria-expanded="false"
                       data-bs-toggle="tab">
-                      {% if request.path ==  project_list %}
+                      {% if request.path == project_list %}
                         {% translate 'Participation projects' %}
                       {% elif request.path == newsletter_create %}
                         {% translate 'Communication' %}
@@ -112,16 +124,16 @@
                 </li>
             </ul>
 
-
         </div>
     </div>
     {% endblock %}
-    <div class="container">
+    <div class="container" role="tabpanel">
         {% block dashboard_content %}{% endblock %}
     </div>
 {% endblock %}
 
 {% block extra_js %}
     <script src="{% static 'unload_warning.js' %}"></script>
     <script src="{% static 'init_dashboard_accordion.js' %}"></script>
+    <script src="{% static 'dashboard_tabs.js' %}"></script>
 {% endblock %}
diff --git a/apps/dashboard/assets/dashboard_tabs.js b/apps/dashboard/assets/dashboard_tabs.js
@@ -0,0 +1,82 @@
+'use strict'
+
+/*
+ * This improves accessibility of tabs on dashboard pages where applying Bootstrap's
+ * built-in tab functionality is not possible. It ensures consistent keyboard navigability
+ * in both scenarios.
+ *
+ * This solution is based on the official W3C WAI example for tabs with manual activation:
+ * https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-manual/
+ */
+
+class DashboardTabs {
+  constructor (tablist) {
+    this.tablist = tablist
+    this.firstTab = null
+    this.lastTab = null
+    this.tabs = Array.from(this.tablist.querySelectorAll('[role=tab]'))
+    this.tabs.forEach(tab => {
+      tab.addEventListener('keydown', this.onKeyDown.bind(this))
+      if (!this.firstTab) {
+        this.firstTab = tab
+      }
+      this.lastTab = tab
+    })
+  }
+
+  focusTab (tab) {
+    tab.focus()
+  }
+
+  focusPreviousTab (currentTab) {
+    if (currentTab === this.firstTab) {
+      this.focusTab(this.lastTab)
+    } else {
+      this.focusTab(this.tabs[this.tabs.indexOf(currentTab) - 1])
+    }
+  }
+
+  focusNextTab (currentTab) {
+    if (currentTab === this.lastTab) {
+      this.focusTab(this.firstTab)
+    } else {
+      this.focusTab(this.tabs[this.tabs.indexOf(currentTab) + 1])
+    }
+  }
+
+  onKeyDown (event) {
+    const currentTab = event.currentTarget
+
+    switch (event.key) {
+      case 'ArrowLeft':
+        this.focusPreviousTab(currentTab)
+        break
+      case 'ArrowUp':
+        this.focusPreviousTab(currentTab)
+        event.preventDefault()
+        break
+      case 'ArrowRight':
+        this.focusNextTab(currentTab)
+        break
+      case 'ArrowDown':
+        this.focusNextTab(currentTab)
+        event.preventDefault()
+        break
+      case 'Home':
+        this.focusTab(this.firstTab)
+        break
+      case 'End':
+        this.focusTab(this.lastTab)
+        break
+      default:
+        break
+    }
+  }
+}
+
+window.addEventListener('load', () => {
+  const tablists = document.querySelectorAll('[role=tablist].dashboard-tabs')
+  tablists.forEach(tablist => {
+    tablist = new DashboardTabs(tablist)
+  })
+})
diff --git a/webpack.common.js b/webpack.common.js
@@ -146,6 +146,11 @@ module.exports = {
         'adhocracy4/adhocracy4/categories/assets/select_dropdown_init.js'
       ],
       dependOn: 'adhocracy4'
+    },
+    dashboard_tabs: {
+      import: [
+        './apps/dashboard/assets/dashboard_tabs.js'
+      ]
     }
   },
   output: {