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(core): enhanced contrast when UserMenuItem is focused #42643

Merged

Conversation

emoral435
Copy link
Contributor

Summary

Makes the focus and active state of the user-menu for the chosen view have better contrast

🖼️ Screenshots

🏚️ Before 🏡 After
firefox_KMsTYveI03 firefox_NRbRmYvb39

Checklist

Copy link
Contributor

@ShGKme ShGKme left a comment

Choose a reason for hiding this comment

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

The problem here is that we have a conflict between .active and :focus-visible styles.

This solution fixes it by manually defining .active:focus-visible styles. But it is more risky as we need to manually manage consistency between all 3 cases. For example, icon is not light on dark mode now:

As alternative, we can disable active styles from focus visible by adding :not(:focus-visible) selector on active styles (on both a and img. For some reason it's 2 blocks, but we can do it in 1)

Then we won't need to duplicate styles and can be sure that they are the same.

image

@emoral435
Copy link
Contributor Author

@ShGKme your suggestion worked perfectly :) thank you! This is the proposed changes outcome:

firefox_rYQCZhzvcR

@emoral435 emoral435 force-pushed the fix/core/42565/focus-for-user-menu-is-not-accessible branch from de1747a to d0d5013 Compare January 9, 2024 14:18
@emoral435 emoral435 requested a review from ShGKme January 9, 2024 14:18
@emoral435
Copy link
Contributor Author

/backport to stable28

@emoral435 emoral435 merged commit 537ae25 into master Jan 9, 2024
41 checks passed
@emoral435 emoral435 deleted the fix/core/42565/focus-for-user-menu-is-not-accessible branch January 9, 2024 14:54
@backportbot-nextcloud
Copy link

The backport to stable28 failed. Please do this backport manually.

# Switch to the target branch and update it
git checkout stable28
git pull origin stable28

# Create the new backport branch
git checkout -b fix/foo-stable28

# Cherry pick the change from the commit sha1 of the change against the default branch
# This might cause conflicts. Resolve them.
git cherry-pick abc123

# Push the cherry pick commit to the remote repository and open a pull request
git push origin fix/foo-stable28

Error: Unknown error

More info at https://docs.nextcloud.com/server/latest/developer_manual/getting_started/development_process.html#manual-backport

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Focus for user-menu nav is not accessible
3 participants