Redesign guest pages for better accessibility #33265

CarlSchwan · 2022-07-18T15:59:35Z

Screenshots:

TODO:

Adapt installer to use the same style
Adapt updater to use the same style
Adapt 2fa pages to use the same style
Find other page using this style and adapt them

jancborchardt · 2022-07-18T16:09:37Z

Looks great! :) 2 things:

For the first screenshot, "Access forbidden" should be marked up as a heading, right?
These are all wide boxes, do you have a screenshot of the login view (with the username & password boxes) as well?

github-actions · 2022-07-18T16:25:05Z

Possible performance regression detected

Show Output

1 queries added

= /remote.php/dav/files/test
≠ /remote.php/dav/files/test/test.txt with 1 queries added
  + UPDATE "oc_preferences" SET "configvalue" = :dcValue1 WHERE ("userid" = :dcValue2) AND ("appid" = :dcValue3) AND ("configkey" = :dcValue4)
≠ /remote.php/dav/files/test/many_files with 1 queries removed
  - UPDATE "oc_preferences" SET "configvalue" = :dcValue1 WHERE ("userid" = :dcValue2) AND ("appid" = :dcValue3) AND ("configkey" = :dcValue4)
= /remote.php/dav/files/test/new_file.txt
≠ /remote.php/dav/files/test/new_file.txt with 1 queries added
  + UPDATE "oc_preferences" SET "configvalue" = :dcValue1 WHERE ("userid" = :dcValue2) AND ("appid" = :dcValue3) AND ("configkey" = :dcValue4)

CarlSchwan · 2022-07-19T06:34:42Z

For the first screenshot, "Access forbidden" should be marked up as a heading, right?

Right this was a preexisting issue, fixed now ;)

These are all wide boxes, do you have a screenshot of the login view (with the username & password boxes) as well?

I updated all the box to not be wide anymore by default unless specified otherwise like on the exception page. Screenshots of the new states are updated

jancborchardt

Very nice, looks so good now! :) Only 2 things:

There is focus feedback on the username/password input field, but they don’t have a default border. Either using the component, or border: 2px solid var(--color-border) would look nice.
From the screenshots, all the scenarios except the internal server error look better with the narrow style – so I’d say let’s change the "Connect to your account" and "Account access" to narrow style. :)

nimishavijay

All the screenshots look great! :)
Not sure if this is relevant to this PR but we should change everything that was full opacity black #000000 to --color-main-text, it's especially visible in the screenshot with the app icons.

core/src/components/setup/RecommendedApps.vue

nickvergessen · 2022-07-20T15:43:43Z

core/src/components/setup/RecommendedApps.vue

 		</p>
 		<p v-else-if="loadingAppsError" class="loading-error text-center">
 			{{ t('core', 'Could not fetch list of apps from the App Store.') }}
 		</p>
 		<p v-else-if="installingApps" class="text-center">
-			{{ t('core', 'Installing apps …') }}
+			{{ t('core', 'Installing apps…') }}


Since it's not shortcutting the word "apps" the space is required

reverted, but this feels weird. Is this convention documented somewhere?

@rakekniven @jancborchardt anyone has a link?

core/src/components/setup/RecommendedApps.vue

core/src/views/Login.vue

core/templates/layout.guest.php

core/templates/layout.public.php

core/templates/loginflowv2/authpicker.php

lib/private/TemplateLayout.php

core/css/guest.css

core/src/components/login/LoginButton.vue

core/src/components/setup/RecommendedApps.vue

core/src/views/Login.vue

core/src/components/setup/RecommendedApps.vue

AndyScherzinger · 2022-07-25T17:28:03Z

@jancborchardt looking at the screenshot

shouldn't "Cancel" rather be "Skip" ?

CarlSchwan · 2022-07-25T17:31:11Z

@jancborchardt looking at the screenshot

shouldn't "Cancel" rather be "Skip" ?

It should, good catch

AndyScherzinger · 2022-07-25T17:37:35Z

Thanks for caring and for taking care @CarlSchwan 💙

