Title edit buttons aren't keyboard focusable #8979

Closed
opened 2025-11-02 08:24:42 -06:00 by GiteaMirror · 3 comments
Owner

Originally created by @maxstarkenburg on GitHub (May 20, 2022).

Description

When trying to edit an issue or PR title, or cancel/save said edit, the "buttons" (Edit/Cancel/Save) don't receive keyboard focus, so I can't tab to them to complete the action. For me personally this is more of an inconvenience issue (I prefer keyboard shortcuts for a lot of web interactions), but for others it's an accessibility barrier.

This seems to be because these "buttons" are really just divs with click and keypress events, but without tabindex="0", which makes those keypress events rather useless. Though a more robust solution a11y-wise would be to simply make them real <button>s.

The scope of keyboard navigability issues might actually be much larger than this. For example, in the demo site, I'm also seeing things like:

  • Tab/keyboard trapping in the editor (or at least Esc doesn't work, as seen on other WYSIWYGs)
  • A button-ish div with tabindex="6" if not others like that (generally bad practice a11y-wise to set values specifically if you have to use tabindex, as opposed to just tabindex="0" which will just follow DOM order, unless maybe one is doing odd things with DOM order, but then maybe that's a whole other issue)
  • Focus sometimes getting completely lost/misdirected when tabbing through the right sidebar (harder for me to characterize, but maybe happens when tabbing "too fast"?)
  • I think the file-upload feature also isn't reachable.

But I figured I'd at least start of this/my first issue with a concrete limited-scope issue I genuinely came across today (dunno how Gitea might prefer to handle broader multi-part issues like started in my bulleted list).

Screenshots

https://user-images.githubusercontent.com/3514521/169579923-ef117b45-a5e2-49a3-80f0-24fedfd51647.mov

Gitea Version

1.15.0

Can you reproduce the bug on the Gitea demo site?

Yes

Operating System

Mac OS 12.3.1

Browser Version

Firefox 100.0

Originally created by @maxstarkenburg on GitHub (May 20, 2022). ### Description When trying to edit an issue or PR title, or cancel/save said edit, the "buttons" (Edit/Cancel/Save) don't receive keyboard focus, so I can't tab to them to complete the action. For me personally this is more of an inconvenience issue (I prefer keyboard shortcuts for a lot of web interactions), but for others it's an accessibility barrier. This seems to be because these "buttons" are really just divs with click and keypress events, but without `tabindex="0"`, which makes those keypress events rather useless. Though a more robust solution a11y-wise would be to simply make them real `<button>`s. The scope of keyboard navigability issues might actually be much larger than this. For example, in the demo site, I'm also seeing things like: * Tab/keyboard trapping in the editor (or at least `Esc` doesn't work, as seen on other WYSIWYGs) * A button-ish div with `tabindex="6"` if not others like that (generally bad practice a11y-wise to set values specifically if you have to use tabindex, as opposed to just `tabindex="0"` which will just follow DOM order, unless maybe one is doing odd things with DOM order, but then maybe that's a whole other issue) * Focus sometimes getting completely lost/misdirected when tabbing through the right sidebar (harder for me to characterize, but maybe happens when tabbing "too fast"?) * I think the file-upload feature also isn't reachable. But I figured I'd at least start of this/my first issue with a concrete limited-scope issue I genuinely came across today (dunno how Gitea might prefer to handle broader multi-part issues like started in my bulleted list). ### Screenshots https://user-images.githubusercontent.com/3514521/169579923-ef117b45-a5e2-49a3-80f0-24fedfd51647.mov ### Gitea Version 1.15.0 ### Can you reproduce the bug on the Gitea demo site? Yes ### Operating System Mac OS 12.3.1 ### Browser Version Firefox 100.0
GiteaMirror added the topic/uitype/bug labels 2025-11-02 08:24:42 -06:00
Author
Owner

@Jookia commented on GitHub (May 29, 2022):

Related is #7057

@Jookia commented on GitHub (May 29, 2022): Related is #7057
Author
Owner

@Ryuno-Ki commented on GitHub (Jun 8, 2022):

Confirmed. Thanks for reporting.

Your suspicion was right:

8fee7c46c1/templates/repo/issue/view_title.tmpl (L17-L18)

A fix should also look into :focus styling.

Perhaps worth to split this issue into multiple.

@Ryuno-Ki commented on GitHub (Jun 8, 2022): Confirmed. Thanks for reporting. Your suspicion was right: https://github.com/go-gitea/gitea/blob/8fee7c46c16cbc1b46477cf600160f9668b9f5d0/templates/repo/issue/view_title.tmpl#L17-L18 A fix should also look into `:focus` styling. Perhaps worth to split this issue into multiple.
Author
Owner

@Ryuno-Ki commented on GitHub (Jun 8, 2022):

I wrote a PR that adds the bare minimum for now and will need some conversation to understand other accessibility regressions here better.

Thank you for taking the time to report these.

@Ryuno-Ki commented on GitHub (Jun 8, 2022): I wrote a PR that adds the bare minimum for now and will need some conversation to understand other accessibility regressions here better. Thank you for taking the time to report these.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/gitea#8979