From 30bcacf40d8c37eceecdf4047c1d866606cd8728 Mon Sep 17 00:00:00 2001
From: daria <dariae9@yahoo.com>
Date: Wed, 29 May 2024 18:15:44 +0300
Subject: [PATCH] edit item modals (kanban) are keyboard accessible

---
 www/common/common-interface.js | 72 +++++++++++++++++++++++++++-------
 www/kanban/inner.js            |  2 +-
 2 files changed, 58 insertions(+), 16 deletions(-)

diff --git a/www/common/common-interface.js b/www/common/common-interface.js
index ae759670b..3668ed553 100644
--- a/www/common/common-interface.js
+++ b/www/common/common-interface.js
@@ -327,6 +327,7 @@ define([
                 }
                 $form.append($input);
                 $form.append($button);
+                $button.attr('tabindex', '-1');
                 if (isEdit) { $button.find('span').text(Messages.tag_edit); }
                 else { $button.find('span').text(Messages.add); }
                 $container.append($form);
@@ -567,26 +568,67 @@ define([
         const modalElements = $(frame).find('a, button, input, [tabindex]:not([tabindex="-1"])').filter(':visible');
         modalElements[0].focus();
 
+        let insideColorButtons = false;
         $(frame).on('keydown', function(e) {
-            if (e.which === 9) {
-                e.preventDefault();
-                const length = modalElements.length;
-                const firstElement = modalElements[0];
-                const lastElement = modalElements[length - 1];
+            const colors = $('#cp-kanban-edit-colors button:visible');
 
-                if (e.shiftKey) {
-                    if (document.activeElement === firstElement) {
-                        lastElement.focus();
+            const currentActiveElement = document.activeElement;
+            const currentActiveIndex = colors.index(currentActiveElement);
+
+            if (currentActiveIndex !== -1) {
+                insideColorButtons = true;
+
+                if (e.which === 37) {
+                    e.preventDefault();
+                    if (currentActiveIndex > 0) {
+                        colors.index(currentActiveIndex - 1).focus();
                     } else {
-                        const currentIndex = modalElements.index(document.activeElement);
-                        modalElements[currentIndex - 1].focus();
+                        colors.last().focus();
                     }
-                } else {
-                    if (document.activeElement === lastElement) {
-                        firstElement.focus();
+                }
+
+                else if (e.which === 39) {
+                    e.preventDefault();
+                    if (currentActiveIndex < colors.length - 1) {
+                        colors.index(currentActiveIndex + 1).focus();
                     } else {
-                        const currentIndex = modalElements.index(document.activeElement);
-                        modalElements[currentIndex + 1].focus();
+                        colors.first().focus();
+                    }
+                }
+
+                else if (e.shiftKey && e.which === 9) {
+                    e.preventDefault();
+                    $(frame).find('input:visible').last().focus();
+                    insideColorButtons = false;
+                }
+
+                else if (e.which === 9) {
+                    e.preventDefault();
+                    $(frame).find('.cp-button-confirm-placeholder:visible').first().focus();
+                    insideColorButtons = false;
+                }
+            }
+            else{
+                if (e.which === 9 && !insideColorButtons) {
+                    e.preventDefault();
+                    console.log(modalElements);
+                    const firstElement = modalElements.first()[0];
+                    const lastElement = modalElements.last()[0];
+
+                    if (e.shiftKey) {
+                        if (currentActiveElement === firstElement) {
+                            lastElement.focus();
+                        } else {
+                            const currentIndex = modalElements.index(currentActiveElement);
+                            modalElements.get(currentIndex - 1).focus();
+                        }
+                    } else {
+                        if (currentActiveElement === lastElement) {
+                            firstElement.focus();
+                        } else {
+                            const currentIndex = modalElements.index(currentActiveElement);
+                            modalElements.get(currentIndex + 1).focus();
+                        }
                     }
                 }
             }
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index e3579e952..9bb5dd515 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -378,7 +378,7 @@ define([
             });
         };
         palette.forEach(function (color) {
-            var $color = $(h('span.cp-kanban-palette.fa'));
+            var $color = $(h('button.cp-kanban-palette.fa'));
             $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
             $color.click(function () {
                 if (offline) { return; }