upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-02-18 18:28:50 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 14

Fix accessibility of input fields

Browse source 
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>
This commit is contained in:
Carl Schwan 2022-07-18 13:26:19 +02:00 committed by John Molakvoæ
parent 329687ecff
commit 68ed1af3c0
No known key found for this signature in database
GPG key ID: 60C25B8C072916CF
14 changed files with 80 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
apps/files/css/files.css
View file

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

2
apps/files/css/files.css.map
View file

File diff suppressed because one or more lines are too long

8
apps/files/css/files.scss
View file

@ -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,

3
apps/files/css/merged.css
View file

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

2
apps/files/css/merged.css.map
View file

File diff suppressed because one or more lines are too long

2
apps/settings/css/settings.css
View file

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

2
apps/settings/css/settings.scss
View file

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

2
apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
View file

@ -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);

33
apps/user_ldap/lib/Group_LDAP.php.rej Normal file
View file

@ -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)

18
core/css/inputs.css
View file

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

6
core/css/inputs.scss
View file

@ -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;

24
core/css/server.css
View file

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

6
core/css/styles.css
View file

@ -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;

6
core/css/styles.scss
View file

@ -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;