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.

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

Fix state of the icons in Toolbar being too hard to see #2090

Closed
wants to merge 3 commits into from

Conversation

verbey
Copy link

@verbey verbey commented Dec 14, 2024

Description

This makes Cinny use filled variants of icons present in the Toolbar. I believe this is important because as of right now they are only highlighted slightly by the background, which does not differ much (see this color comparison) from the background of Toolbar itself and thus makes this an accessibility issue for users with low sight like me.
See the relevant PR for the folds repo:
cinnyapp/folds#60
See how this would look like in Cinny with the filled icons:
https://files.catbox.moe/jf3xep.mp4

Fixes icons in Toolbar not having enough visual hints to highlight their state.

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • [?] I have made corresponding changes to the documentation // Am I supposed to do that for this type of change?
  • My changes generate no new warnings

Copy link

Preview: https://2090--pr-cinny.netlify.app
⚠️ Exercise caution. Use test accounts. ⚠️

@ajbura
Copy link
Member

ajbura commented Dec 14, 2024

preview of change:
image

@ajbura
Copy link
Member

ajbura commented Dec 14, 2024

Hey, thanks for the changes and concern. In color comparison you are actually comparing the two background colors as SurfaceVariant Active color is a background color changing on active state of button and foreground color is OnContainer which is the color of icon and passes accessibility.

To improve the visual priority of a button upon pressing, you need to change its variant to something like Primary, Secondary or Success depending on intension behind priority. Inverting the colors of an IconButton changes it's design principle(Iconbutton can only have Container colors as Main colors are for call-to-action visuals)

@verbey
Copy link
Author

verbey commented Dec 14, 2024

Look, a massive blunder on my side happened. The two commits that were pushed into the PR were actually something I was experimenting with but eventually dropped in favor of adding filled versions of icons. Before creating a PR I did a git pull and managed to somehow revert the actual commit with those previous two that were no good in the course of doing a git merge. I am going to close this one and create a proper PR right away. I am sorry for the mistake, it's very late right now and I didn't have enough sleep.

@verbey verbey closed this Dec 14, 2024
@github-actions github-actions bot locked and limited conversation to collaborators Dec 14, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants