Always put form input inside an input-group to position accesskey

And invert left/right position on RTL.

Closes #14809
(grafted from 7543e85afb49d4663800edf1004de4ec34bbb759)

--HG--
branch : 8.0

sao/src/sao.less

@@ -631,14 +631,11 @@ html.accesskey {
         padding: 0 2px;
         position: absolute;
         text-transform: uppercase;
-        margin: 0 -1em;
+        left: -1em;
+        right: 0;
         z-index: 5;
     }
 
-    input[accesskey][type="checkbox"]:after {
-        background-color: initial;
-    }
-
     *[accesskey] ~ span[data-accesskey] {
         float: right;
         position: relative;
@@ -652,11 +649,15 @@ html.accesskey {
         content: attr(accesskey);
     }
 
-    input[accesskey][type="checkbox"],
-    input[accesskey][type="checkbox"],
-    select[accesskey] {
-        & ~ span[data-accesskey] {
-            bottom: 1em;
+    &[dir="rtl"] {
+        *[accesskey] ~ span[data-accesskey]:after,
+        *[accesskey]:after {
+            left: 0;
+            right: -1em;
+        }
+
+        *[accesskey] ~ span[data-accesskey] {
+            float: left;
         }
     }
 }

sao/src/view/form.js

@@ -2256,11 +2256,13 @@ function eval_pyson(value){
             this.el = jQuery('<div/>', {
                 'class': this.class_
             });
+            this.group = jQuery('<div/>', {
+                'class': 'input-group input-group-sm'
+            }).css('width', '100%').appendTo(this.el);
             this.select = this.labelled = jQuery('<select/>', {
                 'class': 'form-control input-sm mousetrap',
                 'name': attributes.name,
-            });
-            this.el.append(this.select);
+            }).appendTo(this.group);
             this.select.change(this.focus_out.bind(this));
             Sao.common.selection_mixin.init.call(this);
             this.init_selection();
@@ -2361,11 +2363,14 @@ function eval_pyson(value){
             this.el = jQuery('<div/>', {
                 'class': this.class_
             });
+            this.group = jQuery('<div/>', {
+                'class': 'input-group input-group-sm'
+            }).css('width', '100%').appendTo(this.el);
             this.input = this.labelled = jQuery('<input/>', {
                 'type': 'checkbox',
                 'class': 'form-control input-sm mousetrap',
                 'name': attributes.name,
-            }).appendTo(this.el);
+            }).appendTo(this.group);
             this.input.change(this.focus_out.bind(this));
             this.input.click(function() {
                 // Dont trigger click if field is readonly as readonly has no