From bc2ec3995e70104b9d18526764a013a01c95c4f6 Mon Sep 17 00:00:00 2001
From: Bago <github@bago.org>
Date: Mon, 30 May 2022 10:02:12 +0200
Subject: [PATCH] Better accessibility for boolean and select widgets
 ("replaced checkbox" and selectize)

---
 src/css/app_standalone_material.less  | 35 ++++++++++++++++++++++--
 src/css/style_elements_jquery.less    | 16 +++++++++--
 src/css/style_elements_mixins.less    | 38 +++++++++++++++++++++++----
 src/css/style_elements_selectize.less |  5 ++++
 src/css/style_mosaico_tools.less      | 16 ++++++++++-
 src/js/converter/editor.js            |  4 +--
 src/js/widgets/boolean.js             |  7 +++--
 7 files changed, 107 insertions(+), 14 deletions(-)

diff --git a/src/css/app_standalone_material.less b/src/css/app_standalone_material.less
index c848e83be..37dd9bec0 100644
--- a/src/css/app_standalone_material.less
+++ b/src/css/app_standalone_material.less
@@ -40,6 +40,11 @@
   text-transform: uppercase;
 }
 
+.button-style-focus() {
+  background-color: lighten(@button-background-color, 10%);
+  box-shadow: none;
+}
+
 #main-edit-area .tool {
   border-radius: 100%;
   padding: 4px;
@@ -48,6 +53,12 @@
 }
 
 #toolbar, #preview-toolbar {
