Nulo/forgejo
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Improve accessibility for issue comments (#22612) (#23083)

Browse source 
Backport #22612

### Preamble

Gitea is an extremely great and smart solution perfectly suitable for
smaller systems and self-hosted Git-powered setups. However, there is a
group of people who have indredible difficulties in using Gitea,
rendering it useless in many cases. Those people are blind developers
using [screen readers](https://en.wikipedia.org/wiki/Screen_reader).
Unfortunately, the frontend framework is super convoluted, and Go
templates don’t allow accessibility improvements in a straightforward
way. As a blind developer myself, I'm trying to start fixing smaller
accessibility quirks with intention to go deeper and eventually, alone
or not, make Gitea at least mostly accessible for screen reader users.

### What This Fix Does

My blind fellows and me navigate webpages not very similarly to how a
sighted person does it. For instance, we love semantic HTML markup like
headings, lists, tables etc. because our screen readers allow us to jump
by those landmarks with a single keypress.
Currently in Gitea issue comments are not marked up with headings. I'm
trying to fix this by adding an appropriate
[ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) role for
comment header and also by enclosing the comment itself in a semantical
article element.

Co-authored-by: Andre Polykanine <ap@oire.me>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: John Olheiser <john.olheiser@gmail.com>
This commit is contained in:
Yarden Shoham 2023-02-23 10:32:15 +02:00 committed by GitHub
parent 75eaf99076
commit 0ac3be1482
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
templates/repo/issue/view_content.tmpl
View file

@ -27,7 +27,7 @@
</a>
{{end}}
<div class="content comment-container">
<div class="ui top attached header comment-header gt-df gt-ac gt-sb">
<div class="ui top attached header comment-header gt-df gt-ac gt-sb" role="heading" aria-level="3">
<div class="comment-header-left gt-df gt-ac">
{{if .Issue.OriginalAuthor}}
<span class="text black gt-bold">
@ -69,7 +69,7 @@
{{end}}
</div>
</div>
<div class="ui attached segment comment-body">
<div class="ui attached segment comment-body" role="article">
<div class="render-content markup" {{if or $.Permission.IsAdmin $.HasIssuesOrPullsWritePermission $.IsIssuePoster}}data-can-edit="true"{{end}}>
{{if .Issue.RenderedContent}}
{{.Issue.RenderedContent|Str2html}}
@ -85,7 +85,7 @@
</div>
{{$reactions := .Issue.Reactions.GroupByType}}
{{if $reactions}}
<div class="ui attached segment reactions">
<div class="ui attached segment reactions" role="note">
{{template "repo/issue/view_content/reactions" Dict "ctx" $ "ActionURL" (Printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index) "Reactions" $reactions}}
</div>
{{end}}

6
templates/repo/issue/view_content/comments.tmpl
View file

@ -22,7 +22,7 @@
</a>
{{end}}
<div class="content comment-container">
<div class="ui top attached header comment-header gt-df gt-ac gt-sb">
<div class="ui top attached header comment-header gt-df gt-ac gt-sb" role="heading" aria-level="3">
<div class="comment-header-left gt-df gt-ac">
{{if .OriginalAuthor}}
<span class="text black gt-bold gt-mr-2">
@ -69,7 +69,7 @@
{{end}}
</div>
</div>
<div class="ui attached segment comment-body">
<div class="ui attached segment comment-body" role="article">
<div class="render-content markup" {{if or $.Permission.IsAdmin $.HasIssuesOrPullsWritePermission (and $.IsSigned (eq $.SignedUserID .PosterID))}}data-can-edit="true"{{end}}>
{{if .RenderedContent}}
{{.RenderedContent|Str2html}}
@ -85,7 +85,7 @@
</div>
{{$reactions := .Reactions.GroupByType}}
{{if $reactions}}
<div class="ui attached segment reactions">
<div class="ui attached segment reactions" role="note">
{{template "repo/issue/view_content/reactions" Dict "ctx" $ "ActionURL" (Printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
</div>
{{end}}