Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

enh(a11y): Update folder design to fix contrast issues #2255

Merged
merged 2 commits into from
Jan 22, 2024
Merged

enh(a11y): Update folder design to fix contrast issues #2255

merged 2 commits into from
Jan 22, 2024

Conversation

Pytal
Copy link
Member

@Pytal Pytal commented Jan 17, 2024 •
edited
Loading

Summary

  • Update folder component to match album component design
  • Make page mobile-friendly at 320px
  • Test with NVDA
Before After
image image
image image
Albums
image

@Pytal Pytal added 3. to review Waiting for reviews accessibility labels Jan 17, 2024
@Pytal Pytal added this to the Nextcloud 29 milestone Jan 17, 2024
@Pytal Pytal requested review from szaimen and nimishavijay January 17, 2024 01:22
@Pytal Pytal self-assigned this Jan 17, 2024
@Pytal
Copy link
Member Author

Pytal commented Jan 17, 2024

Not sure about design, any suggestions @szaimen @nimishavijay?

@nimishavijay
Copy link
Member

Hmm, not too sure about this either. What do you think about making it similar to the design of albums? Some changes will be needed to differentiate it from albums, such as a smaller thumbnail and a folder icon before the title. What do you think?

@Pytal Pytal force-pushed the fix/a11y/folder-contrast branch 3 times, most recently from a8bbe8f to 47299e9 Compare January 18, 2024 00:31
@Pytal Pytal changed the title fix(a11y): Photos folder icon and text contrast enh(a11y): Update folder design to fix contrast issues Jan 18, 2024
@Pytal
Copy link
Member Author

Pytal commented Jan 18, 2024

/compile /

@Pytal
Copy link
Member Author

Pytal commented Jan 18, 2024

Some changes will be needed to differentiate it from albums, such as a smaller thumbnail and a folder icon before the title. What do you think?

Made it the same size as albums with 350x350px thumbnails to be consistent, but open to a smaller size suggestion if you'd think it'd be better design-wise @nimishavijay?

@nimishavijay
Copy link
Member

Nice, already looks better! Not a blocker, but I would indeed suggest a smaller size, so that the focus is more on the name of the folder. How about 200px? :)

artonge
artonge approved these changes Jan 18, 2024
View reviewed changes
Copy link
Collaborator

@artonge artonge left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How does it look when folder and images are mixed together?

@Pytal Pytal force-pushed the fix/a11y/folder-contrast branch from 4f8e2ef to 4f016e4 Compare January 18, 2024 17:45
@Pytal
Copy link
Member Author

Pytal commented Jan 18, 2024

How does it look when folder and images are mixed together?

Less noticeable now with 200px thumbnails but basically just scales it up slightly from the file-only grid

image

@Pytal
Copy link
Member Author

Pytal commented Jan 18, 2024

/compile /

JuliaKirschenheuter
JuliaKirschenheuter approved these changes Jan 22, 2024
View reviewed changes
Copy link
Contributor

@JuliaKirschenheuter JuliaKirschenheuter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works and looks great 😊

@Pytal Pytal force-pushed the fix/a11y/folder-contrast branch from bfaa474 to 0d8720b Compare January 22, 2024 19:24
@Pytal
Copy link
Member Author

Pytal commented Jan 22, 2024

/compile /

@Pytal
Copy link
Member Author

Pytal commented Jan 22, 2024 •
edited
Loading

/backport 0dc150b to stable28

@backportbot backportbot bot added the backport-request Pending backport by the backport-bot label Jan 22, 2024
@Pytal Pytal force-pushed the fix/a11y/folder-contrast branch from 90bbbe4 to 0dc150b Compare January 22, 2024 20:34
@Pytal
Copy link
Member Author

Pytal commented Jan 22, 2024

/compile /

@nextcloud-command
chore(assets): Recompile assets
87100f3 
Signed-off-by: nextcloud-command <[email protected]>
@Pytal Pytal enabled auto-merge January 22, 2024 20:43
@Pytal Pytal merged commit a6b07ac into master Jan 22, 2024
24 checks passed
@Pytal Pytal deleted the fix/a11y/folder-contrast branch January 22, 2024 22:28
@backportbot backportbot bot mentioned this pull request Jan 22, 2024
Merged
1 task
@backportbot backportbot bot removed the backport-request Pending backport by the backport-bot label Jan 22, 2024
@blizzz blizzz mentioned this pull request Mar 5, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@artonge artonge artonge approved these changes

@JuliaKirschenheuter JuliaKirschenheuter JuliaKirschenheuter approved these changes

@szaimen szaimen Awaiting requested review from szaimen

@nimishavijay nimishavijay Awaiting requested review from nimishavijay

@susnux susnux Awaiting requested review from susnux

Assignees

@Pytal Pytal

Labels
3. to review Waiting for reviews accessibility
Projects
None yet
Milestone
Nextcloud 29
Development

Successfully merging this pull request may close these issues.

[BITV]: Contrast of a title is not enough
5 participants
@Pytal @nimishavijay @JuliaKirschenheuter @artonge @nextcloud-command