CarlSchwan · 2022-07-26T08:04:00Z

Thanks for caring and for taking care @CarlSchwan blue_heart

Fixed :)

I would say this is good to go now. There might be some apps that need to be adapted after this change but I for the moment checked most of them and everything seems to still work fine

core/src/components/setup/RecommendedApps.vue

nickvergessen · 2022-07-26T08:14:14Z

It should, good catch

forgot to push? Or Push failed?

CarlSchwan · 2022-07-26T08:38:11Z

It should, good catch

forgot to push? Or Push failed?

forgot to push :(

core/templates/loginflow/authpicker.php

- Use white box and put content on it - Improve focus indicator Signed-off-by: Carl Schwan <[email protected]>

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

jancborchardt · 2022-07-27T21:25:09Z

@CarlSchwan this looks so damn cool, and is much more accessible on top of it. Great work! ✨

nextcloud/server#33265 changed <input> to <button>. Signed-off-by: Daniel Kesselberg <[email protected]>

CarlSchwan added the 2. developing Work in progress label Jul 18, 2022

CarlSchwan requested a review from jancborchardt July 18, 2022 15:59

CarlSchwan self-assigned this Jul 18, 2022

CarlSchwan marked this pull request as draft July 18, 2022 15:59

CarlSchwan mentioned this pull request Jul 18, 2022

Fix inaccessible login button focus styles #33272

Closed

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

jancborchardt requested changes Jul 19, 2022

View reviewed changes

jancborchardt requested review from marcoambrosini and nimishavijay July 19, 2022 09:25

CarlSchwan added the feature: accessibility label Jul 19, 2022

nimishavijay approved these changes Jul 20, 2022

View reviewed changes

CarlSchwan mentioned this pull request Jul 20, 2022

Port to NC 25 nextcloud/registration#439

Merged

1 task

nickvergessen requested changes Jul 20, 2022

View reviewed changes

Pytal reviewed Jul 20, 2022

View reviewed changes

core/css/guest.css Outdated Show resolved Hide resolved

CarlSchwan force-pushed the fix/carl/login-boxes branch from a9f5654 to bf0cd74 Compare July 21, 2022 06:27

CarlSchwan changed the title ~~Redesign login boxes for better accessibility~~ Redesign guest pages for better accessibility Jul 22, 2022

CarlSchwan force-pushed the fix/carl/login-boxes branch from 9ec514d to 53e4007 Compare July 22, 2022 10:44

CarlSchwan marked this pull request as ready for review July 22, 2022 10:44

This was referenced Jul 22, 2022

Adapte guest page to NC 25 nextcloud/spreed#7626

Merged

Check video verification after server public page change nextcloud/spreed#7628

Closed

nickvergessen requested changes Jul 22, 2022

View reviewed changes

nickvergessen reviewed Jul 22, 2022

View reviewed changes

core/src/views/Login.vue Show resolved Hide resolved

CarlSchwan force-pushed the fix/carl/login-boxes branch 2 times, most recently from 6ded9bc to 464355a Compare July 25, 2022 07:28

nickvergessen reviewed Jul 25, 2022

View reviewed changes

core/src/components/setup/RecommendedApps.vue Outdated Show resolved Hide resolved

CarlSchwan force-pushed the fix/carl/login-boxes branch 2 times, most recently from 39bd890 to 3d4d8e2 Compare July 25, 2022 07:52

CarlSchwan force-pushed the fix/carl/login-boxes branch from 3d4d8e2 to 5d7d651 Compare July 25, 2022 08:58

CarlSchwan requested a review from nickvergessen July 26, 2022 08:04

nickvergessen reviewed Jul 26, 2022

View reviewed changes

core/src/components/setup/RecommendedApps.vue Outdated Show resolved Hide resolved

CarlSchwan force-pushed the fix/carl/login-boxes branch from 8e5cc5c to a94b222 Compare July 26, 2022 08:38

nickvergessen approved these changes Jul 26, 2022

View reviewed changes

CarlSchwan force-pushed the fix/carl/login-boxes branch from a94b222 to 84a2dbe Compare July 27, 2022 06:49

nickvergessen reviewed Jul 27, 2022

View reviewed changes

core/templates/loginflow/authpicker.php Outdated Show resolved Hide resolved

CarlSchwan added 2 commits July 27, 2022 10:43

Redesign guest pages for better accessibility

2531182

- Use white box and put content on it - Improve focus indicator Signed-off-by: Carl Schwan <[email protected]>

Fix caldav invitation related public pages

bbfad33

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

CarlSchwan force-pushed the fix/carl/login-boxes branch from b662450 to 9c94c91 Compare July 27, 2022 08:43

CarlSchwan added 4. to release Ready to be released and/or waiting for tests to finish and removed 2. developing Work in progress labels Jul 27, 2022

Fix login flow

3fa6ee3

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

CarlSchwan force-pushed the fix/carl/login-boxes branch from 9c94c91 to 3fa6ee3 Compare July 27, 2022 09:29

CarlSchwan merged commit 791a182 into master Jul 27, 2022

CarlSchwan deleted the fix/carl/login-boxes branch July 27, 2022 10:37

christianlupus mentioned this pull request Jul 29, 2022

Update the template styling for public pages nextcloud/cookbook#1128

Closed

skjnldsv mentioned this pull request Aug 11, 2022

25.0.0 beta 1 #33505

Merged

kesselb added a commit to nextcloud/twofactor_totp that referenced this pull request Sep 20, 2022

Acceptance tests: Update login form submit button selector

534f973

nextcloud/server#33265 changed <input> to <button>. Signed-off-by: Daniel Kesselberg <[email protected]>

ChristophWurst pushed a commit to nextcloud/twofactor_totp that referenced this pull request Oct 12, 2022

Acceptance tests: Update login form submit button selector

e968520

nextcloud/server#33265 changed <input> to <button>. Signed-off-by: Daniel Kesselberg <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Redesign guest pages for better accessibility #33265

Redesign guest pages for better accessibility #33265

CarlSchwan commented Jul 18, 2022 •

edited

Loading

jancborchardt commented Jul 18, 2022

github-actions bot commented Jul 18, 2022

CarlSchwan commented Jul 19, 2022

jancborchardt left a comment •

edited by CarlSchwan

Loading

nimishavijay left a comment

nickvergessen Jul 20, 2022

CarlSchwan Jul 21, 2022

nickvergessen Jul 21, 2022

AndyScherzinger commented Jul 25, 2022

CarlSchwan commented Jul 25, 2022

AndyScherzinger commented Jul 25, 2022

CarlSchwan commented Jul 26, 2022

nickvergessen commented Jul 26, 2022

CarlSchwan commented Jul 26, 2022

jancborchardt commented Jul 27, 2022

Redesign guest pages for better accessibility #33265

Redesign guest pages for better accessibility #33265

Conversation

CarlSchwan commented Jul 18, 2022 • edited Loading

jancborchardt commented Jul 18, 2022

github-actions bot commented Jul 18, 2022

CarlSchwan commented Jul 19, 2022

jancborchardt left a comment • edited by CarlSchwan Loading

Choose a reason for hiding this comment

nimishavijay left a comment

Choose a reason for hiding this comment

nickvergessen Jul 20, 2022

Choose a reason for hiding this comment

CarlSchwan Jul 21, 2022

Choose a reason for hiding this comment

nickvergessen Jul 21, 2022

Choose a reason for hiding this comment

AndyScherzinger commented Jul 25, 2022

CarlSchwan commented Jul 25, 2022

AndyScherzinger commented Jul 25, 2022

CarlSchwan commented Jul 26, 2022

nickvergessen commented Jul 26, 2022

CarlSchwan commented Jul 26, 2022

jancborchardt commented Jul 27, 2022

CarlSchwan commented Jul 18, 2022 •

edited

Loading

jancborchardt left a comment •

edited by CarlSchwan

Loading