aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorYarden Shoham <hrsi88@gmail.com>2023-02-23 10:32:15 +0200
committerGitHub <noreply@github.com>2023-02-23 16:32:15 +0800
commit0ac3be14829125f0c12be4e69195e6cb095353f4 (patch)
tree19a8658269bf5b94810b521a15cc4b7973e0dbe3
parent75eaf9907604b1689e491b4fb4354b2d0b9ac3b6 (diff)
downloadgitea-0ac3be14829125f0c12be4e69195e6cb095353f4.tar.gz
gitea-0ac3be14829125f0c12be4e69195e6cb095353f4.zip
Improve accessibility for issue comments (#22612) (#23083)
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>
-rw-r--r--templates/repo/issue/view_content.tmpl6
-rw-r--r--templates/repo/issue/view_content/comments.tmpl6
2 files changed, 6 insertions, 6 deletions
diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index 887dd2c42d..08ba509045 100644
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -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}}
diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index 8894a7ffd2..94b46bd9f1 100644
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -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}}