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

Add :focus-visible style to buttons #31799

Merged
merged 2 commits into from
Aug 12, 2024
Merged

Conversation

silverwind
Copy link
Member

@silverwind silverwind commented Aug 7, 2024

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

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
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 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
* 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
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 <me@silverwind.io>
@silverwind silverwind deleted the focus-visible branch August 12, 2024 08:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
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
Development

Successfully merging this pull request may close these issues.

4 participants