#4945 Collapsible-fields are now accessible by keyboard (#5353)

* #4945 Collapsible-fields are now accessible by keyboard

* #4945 checkboxes now focusable via tab

Co-authored-by: Lucas Bartholemy <luke-@users.noreply.github.com>

CHANGELOG_DEV.md

@@ -39,4 +39,5 @@
 - Enh #5347: Caching added for group permissions (reduced db queries)
 - Enh #5349: Filter archived spaces on directory
 - Enh #5350: Show the latest file version
+- Enh #4945: Collapsible-fields now accessible by tab and openable/closable by keypress, check-boxes now focusable
 - Enh #5354: Space - pending invites and approvals: add the image of the users

static/css/flatelements.css

@@ -106,7 +106,7 @@
 }
 
 .regular-checkbox {
-    display: none;
+    opacity: 0;
 }
 
 .regular-checkbox + .regular-checkbox-box {
@@ -120,6 +120,10 @@
     margin-right: 5px;
 }
 
+.regular-checkbox:focus + .regular-checkbox-box {
+    border: 2px solid #494949;
+}
+
 .regular-checkbox:checked + .regular-checkbox-box {
     border: 2px solid #428bca;
     background: #428bca;

static/js/humhub/humhub.ui.form.elements.js

@@ -171,7 +171,21 @@ humhub.module('ui.form.elements', function (module, require, $) {
             this.show();
         }
     };
+
     FormFieldsCollapsible.prototype.init = function () {
+        if (!this.$.attr('tabindex')) {
+            this.$.attr('tabindex', 0);
+        }
+
+        var that = this;
+        this.$.on('keyup', function (e) {
+            if(e.which === 9 || !that.$.is(":focus")){
+                return;
+            }
+
+            that.clickCollab();
+        });
+
         if (this.$.find('.error, .has-error').length > 0) {
             this.show();
         }

static/less/form.less

@@ -164,6 +164,10 @@ a.input-field-addon-sm {
 }
 
 // Flatelements
+.regular-checkbox:focus + .regular-checkbox-box {
+    border: 2px solid @text-color-highlight !important;
+}
+
 .regular-checkbox:checked + .regular-checkbox-box {
     border: 2px solid @info;
     background: @info;