Fix various accessibility issues #33259

CarlSchwan · 2022-07-18T11:35:40Z

Increase the size of input fields not fully AAA compliant but better
Use the same design as the new vue component
Fix user status dialog
- Add labels where missings
- Move emoji picker inside input field (similar to talk)
- Fix selecting an emoji
Fix multiselect regressions
Small password settings improvements
Fix button with confirmation action
Fix some other unrelated dark theme issues
Fix select2 focus
Run npm lint:fix

Screenshots:

jancborchardt

The left/right padding needs to be adjusted, currently it’s way too little. It should be visually the same as the top/bottom padding. (Also compare to the select dropdown e.g. for language, where the left/right padding is better but actually a bit too much.)

CarlSchwan · 2022-07-27T09:51:02Z

The left/right padding needs to be adjusted, currently it’s way too little. It should be visually the same as the top/bottom padding. (Also compare to the select dropdown e.g. for language, where the left/right padding is better but actually a bit too much.)

I updated the screenshots to include the new paddings

PVince81 · 2022-07-27T14:50:17Z

@CarlSchwan if this is ready for re-review, please re-request review from Jan-C instead of leaving it blocking

Pytal

Other than the comment below

apps/user_ldap/lib/Group_LDAP.php.rej

jancborchardt

Looks good now! :)

core/css/inputs.scss

CarlSchwan · 2022-07-28T14:31:53Z

Probably also best to wait for nextcloud-libraries/nextcloud-vue#2868 to get merged to adapt the style/size as much as possible to the new view component

PVince81 · 2022-08-10T20:44:27Z

@CarlSchwan still ready to merge then ? it's green!

CarlSchwan · 2022-08-11T09:38:27Z

Adapted to the new style of Nextcloud vue components and change the font size to 15px

PVince81 · 2022-08-25T21:46:55Z

oops, I merged @Pytal's #33217 and now there's conflicts again with your changes :-/

Pytal · 2022-08-25T23:35:07Z

🤔 looks like we just need to adapt the styles in

server/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue

Lines 192 to 265 in 38d0419

    
           <style lang="scss" scoped> 
        
           section { 
        
           	padding: 10px 10px; 
        
           	&::v-deep button:disabled { 
        
           		cursor: default; 
        
           	} 
        
           	.property { 
        
           		display: grid; 
        
           		align-items: center; 
        
           		textarea { 
        
           			resize: vertical; 
        
           			grid-area: 1 / 1; 
        
           			width: 100%; 
        
           			margin: 3px 3px 3px 0; 
        
           			padding: 7px 6px; 
        
           			color: var(--color-main-text); 
        
           			border: 1px solid var(--color-border-dark); 
        
           			border-radius: var(--border-radius); 
        
           			background-color: var(--color-main-background); 
        
           			font-family: var(--font-face); 
        
           			cursor: text; 
        
           			&:hover, 
        
           			&:focus, 
        
           			&:active { 
        
           				border-color: var(--color-primary-element) !important; 
        
           				outline: none !important; 
        
           			} 
        
           		} 
        
           		input { 
        
           			grid-area: 1 / 1; 
        
           			width: 100%; 
        
           			height: 34px; 
        
           			margin: 3px 3px 3px 0; 
        
           			padding: 7px 6px; 
        
           			color: var(--color-main-text); 
        
           			border: 1px solid var(--color-border-dark); 
        
           			border-radius: var(--border-radius); 
        
           			background-color: var(--color-main-background); 
        
           			font-family: var(--font-face); 
        
           			cursor: text; 
        
           		} 
        
           		.property__actions-container { 
        
           			grid-area: 1 / 1; 
        
           			justify-self: flex-end; 
        
           			align-self: flex-end; 
        
           			height: 30px; 
        
           			display: flex; 
        
           			gap: 0 2px; 
        
           			margin-right: 5px; 
        
           			margin-bottom: 5px; 
        
           		} 
        
           	} 
        
           	.fade-enter, 
        
           	.fade-leave-to { 
        
           		opacity: 0; 
        
           	} 
        
           	.fade-enter-active { 
        
           		transition: opacity 200ms ease-out; 
        
           	} 
        
           	.fade-leave-active { 
        
           		transition: opacity 300ms ease-out; 
        
           	} 
        
           } 
        
           </style>

@CarlSchwan

CarlSchwan · 2022-08-26T11:07:35Z

oops, I merged @Pytal's #33217 and now there's conflicts again with your changes :-/

rebased :) let's hope it is the last time

nickvergessen · 2022-08-26T11:49:54Z

Conflicting files
dist/core-main.js.map

Merged by @CarlSchwan
aa150b9

Shame on him!

miaulalala

🐘

skjnldsv

🐘 🐘

PVince81

👍 (we got a nice tour of this yesterday)

This fix a regression with the theming api following the change in webpack bundling introduced in 24 Signed-off-by: Carl Schwan <[email protected]>

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 <[email protected]>

Signed-off-by: Carl Schwan <[email protected]>

- Fix user status dialog - Add label where missing - Move emoji picker inside input field (similar to talk) - Fix selecting an emoji - Fix multiselect - Fix button with confirmation action - Fix some other unrelated dark theme issues - Fix select2 focus - Run npm lint:fix Signed-off-by: Carl Schwan <[email protected]>

Signed-off-by: Carl Schwan <[email protected]>

CarlSchwan added 3. to review Waiting for reviews feature: accessibility labels Jul 18, 2022

CarlSchwan added this to the Nextcloud 25 milestone Jul 18, 2022

CarlSchwan requested review from Pytal and a team July 18, 2022 11:35

CarlSchwan self-assigned this Jul 18, 2022

