From b6cc1ed87d19c8ab0ce22b8cc3e9e4b9fb0dc689 Mon Sep 17 00:00:00 2001
From: Denperidge <denperidge@gmail.com>
Date: Wed, 26 Feb 2025 22:35:32 +0100
Subject: [PATCH] [feat] Preferences keyboard accessibility

- tabs now have tabindex; they now work with tab navigation
  This is not a perfect solution yet (it pops back up for the header)
  But it is better than the current... nothing
- Default categories now works with tab navigation
- tabs, checkbox-onoff & default category label now support the Enter key
- Fixed bottom buttons focus outline
- Reset defaults/back buttons are now buttons
  This, alongside some aria-trickery, should allow the current
  a element based workflow to remain,
  whilst hopefully still being keyboard
  and screenreader accessible
---
 client/simple/src/js/main/preferences.js       | 14 ++++++++++++++
 client/simple/src/less/preferences.less        |  1 +
 client/simple/src/less/style.less              |  2 ++
 searx/templates/simple/categories.html         |  2 +-
 searx/templates/simple/preferences.html        |  4 +++-
 searx/templates/simple/preferences/footer.html | 12 ++++++------
 6 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/client/simple/src/js/main/preferences.js b/client/simple/src/js/main/preferences.js
index a0b853d61..417f0ffb7 100644
--- a/client/simple/src/js/main/preferences.js
+++ b/client/simple/src/js/main/preferences.js
@@ -23,6 +23,20 @@
       }
     }
 
+    function handleEnter (el, callback) {
+      searxng.on(el, 'keyup', (e) => {
+        if (e.code == "Enter") {
+          callback();
+        }
+      });
+    }
+
+    for (const el of d.querySelectorAll('[role="tab"],input[type=checkbox][class~=checkbox-onoff],.category_label')) {
+      handleEnter(el, () => {
+        el.click();
+      });
+    }
+
     for (const el of d.querySelectorAll('[data-engine-name]')) {
       searxng.on(el, 'mouseenter', load_engine_descriptions);
     }
diff --git a/client/simple/src/less/preferences.less b/client/simple/src/less/preferences.less
index b3b0bb0d6..cfa2b3064 100644
--- a/client/simple/src/less/preferences.less
+++ b/client/simple/src/less/preferences.less
@@ -184,6 +184,7 @@ table {
     padding: 0.7em;
 
     a {
+      display: inline-block;
       color: var(--color-settings-return-font);
     }
 
diff --git a/client/simple/src/less/style.less b/client/simple/src/less/style.less
index 413d9b076..17b62c763 100644
--- a/client/simple/src/less/style.less
+++ b/client/simple/src/less/style.less
@@ -125,6 +125,8 @@ input[type="submit"],
   color: var(--color-btn-font);
   .rounded-corners;
 
+  .focus-outline;
+
   border: 0;
   cursor: pointer;
 }
diff --git a/searx/templates/simple/categories.html b/searx/templates/simple/categories.html
index d3cd0b542..636ffe05c 100644
--- a/searx/templates/simple/categories.html
+++ b/searx/templates/simple/categories.html
@@ -21,7 +21,7 @@
             {%- for category in categories -%}
                 <div class="category category_checkbox">{{- '' -}}
                     <input type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}" name="category_{{ category }}"{% if category in selected_categories %} checked="checked"{% endif %}>
-                    <label for="checkbox_{{ category|replace(' ', '_') }}" class="tooltips">
+                    <label tabindex="0" for="checkbox_{{ category|replace(' ', '_') }}" class="tooltips category_label">
                         {{- icon_big(category_icons[category]) if category in category_icons  else icon_big('globe') -}}
                         <div class="category_name">{{- _(category) -}}</div>
                     </label>
diff --git a/searx/templates/simple/preferences.html b/searx/templates/simple/preferences.html
index e86e926cc..5f6802f57 100644
--- a/searx/templates/simple/preferences.html
+++ b/searx/templates/simple/preferences.html
@@ -5,9 +5,11 @@
 <div class="tabs" role="tablist">
 {%- endmacro -%}
 
+{% set tab_index = 2 %}
 {%- macro tab_header(name, id, label, checked) -%}
+{% set tab_index =  tab_index + 1 %}
 <input type="radio" name="{{ name }}" id="tab-{{ id }}" {% if checked is sameas true %}checked="checked"{% endif %}>
-<label id="tab-label-{{ id }}" for="tab-{{ id }}" role="tab" aria-controls="tab-content-{{ id }}">{{ label }}</label>
+<label tabindex="{{tab_index}}" id="tab-label-{{ id }}" for="tab-{{ id }}" role="tab" aria-controls="tab-content-{{ id }}">{{ label }}</label>
 <section id="tab-content-{{ id }}" role="tabpanel" aria-hidden="false">
 {%- endmacro -%}
 
diff --git a/searx/templates/simple/preferences/footer.html b/searx/templates/simple/preferences/footer.html
index ec14eb74b..ca043879b 100644
--- a/searx/templates/simple/preferences/footer.html
+++ b/searx/templates/simple/preferences/footer.html
@@ -5,10 +5,10 @@
 
 <input type="submit" value="{{ _('Save') }}">{{- '' -}}
 
-<div class="{% if rtl %}left{% else %}right{% endif %} preferences_back">{{- '' -}}
-  <a href="{{ url_for('clear_cookies') }}">{{ _('Reset defaults') }}</a>{{- '' -}}
-</div>{{- '' -}}
+<button aria-label="{{ _('Reset defaults') }}" class="{% if rtl %}left{% else %}right{% endif %} preferences_back">{{- '' -}}
+  <a tabindex="-1" aria-hidden="true" href="{{ url_for('clear_cookies') }}">{{ _('Reset defaults') }}</a>{{- '' -}}
+</button>{{- '' -}}
 
-<div class="{% if rtl %}left{% else %}right{% endif %} preferences_back">{{- '' -}}
-  <a href="{{ url_for('index') }}">{{ _('Back') }}</a>{{- '' -}}
-</div>
+<button aria-label="{{ _('Back') }}" class="{% if rtl %}left{% else %}right{% endif %} preferences_back">{{- '' -}}
+  <a tabindex="-1" aria-hidden="true" href="{{ url_for('index') }}">{{ _('Back') }}</a>{{- '' -}}
+</button>