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>

apps/files/css/files.css

@@ -950,6 +950,9 @@ table.dragshadow td.size {
   position: relative;
 }
 
+.breadcrumb {
+  align-items: center;
+}
 .breadcrumb .icon-home {
   border-radius: var(--border-radius);
 }

apps/files/css/files.scss

@@ -851,8 +851,12 @@ table.dragshadow td.size {
 	position: relative;
 }
 
-.breadcrumb .icon-home {
-	border-radius: var(--border-radius);
+.breadcrumb {
+	align-items: center;
+
+	.icon-home {
+		border-radius: var(--border-radius);
+	}
 }
 
 .breadcrumb .canDrop > a,

apps/files/css/merged.css

@@ -950,6 +950,9 @@ table.dragshadow td.size {
   position: relative;
 }
 
+.breadcrumb {
+  align-items: center;
+}
 .breadcrumb .icon-home {
   border-radius: var(--border-radius);
 }

apps/settings/css/settings.css

@@ -1169,7 +1169,7 @@ table.grid td.date {
 }
 
 #mail_smtpport {
-  width: 40px;
+  width: 60px;
 }
 
 .cronlog {

apps/settings/css/settings.scss

@@ -1330,7 +1330,7 @@ table.grid td.date {
 }
 
 #mail_smtpport {
-	width: 40px;
+	width: 60px;
 }
 
 .cronlog {

apps/settings/src/components/PersonalInfo/EmailSection/Email.vue

@@ -367,7 +367,7 @@ export default {
 		width: 100%;
 		height: 34px;
 		margin: 3px 3px 3px 0;
-		padding: 7px 6px;
+		padding: 7px 14px;
 		color: var(--color-main-text);
 		border: 1px solid var(--color-border-dark);
 		border-radius: var(--border-radius);

apps/user_ldap/lib/Group_LDAP.php.rej

@@ -0,0 +1,33 @@
+--- apps/user_ldap/lib/Group_LDAP.php
++++ apps/user_ldap/lib/Group_LDAP.php
+@@ -62,7 +62,7 @@ class Group_LDAP extends BackendUtility implements GroupInterface, IGroupLDAP, I
+        protected CappedMemoryCache $cachedGroupsByMember;
+        /** @var CappedMemoryCache<string[]> $cachedNestedGroups array of groups with gid (DN) as key */
+        protected CappedMemoryCache $cachedNestedGroups;
+-       protected GroupInterface $groupPluginManager;
++       protected GroupPluginManager $groupPluginManager;
+        protected LoggerInterface $logger;
+ 
+        /**
+@@ -243,8 +243,9 @@ class Group_LDAP extends BackendUtility implements GroupInterface, IGroupLDAP, I
+         * @psalm-param array<string, bool> $seen List of DN that have already been processed.
+         * @throws ServerNotAvailableException
+         */
+-       private function _groupMembers(string $dnGroup, array &$seen = []): array {
++       private function _groupMembers(string $dnGroup, array $seen = [], bool &$recursive = false): array {
+                if (isset($seen[$dnGroup])) {
++                       $recursive = true;
+                        return [];
+                }
+                $seen[$dnGroup] = true;
+@@ -317,7 +318,9 @@ class Group_LDAP extends BackendUtility implements GroupInterface, IGroupLDAP, I
+                        unset($allMembers[$index]);
+                }
+ 
+-               $this->access->connection->writeToCache($cacheKey, $allMembers);
++               if (!$recursive) {
++                       $this->access->connection->writeToCache($cacheKey, $allMembers);
++               }
+ 
+                if (isset($attemptedLdapMatchingRuleInChain)
+ 

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 */

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;

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 */

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;

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;