CarlSchwan requested review from artonge, skjnldsv and jancborchardt and removed request for a team July 18, 2022 11:35

jancborchardt requested changes Jul 18, 2022

View reviewed changes

CarlSchwan force-pushed the fix/carl/accessibility-input-fields branch 2 times, most recently from f0ad5d8 to 65acfd5 Compare July 27, 2022 09:50

artonge previously approved these changes Jul 27, 2022

View reviewed changes

Pytal previously approved these changes Jul 27, 2022

View reviewed changes

apps/user_ldap/lib/Group_LDAP.php.rej Outdated Show resolved Hide resolved

jancborchardt approved these changes Jul 27, 2022

View reviewed changes

jancborchardt reviewed Jul 28, 2022

View reviewed changes

core/css/inputs.scss Show resolved Hide resolved

CarlSchwan added the do not merge label Aug 1, 2022

CarlSchwan added 2. developing Work in progress and removed 3. to review Waiting for reviews labels Aug 11, 2022

CarlSchwan force-pushed the fix/carl/accessibility-input-fields branch from 65acfd5 to cb64d90 Compare August 11, 2022 09:37

CarlSchwan requested a review from jancborchardt August 11, 2022 09:38

CarlSchwan added 3. to review Waiting for reviews and removed 2. developing Work in progress do not merge labels Aug 11, 2022

CarlSchwan requested a review from PVince81 August 24, 2022 16:09

CarlSchwan force-pushed the fix/carl/accessibility-input-fields branch from f456d3b to 3593cf1 Compare August 25, 2022 12:26

nickvergessen mentioned this pull request Aug 25, 2022

Dyslexia font issues #33704

Closed

2 tasks

CarlSchwan force-pushed the fix/carl/accessibility-input-fields branch from 3593cf1 to d2d9ddb Compare August 25, 2022 17:13

CarlSchwan force-pushed the fix/carl/accessibility-input-fields branch from d2d9ddb to 1b4823d Compare August 26, 2022 11:05

CarlSchwan force-pushed the fix/carl/accessibility-input-fields branch 2 times, most recently from e6612a0 to 8446bb0 Compare August 26, 2022 11:59

miaulalala approved these changes Aug 26, 2022

View reviewed changes

skjnldsv approved these changes Aug 26, 2022

View reviewed changes

PVince81 approved these changes Aug 26, 2022

View reviewed changes

This comment was marked as resolved.

Sign in to view

CarlSchwan added 6 commits August 26, 2022 19:49

Make it possible to load theme/<themename>/dist

329687e

This fix a regression with the theming api following the change in webpack bundling introduced in 24 Signed-off-by: Carl Schwan <[email protected]>

Adapt to new Nextcloud vue style

f630bd2

Signed-off-by: Carl Schwan <[email protected]>

More dark theme fixes

1d35a53

Signed-off-by: Carl Schwan <[email protected]>

Fix rebasing issues and improve profile settings page a bit more

f1ce2c2

Signed-off-by: Carl Schwan <[email protected]>

CarlSchwan force-pushed the fix/carl/accessibility-input-fields branch from 8446bb0 to dfd36e8 Compare August 26, 2022 17:51

skjnldsv force-pushed the fix/carl/accessibility-input-fields branch from dfd36e8 to f1ce2c2 Compare August 26, 2022 17:51

skjnldsv merged commit eb8ac0b into master Aug 26, 2022

skjnldsv deleted the fix/carl/accessibility-input-fields branch August 26, 2022 17:59

skjnldsv added 4. to release Ready to be released and/or waiting for tests to finish and removed 3. to review Waiting for reviews labels Aug 26, 2022

blizzz mentioned this pull request Aug 30, 2022

25.0.0 beta 4 #33762

Merged

Pytal mentioned this pull request Sep 16, 2022

Fix styling of locale dropdown #34118

Merged

Pytal mentioned this pull request Jan 20, 2023

Fix user status message input #36258

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix various accessibility issues #33259

Fix various accessibility issues #33259

CarlSchwan commented Jul 18, 2022 •

edited

Loading

jancborchardt left a comment

CarlSchwan commented Jul 27, 2022

PVince81 commented Jul 27, 2022

Pytal left a comment

jancborchardt left a comment

CarlSchwan commented Jul 28, 2022

PVince81 commented Aug 10, 2022

CarlSchwan commented Aug 11, 2022

PVince81 commented Aug 25, 2022

Pytal commented Aug 25, 2022 •

edited

Loading

CarlSchwan commented Aug 26, 2022

nickvergessen commented Aug 26, 2022

miaulalala left a comment

skjnldsv left a comment

PVince81 left a comment

This comment was marked as resolved.

Fix various accessibility issues #33259

Fix various accessibility issues #33259

Conversation

CarlSchwan commented Jul 18, 2022 • edited Loading

jancborchardt left a comment

Choose a reason for hiding this comment

CarlSchwan commented Jul 27, 2022

PVince81 commented Jul 27, 2022

Pytal left a comment

Choose a reason for hiding this comment

jancborchardt left a comment

Choose a reason for hiding this comment

CarlSchwan commented Jul 28, 2022

PVince81 commented Aug 10, 2022

CarlSchwan commented Aug 11, 2022

PVince81 commented Aug 25, 2022

Pytal commented Aug 25, 2022 • edited Loading

CarlSchwan commented Aug 26, 2022

nickvergessen commented Aug 26, 2022

miaulalala left a comment

Choose a reason for hiding this comment

skjnldsv left a comment

Choose a reason for hiding this comment

PVince81 left a comment

Choose a reason for hiding this comment

This comment was marked as resolved.

CarlSchwan commented Jul 18, 2022 •

edited

Loading

Pytal commented Aug 25, 2022 •

edited

Loading