From 6c354546547cd3a9595a7db119a6480d9cd506a7 Mon Sep 17 00:00:00 2001
From: Andre Polykanine <ap@oire.me>
Date: Thu, 23 Feb 2023 03:24:24 +0100
Subject: [PATCH] Improve accessibility for issue comments (#22612)
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: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: John Olheiser <john.olheiser@gmail.com>
---
templates/repo/issue/view_content.tmpl | 6 +++---
templates/repo/issue/view_content/comments.tmpl | 6 +++---
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}}