mirror of
https://codeberg.org/forgejo/forgejo
synced 2024-06-26 03:43:04 +02:00
0ac3be1482
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>
241 lines
10 KiB
Handlebars
241 lines
10 KiB
Handlebars
<div class="ui stackable grid">
|
|
{{if .Flash}}
|
|
<div class="sixteen wide column">
|
|
{{template "base/alert" .}}
|
|
</div>
|
|
{{end}}
|
|
{{if not .Issue.IsPull}}
|
|
{{template "repo/issue/view_title" .}}
|
|
{{end}}
|
|
|
|
<!-- I know, there is probably a better way to do this (moved from sidebar.tmpl, original author: 6543 @ 2021-02-28) -->
|
|
<!-- Agree, there should be a better way, eg: introduce window.config.pageData (original author: wxiaoguang @ 2021-09-05) -->
|
|
<input type="hidden" id="repolink" value="{{$.RepoRelPath}}">
|
|
<input type="hidden" id="repoId" value="{{.Repository.ID}}">
|
|
<input type="hidden" id="issueIndex" value="{{.Issue.Index}}"/>
|
|
<input type="hidden" id="type" value="{{.IssueType}}">
|
|
|
|
{{$createdStr:= TimeSinceUnix .Issue.CreatedUnix $.locale}}
|
|
<div class="twelve wide column comment-list prevent-before-timeline">
|
|
<ui class="ui timeline">
|
|
<div id="{{.Issue.HashTag}}" class="timeline-item comment first">
|
|
{{if .Issue.OriginalAuthor}}
|
|
<span class="timeline-avatar"><img src="{{AppSubUrl}}/assets/img/avatar_default.png"></span>
|
|
{{else}}
|
|
<a class="timeline-avatar" {{if gt .Issue.Poster.ID 0}}href="{{.Issue.Poster.HomeLink}}"{{end}}>
|
|
{{avatar $.Context .Issue.Poster}}
|
|
</a>
|
|
{{end}}
|
|
<div class="content comment-container">
|
|
<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">
|
|
{{svg (MigrationIcon .Repository.GetOriginalURLHostname)}}
|
|
{{.Issue.OriginalAuthor}}
|
|
</span>
|
|
<span class="text grey">
|
|
{{.locale.Tr "repo.issues.commented_at" (.Issue.HashTag|Escape) $createdStr | Safe}}
|
|
</span>
|
|
<span class="text migrate">
|
|
{{if .Repository.OriginalURL}} ({{$.locale.Tr "repo.migrated_from" (.Repository.OriginalURL|Escape) (.Repository.GetOriginalURLHostname|Escape) | Safe}}){{end}}
|
|
</span>
|
|
{{else}}
|
|
<a class="inline-timeline-avatar" href="{{.Issue.Poster.HomeLink}}">
|
|
{{avatar $.Context .Issue.Poster}}
|
|
</a>
|
|
<span class="text grey">
|
|
{{template "shared/user/authorlink" .Issue.Poster}}
|
|
{{.locale.Tr "repo.issues.commented_at" (.Issue.HashTag|Escape) $createdStr | Safe}}
|
|
</span>
|
|
{{end}}
|
|
</div>
|
|
<div class="comment-header-right actions gt-df gt-ac">
|
|
{{if gt .Issue.ShowRole 0}}
|
|
{{if (.Issue.ShowRole.HasRole "Writer")}}
|
|
<div class="ui basic label role-label">
|
|
{{$.locale.Tr "repo.issues.collaborator"}}
|
|
</div>
|
|
{{end}}
|
|
{{if (.Issue.ShowRole.HasRole "Owner")}}
|
|
<div class="ui basic label role-label">
|
|
{{$.locale.Tr "repo.issues.owner"}}
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|
|
{{if not $.Repository.IsArchived}}
|
|
{{template "repo/issue/view_content/add_reaction" Dict "ctx" $ "ActionURL" (Printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index)}}
|
|
{{template "repo/issue/view_content/context_menu" Dict "ctx" $ "item" .Issue "delete" false "issue" true "diff" false "IsCommentPoster" $.IsIssuePoster}}
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
<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}}
|
|
{{else}}
|
|
<span class="no-content">{{.locale.Tr "repo.issues.no_content"}}</span>
|
|
{{end}}
|
|
</div>
|
|
<div id="issue-{{.Issue.ID}}-raw" class="raw-content gt-hidden">{{.Issue.Content}}</div>
|
|
<div class="edit-content-zone gt-hidden" data-write="issue-{{.Issue.ID}}-write" data-preview="issue-{{.Issue.ID}}-preview" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/content" data-context="{{.RepoLink}}" data-attachment-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/attachments" data-view-attachment-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/view-attachments"></div>
|
|
{{if .Issue.Attachments}}
|
|
{{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Issue.Attachments "Content" .Issue.RenderedContent}}
|
|
{{end}}
|
|
</div>
|
|
{{$reactions := .Issue.Reactions.GroupByType}}
|
|
{{if $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}}
|
|
</div>
|
|
</div>
|
|
|
|
{{template "repo/issue/view_content/comments" .}}
|
|
|
|
{{if and .Issue.IsPull (not $.Repository.IsArchived)}}
|
|
{{template "repo/issue/view_content/pull".}}
|
|
{{end}}
|
|
{{if .IsSigned}}
|
|
{{if and (or .IsRepoAdmin .HasIssuesOrPullsWritePermission (not .Issue.IsLocked)) (not .Repository.IsArchived)}}
|
|
<div class="timeline-item comment form">
|
|
<a class="timeline-avatar" href="{{.SignedUser.HomeLink}}">
|
|
{{avatar $.Context .SignedUser}}
|
|
</a>
|
|
<div class="content">
|
|
<form class="ui segment form" id="comment-form" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/comments" method="post">
|
|
{{template "repo/issue/comment_tab" .}}
|
|
{{.CsrfTokenHtml}}
|
|
<input id="status" name="status" type="hidden">
|
|
<div class="field footer">
|
|
<div class="text right">
|
|
{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
|
|
{{if .Issue.IsClosed}}
|
|
<div id="status-button" class="ui green basic button" tabindex="6" data-status="{{.locale.Tr "repo.issues.reopen_issue"}}" data-status-and-comment="{{.locale.Tr "repo.issues.reopen_comment_issue"}}" data-status-val="reopen">
|
|
{{.locale.Tr "repo.issues.reopen_issue"}}
|
|
</div>
|
|
{{else}}
|
|
<div id="status-button" class="ui red basic button" tabindex="6" data-status="{{.locale.Tr "repo.issues.close_issue"}}" data-status-and-comment="{{.locale.Tr "repo.issues.close_comment_issue"}}" data-status-val="close">
|
|
{{.locale.Tr "repo.issues.close_issue"}}
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|
|
<button class="ui green button loading-button" tabindex="5">
|
|
{{.locale.Tr "repo.issues.create_comment"}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{{else if .Repository.IsArchived}}
|
|
<div class="ui warning message">
|
|
{{if .Issue.IsPull}}
|
|
{{.locale.Tr "repo.archive.pull.nocomment"}}
|
|
{{else}}
|
|
{{.locale.Tr "repo.archive.issue.nocomment"}}
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
{{else}}
|
|
{{if .Repository.IsArchived}}
|
|
<div class="ui warning message">
|
|
{{if .Issue.IsPull}}
|
|
{{.locale.Tr "repo.archive.pull.nocomment"}}
|
|
{{else}}
|
|
{{.locale.Tr "repo.archive.issue.nocomment"}}
|
|
{{end}}
|
|
</div>
|
|
{{else}}
|
|
{{if .IsSigned}}
|
|
{{if .Repository.IsArchived}}
|
|
<div class="timeline-item comment form">
|
|
<a class="timeline-avatar" href="{{.SignedUser.HomeLink}}">
|
|
{{avatar $.Context .SignedUser}}
|
|
</a>
|
|
<div class="content">
|
|
<form class="ui segment form" id="comment-form" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/comments" method="post">
|
|
{{template "repo/issue/comment_tab" .}}
|
|
{{.CsrfTokenHtml}}
|
|
<input id="status" name="status" type="hidden">
|
|
<div class="field footer">
|
|
<div class="text right">
|
|
{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
|
|
{{if .Issue.IsClosed}}
|
|
<div id="status-button" class="ui green basic button" tabindex="6" data-status="{{.locale.Tr "repo.issues.reopen_issue"}}" data-status-and-comment="{{.locale.Tr "repo.issues.reopen_comment_issue"}}" data-status-val="reopen">
|
|
{{.locale.Tr "repo.issues.reopen_issue"}}
|
|
</div>
|
|
{{else}}
|
|
<div id="status-button" class="ui red basic button" tabindex="6" data-status="{{.locale.Tr "repo.issues.close_issue"}}" data-status-and-comment="{{.locale.Tr "repo.issues.close_comment_issue"}}" data-status-val="close">
|
|
{{.locale.Tr "repo.issues.close_issue"}}
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|
|
<button class="ui green button loading-button" tabindex="5">
|
|
{{.locale.Tr "repo.issues.create_comment"}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
{{else}}
|
|
<div class="ui warning message">
|
|
{{.locale.Tr "repo.issues.sign_in_require_desc" (.SignInLink|Escape) | Safe}}
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|
|
{{end}}
|
|
</ui>
|
|
</div>
|
|
|
|
{{template "repo/issue/view_content/sidebar" .}}
|
|
</div>
|
|
|
|
<div class="gt-hidden" id="edit-content-form">
|
|
<div class="ui comment form">
|
|
<div class="ui top tabular menu">
|
|
<a class="active write item">{{$.locale.Tr "write"}}</a>
|
|
<a class="preview item" data-url="{{$.Repository.Link}}/markdown" data-context="{{$.RepoLink}}">{{$.locale.Tr "preview"}}</a>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui bottom active tab write">
|
|
<textarea tabindex="1" name="content" class="js-quick-submit"></textarea>
|
|
</div>
|
|
<div class="ui bottom tab preview markup">
|
|
{{$.locale.Tr "loading"}}
|
|
</div>
|
|
</div>
|
|
{{if .IsAttachmentEnabled}}
|
|
<div class="field">
|
|
{{template "repo/upload" .}}
|
|
</div>
|
|
{{end}}
|
|
<div class="field footer">
|
|
<div class="text right edit">
|
|
<div class="ui basic secondary cancel button" tabindex="3">{{.locale.Tr "repo.issues.cancel"}}</div>
|
|
<div class="ui primary save button" tabindex="2">{{.locale.Tr "repo.issues.save"}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{template "repo/issue/view_content/reference_issue_dialog" .}}
|
|
|
|
<div class="gt-hidden" id="no-content">
|
|
<span class="no-content">{{.locale.Tr "repo.issues.no_content"}}</span>
|
|
</div>
|
|
|
|
<div class="ui small basic delete modal">
|
|
<div class="ui icon header">
|
|
{{svg "octicon-trash"}}
|
|
{{.locale.Tr "repo.branch.delete" .HeadTarget}}
|
|
</div>
|
|
<div class="content">
|
|
<p>{{.locale.Tr "repo.branch.delete_desc" | Str2html}}</p>
|
|
</div>
|
|
{{template "base/delete_modal_actions" .}}
|
|
</div>
|