peezy-tech/jojo
2
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2026-05-12 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

[v15.0/forgejo] Preserve focus on star/unstar & watch/unwatch buttons after click (#12033)

Browse source 
**Backport:** https://codeberg.org/forgejo/forgejo/pulls/11932

Fixes https://codeberg.org/forgejo/forgejo/issues/11880.

Adding `hx-on::after-settle="this.querySelector('button').focus()"` restores focus after the content has been swapped and the DOM has been setled. I tried `hx-on::after-swap` first since it's mentioned more often in https://github.com/bigskysoftware/htmx/issues/1869, but it didn't work.

The demo attached in `focus.mp4` runs through a series of repeated clicks on both buttons. You can hear the screen reader announce the button's new label when focus is restored.

### Documentation

- [ ] I created a pull request [to the documentation](https://codeberg.org/forgejo/docs) to explain to Forgejo users how to use this change.
- [ ] I did not document these changes and I do not expect someone else to do it.

### Release notes

- [x] This change will be noticed by a Forgejo user or admin (feature, bug fix, performance, etc.). I suggest to include a release note for this change.
- [ ] This change is not visible to a Forgejo user or admin (refactor, dependency upgrade, etc.). I think there is no need to add a release note for this change.

*The decision if the pull request will be shown in the release notes is up to the mergers / release team.*

The content of the `release-notes/<pull request number>.md` file will serve as the basis for the release notes. If the file does not exist, the title of the pull request will be used instead.

<!--start release-notes-assistant-->

## Release notes
<!--URL:https://codeberg.org/forgejo/forgejo-->
- Bug fixes
  - [PR](https://codeberg.org/forgejo/forgejo/pulls/12033): <!--number 12033 --><!--line 0 --><!--description UHJlc2VydmUgZm9jdXMgb24gc3Rhci91bnN0YXIgJiB3YXRjaC91bndhdGNoIGJ1dHRvbnMgYWZ0ZXIgY2xpY2s=-->Preserve focus on star/unstar & watch/unwatch buttons after click<!--description-->
<!--end release-notes-assistant-->

Co-authored-by: Henry Catalini Smith <henry@catalinismith.se>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/12033
Reviewed-by: Mathieu Fenniak <mfenniak@noreply.codeberg.org>
Co-authored-by: forgejo-backport-action <forgejo-backport-action@noreply.codeberg.org>
Co-committed-by: forgejo-backport-action <forgejo-backport-action@noreply.codeberg.org>
This commit is contained in:
forgejo-backport-action 2026-04-08 21:47:06 +02:00 • committed by Mathieu Fenniak
parent d76d6f24ce
commit 085d449bc5
3 changed files with 16 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
templates/repo/star_unstar.tmpl
View file

@ -1,4 +1,4 @@
<form hx-boost="true" hx-target="this" method="post" action="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star">
<form hx-boost="true" hx-target="this" method="post" action="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star" hx-on::after-settle="this.querySelector('button').focus()">
<div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.star_guest_user"}}"{{end}}>
<button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}} aria-label="{{if $.IsStaringRepo}}{{ctx.Locale.Tr "repo.unstar"}}{{else}}{{ctx.Locale.Tr "repo.star"}}{{end}}">
{{if $.IsStaringRepo}}

2
templates/repo/watch_unwatch.tmpl
View file

@ -1,4 +1,4 @@
<form hx-boost="true" hx-target="this" method="post" action="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch">
<form hx-boost="true" hx-target="this" method="post" action="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch" hx-on::after-settle="this.querySelector('button').focus()">
<div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.watch_guest_user"}}"{{end}}>
<button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}} aria-label="{{if $.IsWatchingRepo}}{{ctx.Locale.Tr "repo.unwatch"}}{{else}}{{ctx.Locale.Tr "repo.watch"}}{{end}}">
{{if $.IsWatchingRepo}}