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

Add :focus-visible style to buttons #31799

Merged
merged 2 commits into from
Aug 12, 2024
Merged

Add :focus-visible style to buttons #31799

merged 2 commits into from
Aug 12, 2024

Conversation

silverwind
Copy link
Member

@silverwind silverwind commented Aug 7, 2024 •
edited
Loading

Buttons now show a focus style via :focus-visible when the browser deems the focus to be important, like for example when the button is focused via keyboard navigation.

Screenshot 2024-08-07 at 22 12 51 image

@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Aug 7, 2024
@pull-request-size pull-request-size bot added the size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. label Aug 7, 2024
@silverwind silverwind added backport/v1.22 This PR should be backported to Gitea 1.22 topic/accessibility This issue/pull request wants to improve the accessibility type/enhancement An improvement of existing functionality labels Aug 7, 2024
@silverwind
Copy link
Member Author

silverwind commented Aug 7, 2024 •
edited
Loading

Could maybe change the selector from .ui.button to button, but I don't think there are many buttons in the UI that don't have that class.

I just tested a button that does not have .ui.button and those show the browser's default focusring, so no need to extend the selector to those:

Screenshot 2024-08-07 at 22 21 33

@silverwind silverwind added the topic/ui Change the appearance of the Gitea UI label Aug 9, 2024
@GiteaBot GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Aug 11, 2024
@GiteaBot GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Aug 12, 2024
@lunny lunny added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. and removed lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. labels Aug 12, 2024
@lunny lunny enabled auto-merge (squash) August 12, 2024 00:34
@GiteaBot GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Aug 12, 2024
@lunny lunny merged commit 63c5ac6 into go-gitea:main Aug 12, 2024
26 checks passed
@GiteaBot GiteaBot added this to the 1.23.0 milestone Aug 12, 2024
GiteaBot pushed a commit to GiteaBot/gitea that referenced this pull request Aug 12, 2024
@silverwind @GiteaBot
Add :focus-visible style to buttons (go-gitea#31799)
34b4c77 
Buttons now show a focus style via
[`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)
when the browser deems the focus to be important, like for example when
the button is focused via keyboard navigation.

<img width="492" alt="Screenshot 2024-08-07 at 22 12 51"
src="https://github.com/user-attachments/assets/060568b1-1599-4c56-bafb-b36ebb1bec35">
<img width="479" alt="image"
src="https://github.com/user-attachments/assets/885f4e10-f496-47f0-8ae5-45827ded09f8">
@GiteaBot GiteaBot mentioned this pull request Aug 12, 2024
Merged
@GiteaBot GiteaBot added backport/done All backports for this PR have been created and removed reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. labels Aug 12, 2024
zjjhot added a commit to zjjhot/gitea that referenced this pull request Aug 12, 2024
@zjjhot
Merge remote-tracking branch 'giteaofficial/main'
6e13951 
* giteaofficial/main:
  Add `:focus-visible` style to buttons (go-gitea#31799)
  [skip ci] Updated licenses and gitignores
lunny pushed a commit that referenced this pull request Aug 12, 2024
@GiteaBot @silverwind
Add :focus-visible style to buttons (#31799) (#31819)
f6f2349 
Backport #31799 by @silverwind

Buttons now show a focus style via
[`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)
when the browser deems the focus to be important, like for example when
the button is focused via keyboard navigation.

<img width="492" alt="Screenshot 2024-08-07 at 22 12 51"
src="https://github.com/user-attachments/assets/060568b1-1599-4c56-bafb-b36ebb1bec35">
<img width="479" alt="image"
src="https://github.com/user-attachments/assets/885f4e10-f496-47f0-8ae5-45827ded09f8">

Co-authored-by: silverwind <[email protected]>
@silverwind silverwind deleted the focus-visible branch August 12, 2024 08:10
@go-gitea go-gitea locked as resolved and limited conversation to collaborators Nov 10, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@lunny lunny lunny approved these changes

@denyskon denyskon denyskon approved these changes

Assignees
No one assigned
Labels
backport/done All backports for this PR have been created backport/v1.22 This PR should be backported to Gitea 1.22 lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. topic/accessibility This issue/pull request wants to improve the accessibility topic/ui Change the appearance of the Gitea UI type/enhancement An improvement of existing functionality
Projects
None yet
Milestone
1.23.0
Development

Successfully merging this pull request may close these issues.
4 participants
@silverwind @lunny @denyskon @GiteaBot