Accessibility: Input highlighting #3687

enonic · Aug 28, 2024 · 70ee587 · 70ee587
1 parent d7de574
commit 70ee587
Show file tree

Hide file tree

Showing 12 changed files with 37 additions and 96 deletions.
diff --git a/src/main/resources/assets/admin/common/js/ui/button/MenuButton.ts b/src/main/resources/assets/admin/common/js/ui/button/MenuButton.ts
@@ -263,30 +263,6 @@ export class MenuButton
         this.actionButton.onClicked(() =>  this.toggleMenuOnAction ? this.toggleMenu() : this.collapseMenu());
 
         this.menu.onClicked(() => this.dropdownHandle.giveFocus());
-
-        this.onKeyDown((event) => {
-            if (KeyHelper.isEnterKey(event)) {
-                const actionButton = this.getActionButton();
-                if (actionButton?.isEnabled()) {
-                    //activeButton.getAction().execute();
-                    $(actionButton.getHTMLElement()).simulate('click');
-                } else if (this.dropdownHandle.isEnabled()) {
-                    $(this.dropdownHandle.getHTMLElement()).simulate('click');
-                    this.dropdownHandle.giveFocus();
-                }
-            }
-        });
-/*
-        this.onFocus((event) => {
-            const activeButton = this.getActiveActionButton();
-            if (activeButton) {
-                activeButton.giveFocus();
-            } else {
-                this.dropdownHandle.isEnabled() && this.dropdownHandle.giveFocus();
-            }
-            event.stopImmediatePropagation();
-            event.preventDefault();
-        });*/
     }
 
     doRender(): Q.Promise<boolean> {

diff --git a/...ain/resources/assets/admin/common/styles/api/form/set/optionset/form-option-set-view.less b/...ain/resources/assets/admin/common/styles/api/form/set/optionset/form-option-set-view.less
@@ -76,9 +76,13 @@
         flex: 1;
         max-width: initial;
 
-        input {
+        > input {
           height: 47px; // match the option to prevent height bounce
         }
+
+        > .@{_COMMON_PREFIX}dropdown-handle {
+          padding: 9px 9px 10px 9px;
+        }
       }
 
       &.selected {

diff --git a/src/main/resources/assets/admin/common/styles/api/ui/button/button.less b/src/main/resources/assets/admin/common/styles/api/ui/button/button.less
@@ -23,15 +23,15 @@
   .button(@form-button-font, @form-button-bg);
 
   &.small {
-    padding: 0 15px 0 15px;
+    padding: 3px 15px;
 
     .label {
       font-size: 12px;
     }
   }
 
   &.large {
-    padding: 5px 19px 5px 19px;
+    padding: 8px 19px;
 
     .label {
       font-size: 16px;

diff --git a/src/main/resources/assets/admin/common/styles/api/ui/button/dropdown-handle.less b/src/main/resources/assets/admin/common/styles/api/ui/button/dropdown-handle.less
@@ -1,8 +1,6 @@
 .@{_COMMON_PREFIX}dropdown-handle {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 37px;
+  height: inherit;
+  width: @input-height-big;
   border: 0;
   cursor: pointer;
   background-color: transparent;

diff --git a/src/main/resources/assets/admin/common/styles/api/ui/button/menu-button.less b/src/main/resources/assets/admin/common/styles/api/ui/button/menu-button.less
@@ -54,15 +54,6 @@
     }
   }
 
-  .@{_COMMON_PREFIX}dropdown-handle {
-    position: relative;
-  }
-
-  .action-button {
-    position: relative;
-    flex-wrap: nowrap;
-  }
-
   &.transparent {
     .@{_COMMON_PREFIX}dropdown-handle {
       &::after {
@@ -111,38 +102,4 @@
     }
   }
 
-  &:not(.transparent) {
-    .@{_COMMON_PREFIX}dropdown-handle {
-      &::after {
-        border-top: 10px solid @admin-white;
-      }
-
-      &:hover {
-        span {
-          color: @admin-white;
-        }
-      }
-
-      &[disabled],
-      &[disabled]:hover {
-        background-color: @form-button-bg-disabled;
-      }
-    }
-
-    .action-button {
-      span {
-        color: @admin-white;
-      }
-
-      &[disabled] {
-        background-color: @form-button-bg-disabled;
-      }
-
-      &:not([disabled]):hover {
-        span {
-          color: @admin-white;
-        }
-      }
-    }
-  }
 }
diff --git a/src/main/resources/assets/admin/common/styles/api/ui/dialog/dropdown-button-row.less b/src/main/resources/assets/admin/common/styles/api/ui/dialog/dropdown-button-row.less
@@ -4,6 +4,7 @@
 
     .@{_COMMON_PREFIX}dropdown-handle {
       margin-right: 1px !important;
+      color: @form-button-font;
     }
   }
 }
diff --git a/src/main/resources/assets/admin/common/styles/api/ui/selector/combobox/combobox.less b/src/main/resources/assets/admin/common/styles/api/ui/selector/combobox/combobox.less
@@ -1,15 +1,21 @@
+@import "../../../../variables";
+
 .@{_COMMON_PREFIX}combobox {
   .reset(true);
+  .input-border();
 
   position: relative;
-  display: block;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap; // to make sure dropdown is shown in the right place
+  height: @input-height-big; // 2px is the top+bottom border height
 
-  &.followed-by-options {
-    margin-bottom: 10px;
+  > input {
+    flex: 1;
   }
 
-  > .@{_COMMON_PREFIX}dropdown-handle {
-    height: 37px;
+  &.followed-by-options {
+    margin-bottom: 10px;
   }
 
   .input-icon {

diff --git a/src/main/resources/assets/admin/common/styles/api/ui/selector/combobox/rich-combobox.less b/src/main/resources/assets/admin/common/styles/api/ui/selector/combobox/rich-combobox.less
@@ -1,9 +1,5 @@
 .rich-combobox {
   .@{_COMMON_PREFIX}combobox {
-    input {
-      width: 100%;
-      height: 37px;
-    }
 
     .option-filter-input {
       margin: initial;

diff --git a/src/main/resources/assets/admin/common/styles/api/ui/selector/dropdown/dropdown.less b/src/main/resources/assets/admin/common/styles/api/ui/selector/dropdown/dropdown.less
@@ -1,14 +1,19 @@
 .@{_COMMON_PREFIX}dropdown {
   .reset(true);
+  .input-border();
 
   position: relative;
-  display: inline-block;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
   width: 100%;
   max-width: 540px;
   text-align: left;
 
-  input {
+  > input {
     .input-glow();
+    flex: 1;
   }
 
   .input-icon {
@@ -75,15 +80,14 @@
   }
 
   .selected-option {
-    position: relative;
-    .input-border();
-    .input-glow();
+    //.input-border();
+    //.input-glow();
 
+    flex: 1;
+    position: relative;
     width: 100%;
-    min-height: 35px;
     padding: 0;
     margin: 0;
-    text-align: left;
     background: white;
     box-sizing: border-box;
 

diff --git a/src/main/resources/assets/admin/common/styles/api/ui/selector/option-filter-input.less b/src/main/resources/assets/admin/common/styles/api/ui/selector/option-filter-input.less
@@ -1,13 +1,9 @@
 .option-filter-input {
   box-sizing: border-box;
-  .input-border();
-  .input-font();
+  height: inherit;
 
   background-color: @admin-white;
-  width: 100%;
-  height: 37px;
-  padding: 4px 37px 4px 10px;
-  line-height: 16px;
+  padding: 4px 4px 4px 10px;
 
   &:focus {
     border-color: @admin-black;

diff --git a/src/main/resources/assets/admin/common/styles/main.less b/src/main/resources/assets/admin/common/styles/main.less
@@ -8,6 +8,7 @@
 
 @import "../icons/icons";
 // :)
+@import "variables";
 @import "reset";
 @import "mixins";
 @import "font";

diff --git a/src/main/resources/assets/admin/common/styles/variables.less b/src/main/resources/assets/admin/common/styles/variables.less
@@ -0,0 +1,2 @@
+@input-height-small: 23px;
+@input-height-big: 35px; //2px will be added for top and bottom border
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@input-height-small: 23px;
		@input-height-big: 35px; //2px will be added for top and bottom border