[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

@@ -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);
     }

client/simple/src/less/preferences.less

@@ -184,6 +184,7 @@ table {
     padding: 0.7em;
 
     a {
+      display: inline-block;
       color: var(--color-settings-return-font);
     }
 

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;
 }

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>

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 -%}
 

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">{{- '' -}}
+<button aria-label="{{ _('Reset defaults') }}" class="{% if rtl %}left{% else %}right{% endif %} preferences_back">{{- '' -}}
-  <a href="{{ url_for('clear_cookies') }}">{{ _('Reset defaults') }}</a>{{- '' -}}
+  <a tabindex="-1" aria-hidden="true" href="{{ url_for('clear_cookies') }}">{{ _('Reset defaults') }}</a>{{- '' -}}
-</div>{{- '' -}}
+</button>{{- '' -}}
 
-<div class="{% if rtl %}left{% else %}right{% endif %} preferences_back">{{- '' -}}
+<button aria-label="{{ _('Back') }}" class="{% if rtl %}left{% else %}right{% endif %} preferences_back">{{- '' -}}
-  <a href="{{ url_for('index') }}">{{ _('Back') }}</a>{{- '' -}}
+  <a tabindex="-1" aria-hidden="true" href="{{ url_for('index') }}">{{ _('Back') }}</a>{{- '' -}}
-</div>
+</button>