+  .ui-buttonset {
+    &:focus-within {
+      background-color: @mosaico-ui-background-color;
+      box-shadow: none;
+    }
+  }
   .ui-button {
     border-radius: 0;
     padding-top: 7px;
@@ -55,8 +66,9 @@
     line-height: 22px;
 
     background-color: @mosaico-ui-background-color;
-    &:hover, &.pressed {
+    &:hover, &.pressed, &:focus, &.ui-state-focus {
       background-color: lighten(@mosaico-ui-background-color, 10%);
+      box-shadow: none;
     }
     &.selected, &.ui-state-active {
       border-bottom: 2px solid @button-text-color;
@@ -86,6 +98,12 @@
     li {
       margin: 1px 1px 0 0;
       line-height: @topbar-height - 4px;
+
+      &.ui-state-focus {
+        background-color: lighten(@mosaico-ui-background-color, 10%);
+        box-shadow: none;
+      }
+
       a {
         border-radius: 0;
       }
@@ -97,7 +115,7 @@
   box-shadow: 1px 1px 3px @shadow-color;
 }
 
-.tabs-style(@activeclass: ~'.active', @buttonstyle: false) {
+.tabs-style(@activeclass: ~'.active', @buttonstyle: false, @focusclass: ~'.focus') {
 
   text-transform: uppercase;
 
@@ -114,6 +132,13 @@
     } 
   }
 
+  li@{focusclass} when (@buttonstyle) {
+    .button-style-focus();
+  }
+  li@{focusclass} when not (@buttonstyle) {
+    .input-style-focus();
+  }
+
   li@{activeclass} a {
     & when(@buttonstyle) {
       background-color: transparent;
@@ -121,6 +146,8 @@
       border-bottom: 3px solid @button-text-color;
     } 
   }
+
+
 }
 
 #main-toolbox {
@@ -153,6 +180,10 @@
 
 
   .objEdit .propInput input[type=checkbox] {
+    &:focus + .checkbox-replacer:after {
+      .input-style-focus;
+    }
+  
     &:checked + .checkbox-replacer:before {
       margin-left: 20px;
       background-color: @button-background-color;
diff --git a/src/css/style_elements_jquery.less b/src/css/style_elements_jquery.less
index 52baafc51..c27f01de3 100644
--- a/src/css/style_elements_jquery.less
+++ b/src/css/style_elements_jquery.less
@@ -29,6 +29,10 @@
 
 .ui-button {
   .button-style();
+
+  &.ui-state-focus {
+    .button-style-focus();
+  }
   
   .ui-button-text, .ui-icon {
     color: @button-text-color;
@@ -50,6 +54,14 @@
 
 .ui-buttonset {
   .buttonset-style();
+  &:focus-within {
+    .button-style-focus();
+
+    .ui-button {
+      // reset .button-style-focus();
+      .button-unstyle-focus();
+    }
+  }
 }
 
 .ui-dialog {
@@ -203,7 +215,7 @@
  */
 .ui-tabs.tabs_horizontal {
   > ul {
-    .tabs-style(~'.ui-state-active', false);
+    .tabs-style(~'.ui-state-active', false, ~'.ui-state-focus');
     padding: 0px 0px 0px .5em;
   }
   .ui-tabs-panel {
@@ -215,7 +227,7 @@
 }
 .ui-tabs.tabs_horizontal.button_color {
   > ul {
-    .tabs-style(~'.ui-state-active', true);
+    .tabs-style(~'.ui-state-active', true, ~'.ui-state-focus');
   }
 }
 
diff --git a/src/css/style_elements_mixins.less b/src/css/style_elements_mixins.less
index fc9103da7..44573b29e 100644
--- a/src/css/style_elements_mixins.less
+++ b/src/css/style_elements_mixins.less
@@ -22,6 +22,22 @@
   vertical-align: middle;
 }
 
+.input-style-focus() {
+  border-color: @input-focus-border-color;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px fade(@input-focus-border-color, 60);
+  outline: 0 none;
+}
+
+.button-style-focus() {
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px fade(@input-focus-border-color, 60);
+  outline: 0 none;
+}
+
+.button-unstyle-focus() {
+  box-shadow: none;
+  outline: 0 none;
+}
+
 .button-style() {
   .input-button-common();
   display: inline-block;
@@ -105,6 +121,9 @@
       content: '...';
     }*/
   }
+  &:focus {
+    .button-style-focus;
+  }
 }
 
 .buttonset-style() {
@@ -144,9 +163,7 @@
   transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
   
   &:focus {
-    border-color: @input-focus-border-color;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px fade(@input-focus-border-color, 60);
-    outline: 0 none;
+    .input-style-focus;
   }
   &.inline {
     margin-right: .5em;
@@ -346,7 +363,7 @@
   }
 }
 
-.tabs-style(@activeclass: ~'.active', @buttonstyle: false) {
+.tabs-style(@activeclass: ~'.active', @buttonstyle: false, @focusclass: ~'.focus') {
   & when (@buttonstyle) {
     background-color: @sidebar-background-color;
   }
@@ -382,6 +399,18 @@
       outline: 0 none !important;
     }
   }
+  li@{focusclass} when (@buttonstyle) {
+    outline: none;
+    a {
+      .button-style-focus();
+    }
+  }
+  li@{focusclass} when not (@buttonstyle) {
+    outline: none;
+    a {
+      .input-style-focus();
+    }
+  }
   li@{activeclass} a {
     border-bottom: @tabs-border-width solid @background-color;
     background: transparent;
@@ -395,7 +424,6 @@
       color: @text-color;
     }
   }
-
 }
 
 
diff --git a/src/css/style_elements_selectize.less b/src/css/style_elements_selectize.less
index cfe282e5e..964567758 100644
--- a/src/css/style_elements_selectize.less
+++ b/src/css/style_elements_selectize.less
@@ -46,7 +46,12 @@
 
       pointer-events:none;
     }
+
+    &.focus {
+      .input-style-focus();
+    }
   }
+
   .selectize-input.dropdown-active::before {
     // prevent the 1px move
     display: none;
diff --git a/src/css/style_mosaico_tools.less b/src/css/style_mosaico_tools.less
index 25d9015fc..3b7062718 100644
--- a/src/css/style_mosaico_tools.less
+++ b/src/css/style_mosaico_tools.less
@@ -450,7 +450,15 @@
   }
 
   .objEdit input[type=checkbox] {
-    display: none;
+    // make the replacement accessible
+    // display: none;
+    opacity: 0;
+    position: absolute;
+    z-index: -1000;
+
+    &:focus + .checkbox-replacer:before {
+      .button-style-focus;
+    }
   
     & + .checkbox-replacer {
       width: 1.28571429em;
@@ -893,6 +901,12 @@
       z-index: 1;
     }
 
+    &:not(:checked):focus + .checkbox-replacer:after,
+    &:checked:focus + .checkbox-replacer:before {
+      .button-style-focus;
+    }
+
+
   }
   
   /* while local-editing we always show the local editor */
diff --git a/src/js/converter/editor.js b/src/js/converter/editor.js
index 6f968dd24..6b953343d 100644
--- a/src/js/converter/editor.js
+++ b/src/js/converter/editor.js
@@ -43,7 +43,7 @@ var _propInput = function(model, prop, propAccessor, editType, widgets) {
     onfocusbinding += ', event: { focus: function(ui, event) { $($element).click(); } } ';
   }
 
-  html += '<label class="data-' + widget + '"' + (widget == 'boolean' ? ' data-bind="event: { mousedown: function(ui, evt) { if (evt.button == 0) { var input = $($element).find(\'input\'); var ch = input.prop(\'checked\'); setTimeout(function() { input.click(); input.prop(\'checked\', !ch); input.trigger(\'change\'); }, 0); } } }, click: function(ui, evt) { evt.preventDefault(); }, clickBubble: false"' : '') + '>';
+  html += '<div class="data-' + widget + '">';
 
   if (typeof widgets !== 'undefined' && typeof widgets[widget] !== 'undefined') {
     var w = widgets[widget];
@@ -57,7 +57,7 @@ var _propInput = function(model, prop, propAccessor, editType, widgets) {
     html += '<input size="7" type="text" value="nothing" data-bind="value: ' + propAccessor + ', ' + onfocusbinding + '" />';
   }
 
-  html += '</label>';
+  html += '</div>';
 
   return html;
 };
diff --git a/src/js/widgets/boolean.js b/src/js/widgets/boolean.js
index 46a96a07c..d58b43b9e 100644
--- a/src/js/widgets/boolean.js
+++ b/src/js/widgets/boolean.js
@@ -6,8 +6,11 @@ var widgetPlugin = {
     return {
       widget: 'boolean',
       html: function(propAccessor, onfocusbinding, parameters) {
-        return '<input type="checkbox" value="nothing" data-bind="checked: ' + propAccessor + ', ' + onfocusbinding + '" />' +
-          '<span class="checkbox-replacer" ></span>';
+        var html = '<!-- ko letproxy: { prop: ' + propAccessor + ' } -->';
+        html += '<input type="checkbox" data-bind="checked: prop" />';
+        html += '<span class="checkbox-replacer" data-bind="event: { mousedown: function(ui, evt) { prop(!prop()); } }, click: function(ui, evt) { evt.preventDefault(); }, clickBubble: false" ></span>';
+        html += '<!-- /ko -->';
+        return html;
       }
     };
   },