From 540f158a76d2bdc1620a1271357e9339cd850167 Mon Sep 17 00:00:00 2001
From: JonasCodeworks <codeworks@artyfakt.org>
Date: Thu, 13 Mar 2025 09:40:59 +0100
Subject: [PATCH] dashboard: improve accessibility of tabs

---
 .../templates/a4dashboard/base_dashboard.html | 26 ++++--
 apps/dashboard/assets/dashboard_tabs.js       | 82 +++++++++++++++++++
 webpack.common.js                             |  5 ++
 3 files changed, 106 insertions(+), 7 deletions(-)
 create mode 100644 apps/dashboard/assets/dashboard_tabs.js

diff --git a/adhocracy-plus/templates/a4dashboard/base_dashboard.html b/adhocracy-plus/templates/a4dashboard/base_dashboard.html
index 7167a3598..955150d04 100644
--- 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,11 +124,10 @@
                 </li>
             </ul>
 
-
         </div>
     </div>
     {% endblock %}
-    <div class="container">
+    <div class="container" role="tabpanel">
         {% block dashboard_content %}{% endblock %}
     </div>
 {% endblock %}
@@ -124,4 +135,5 @@
 {% 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
new file mode 100644
index 000000000..dacb7be93
--- /dev/null
+++ 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
index df3b5fcbd..1ad491b16 100644
--- 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: {