Fix accessibility of input fields

Input fields require a 44x44 pixels target size, this makes all the
input fields and button use that size.

Bonus is that now the input fields and buttons now have the same size as
the new vue button and this looks less weird than the previous state
with controls of different sizes.

See https://www.w3.org/WAI/WCAG21/Understanding/target-size.html

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

5 files changed, 30 insertions, 30 deletions

diff --git a/core/css/inputs.css b/core/css/inputs.css
index 45ee4d66f46..ea97a062206 100644
--- a/core/css/inputs.css
+++ b/core/css/inputs.css
@@ -85,7 +85,7 @@ textarea,
 div[contenteditable=true],
 div[contenteditable=false] {
   width: 130px;
-  min-height: 34px;
+  min-height: 44px;
   box-sizing: border-box;
 }
 
@@ -103,7 +103,7 @@ textarea,
 div[contenteditable=true],
 .pager li a {
   margin: 3px 3px 3px 0;
-  padding: 7px 6px;
+  padding: 7px 14px;
   font-size: 13px;
   background-color: var(--color-main-background);
   color: var(--color-main-text);
@@ -295,7 +295,7 @@ input {
 input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=submit]):not([type=button]):not([type=reset]):not([type=color]):not([type=file]):not([type=image]) {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
-  height: 34px;
+  height: 44px;
 }
 input[type=radio], input[type=checkbox], input[type=file], input[type=image] {
   height: auto;
@@ -322,9 +322,9 @@ button:not(.button-vue), .button,
 input[type=button],
 input[type=submit],
 input[type=reset] {
-  padding: 6px 16px;
+  padding: 6px 11px;
   width: auto;
-  min-height: 34px;
+  min-height: 44px;
   cursor: pointer;
   box-sizing: border-box;
   background-color: var(--color-background-dark);
@@ -405,7 +405,7 @@ select {
   background-color: inherit;
   outline: 0;
   padding-right: 24px !important;
-  height: 34px;
+  height: 44px;
 }
 
 /* Confirm inputs */
@@ -420,8 +420,8 @@ input[type=text] + .icon-confirm, input[type=password] + .icon-confirm, input[ty
   /* Avoid background under border */
   background-color: var(--color-main-background) !important;
   opacity: 1;
-  height: 34px;
-  width: 34px;
+  height: 44px;
+  width: 44px;
   padding: 7px 6px;
   cursor: pointer;
   margin-right: 0;
@@ -823,7 +823,7 @@ div.select2-container a.select2-choice .select2-search-field input {
   cursor: pointer;
   position: relative;
   border-radius: var(--border-radius);
-  height: 34px;
+  height: 44px;
   /* tag wrapper */
   /* Single select default value */
   /* displayed text if tag limit reached */
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index acad10da88e..26461d9d7a7 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -22,7 +22,7 @@ input, textarea, select, button, div[contenteditable=true], div[contenteditable=
 	font-family: var(--font-face) !important;
 }
 
-$default-height: 34px;
+$default-height: 44px;
 
 /* Simple selector to allow easy overriding */
 select,
@@ -51,7 +51,7 @@ textarea,
 div[contenteditable=true],
 .pager li a {
 	margin: 3px 3px 3px 0;
-	padding: 7px 6px;
+	padding: 7px 14px;
 	font-size: 13px;
 	background-color: var(--color-main-background);
 	color: var(--color-main-text);
@@ -180,7 +180,7 @@ button:not(.button-vue), .button,
 input[type='button'],
 input[type='submit'],
 input[type='reset'] {
-	padding: 6px 16px;
+	padding: 6px 11px;
 	width: auto;
 	min-height: $default-height;
 	cursor: pointer;
diff --git a/core/css/server.css b/core/css/server.css
index 89ccae7daf5..24ad6546ee5 100644
--- a/core/css/server.css
+++ b/core/css/server.css
@@ -208,7 +208,7 @@ body {
   box-sizing: border-box;
   position: -webkit-sticky;
   position: sticky;
-  height: 44px;
+  height: 54px;
   padding: 0;
   margin: 0;
   background-color: var(--color-main-background-translucent);
@@ -235,8 +235,8 @@ body {
   box-sizing: border-box;
   display: inline-block;
   display: flex;
-  height: 36px;
-  width: 36px;
+  height: 44px;
+  width: 44px;
   padding: 9px;
   align-items: center;
   justify-content: center;
@@ -1253,7 +1253,7 @@ textarea,
 div[contenteditable=true],
 div[contenteditable=false] {
   width: 130px;
-  min-height: 34px;
+  min-height: 44px;
   box-sizing: border-box;
 }
 
@@ -1271,7 +1271,7 @@ textarea,
 div[contenteditable=true],
 .pager li a {
   margin: 3px 3px 3px 0;
-  padding: 7px 6px;
+  padding: 7px 14px;
   font-size: 13px;
   background-color: var(--color-main-background);
   color: var(--color-main-text);
@@ -1463,7 +1463,7 @@ input {
 input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=submit]):not([type=button]):not([type=reset]):not([type=color]):not([type=file]):not([type=image]) {
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
-  height: 34px;
+  height: 44px;
 }
 input[type=radio], input[type=checkbox], input[type=file], input[type=image] {
   height: auto;
@@ -1490,9 +1490,9 @@ button:not(.button-vue), .button,
 input[type=button],
 input[type=submit],
 input[type=reset] {
-  padding: 6px 16px;
+  padding: 6px 11px;
   width: auto;
-  min-height: 34px;
+  min-height: 44px;
   cursor: pointer;
   box-sizing: border-box;
   background-color: var(--color-background-dark);
@@ -1573,7 +1573,7 @@ select {
   background-color: inherit;
   outline: 0;
   padding-right: 24px !important;
-  height: 34px;
+  height: 44px;
 }
 
 /* Confirm inputs */
@@ -1588,8 +1588,8 @@ input[type=text] + .icon-confirm, input[type=password] + .icon-confirm, input[ty
   /* Avoid background under border */
   background-color: var(--color-main-background) !important;
   opacity: 1;
-  height: 34px;
-  width: 34px;
+  height: 44px;
+  width: 44px;
   padding: 7px 6px;
   cursor: pointer;
   margin-right: 0;
@@ -1991,7 +1991,7 @@ div.select2-container a.select2-choice .select2-search-field input {
   cursor: pointer;
   position: relative;
   border-radius: var(--border-radius);
-  height: 34px;
+  height: 44px;
   /* tag wrapper */
   /* Single select default value */
   /* displayed text if tag limit reached */
diff --git a/core/css/styles.css b/core/css/styles.css
index c73588946e9..a83e683c680 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -207,7 +207,7 @@ body {
   box-sizing: border-box;
   position: -webkit-sticky;
   position: sticky;
-  height: 44px;
+  height: 54px;
   padding: 0;
   margin: 0;
   background-color: var(--color-main-background-translucent);
@@ -234,8 +234,8 @@ body {
   box-sizing: border-box;
   display: inline-block;
   display: flex;
-  height: 36px;
-  width: 36px;
+  height: 44px;
+  width: 44px;
   padding: 9px;
   align-items: center;
   justify-content: center;
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 89f249c1599..ca02d8d4553 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -193,7 +193,7 @@ body {
 	box-sizing: border-box;
 	position: -webkit-sticky;
 	position: sticky;
-	height: 44px;
+	height: 54px;
 	padding: 0;
 	margin: 0;
 	background-color: var(--color-main-background-translucent);
@@ -223,8 +223,8 @@ body {
 			box-sizing: border-box;
 			display: inline-block;
 			display: flex;
-			height: 36px;
-			width: 36px;
+			height: 44px;
+			width: 44px;
 			padding: 9px; // width - border - icon width = 18px
 			align-items: center;
 			justify-content: center;