mirror of
https://github.com/go-gitea/gitea
synced 2024-11-17 09:45:53 +01:00
81fe5d6185
This improves a lot of accessibility shortcomings. Every possible instance of `<div class="button">` matching the command `ag '<[^ab].*?class=.*?[" ]button[ "]' templates/ | grep -v 'dropdown'` has been converted when possible. divs with the `dropdown` class and their children were omitted as 1. more analysis must be conducted whether the dropdowns still work as intended when they are a `button` instead of a `div`. 2. most dropdowns have `div`s as children. The HTML standard disallows `div`s inside `button`s. 3. When a dropdown child that's part of the displayed text content is converted to a `button`, the dropdown can be focused twice Further changes include that all "gitea-managed" buttons with JS code received an `e.preventDefault()` so that they don't accidentally submit an underlying form, which would execute instead of cancel the action. Lastly, some minor issues were fixed as well during the refactoring. ## Future improvements As mentioned in https://github.com/go-gitea/gitea/pull/23337#discussion_r1127277391, `<a>`s without `href` attribute are not focusable. They should later on be converted to `<button>`s. --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: techknowlogick <techknowlogick@gitea.io> Co-authored-by: Lunny Xiao <xiaolunwen@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 "ctxData" $ "ActionURL" (Printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index)}}
|
|
{{template "repo/issue/view_content/context_menu" Dict "ctxData" $ "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 "ctxData" $ "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 "ctxData" $ "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}}
|
|
<button 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"}}
|
|
</button>
|
|
{{else}}
|
|
<button 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"}}
|
|
</button>
|
|
{{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}}
|
|
<button 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"}}
|
|
</button>
|
|
{{else}}
|
|
<button 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"}}
|
|
</button>
|
|
{{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">
|
|
<button class="ui basic secondary cancel button" tabindex="3">{{.locale.Tr "repo.issues.cancel"}}</button>
|
|
<button class="ui primary save button" tabindex="2">{{.locale.Tr "repo.issues.save"}}</button>
|
|
</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>
|