Fix various accessibility issues by CarlSchwan · Pull Request #33259 · nextcloud/server

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

jancborchardt

Looks good now! :)

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:10px10px;
&::v-deep button:disabled {
 cursor: default;
	}
	.property {
 display: grid;
 align-items: center;
 textarea {
 resize: vertical;
 grid-area:1/1;
 width:100%;
 margin:3px3px3px0;
 padding:7px6px;
 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:3px3px3px0;
 padding:7px6px;
 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:02px;
 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 <carl@carlschwan.eu>

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>

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

- 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 <carl@carlschwan.eu>

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

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 a team and Pytal July 18, 2022 11:35

CarlSchwan self-assigned this Jul 18, 2022

CarlSchwan requested review from artonge, jancborchardt and skjnldsv and removed request for a teamJuly 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 65acfd5Compare 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

Comment threadapps/user_ldap/lib/Group_LDAP.php.rej Outdated

jancborchardt approved these changes Jul 27, 2022
View reviewed changes

jancborchardt reviewed Jul 28, 2022
View reviewed changes

Comment threadcore/css/inputs.scss

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 cb64d90Compare 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 3593cf1Compare 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 d2d9ddbCompare August 25, 2022 17:13

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

CarlSchwan force-pushed the fix/carl/accessibility-input-fields branch 2 times, most recently from e6612a0 to 8446bb0Compare 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 <carl@carlschwan.eu>

Adapt to new Nextcloud vue style
f630bd2
Signed-off-by: Carl Schwan <carl@carlschwan.eu>

More dark theme fixes
1d35a53
Signed-off-by: Carl Schwan <carl@carlschwan.eu>

Fix rebasing issues and improve profile settings page a bit more
f1ce2c2
Signed-off-by: Carl Schwan <carl@carlschwan.eu>

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

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

skjnldsv merged commit eb8ac0b into masterAug 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

Uh oh!

Uh oh!

Conversation

CarlSchwan commented Jul 18, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jancborchardt left a comment

Choose a reason for hiding this comment

Uh oh!

CarlSchwan commented Jul 27, 2022

Uh oh!

PVince81 commented Jul 27, 2022

Uh oh!

Pytal left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jancborchardt left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

CarlSchwan commented Jul 28, 2022

Uh oh!

PVince81 commented Aug 10, 2022

Uh oh!

CarlSchwan commented Aug 11, 2022

Uh oh!

PVince81 commented Aug 25, 2022

Uh oh!

Pytal commented Aug 25, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CarlSchwan commented Aug 26, 2022

Uh oh!

nickvergessen commented Aug 26, 2022

Uh oh!

miaulalala left a comment

Choose a reason for hiding this comment

Uh oh!

skjnldsv left a comment

Choose a reason for hiding this comment

Uh oh!

PVince81 left a comment

Choose a reason for hiding this comment

Uh oh!

This comment was marked as resolved.

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

CarlSchwan commented Jul 18, 2022•
edited
Loading

Pytal commented Aug 25, 2022•
edited
Loading