From 312740b97c93cadaeb1c46e92bce39afe9ecbbe4 Mon Sep 17 00:00:00 2001
From: pintaste <7534292+pintaste@users.noreply.github.com>
Date: Mon, 25 May 2026 05:11:04 +0800
Subject: [PATCH] Keyboard navigation and ARIA attributes for actions menus
 (#2727)

- Add aria-haspopup="menu" and aria-expanded to summary element
- Add role="menu" to dropdown ul, role="menuitem" and tabindex="-1" to links
- Sync aria-expanded via toggle event listener
- Focus first menu item when menu opens
- Add ArrowDown/ArrowUp navigation between menu items
- Add Escape key to close menu and return focus to summary

Refs #2738
---
 datasette/templates/_action_menu.html      |  6 +--
 datasette/templates/_close_open_menus.html | 46 ++++++++++++++++++++++
 2 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/datasette/templates/_action_menu.html b/datasette/templates/_action_menu.html
index 7d1d4a55..1ae8c173 100644
--- a/datasette/templates/_action_menu.html
+++ b/datasette/templates/_action_menu.html
@@ -1,7 +1,7 @@
 {% if action_links %}
 <div class="page-action-menu">
 <details class="actions-menu-links details-menu">
-    <summary>
+    <summary aria-haspopup="menu" aria-expanded="false">
         <div class="icon-text">
             <svg class="icon" aria-labelledby="actions-menu-links-title" role="img" style="color: #fff" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <title id="actions-menu-links-title">{{ action_title }}</title>
@@ -13,9 +13,9 @@
     </summary>
     <div class="dropdown-menu">
         <div class="hook"></div>
-        <ul>
+        <ul role="menu">
             {% for link in action_links %}
-            <li><a href="{{ link.href }}">{{ link.label }}
+            <li role="none"><a href="{{ link.href }}" role="menuitem" tabindex="-1">{{ link.label }}
             {% if link.description %}
                 <p class="dropdown-description">{{ link.description }}</p>
             {% endif %}</a>
diff --git a/datasette/templates/_close_open_menus.html b/datasette/templates/_close_open_menus.html
index 3302d77d..a24633d0 100644
--- a/datasette/templates/_close_open_menus.html
+++ b/datasette/templates/_close_open_menus.html
@@ -13,4 +13,50 @@ document.body.addEventListener('click', (ev) => {
         (details) => details.open && details != detailsClickedWithin
     ).forEach(details => details.open = false);
 });
+
+/* Sync aria-expanded and add keyboard navigation for details-menu elements */
+document.querySelectorAll('details.details-menu').forEach(function(details) {
+    var summary = details.querySelector('summary');
+    details.addEventListener('toggle', function() {
+        if (summary) {
+            summary.setAttribute('aria-expanded', details.open ? 'true' : 'false');
+        }
+        if (details.open) {
+            /* Focus first menu item when menu opens */
+            var firstItem = details.querySelector('[role="menuitem"]');
+            if (firstItem) { firstItem.focus(); }
+        }
+    });
+});
+
+document.body.addEventListener('keydown', function(ev) {
+    /* Keyboard navigation for open details-menu elements */
+    var openDetails = Array.from(document.querySelectorAll('details.details-menu[open]'));
+    if (!openDetails.length) { return; }
+
+    if (ev.key === 'Escape') {
+        openDetails.forEach(function(details) {
+            details.open = false;
+            var summary = details.querySelector('summary');
+            if (summary) { summary.focus(); }
+        });
+        return;
+    }
+
+    if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
+        var focused = document.activeElement;
+        openDetails.forEach(function(details) {
+            var items = Array.from(details.querySelectorAll('[role="menuitem"]'));
+            if (!items.length) { return; }
+            var idx = items.indexOf(focused);
+            if (idx === -1) { return; }
+            ev.preventDefault();
+            if (ev.key === 'ArrowDown') {
+                items[(idx + 1) % items.length].focus();
+            } else {
+                items[(idx - 1 + items.length) % items.length].focus();
+            }
+        });
+    }
+});
 </script>