mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-12-27 01:44:10 -05: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>
107 lines
5.7 KiB
Handlebars
107 lines
5.7 KiB
Handlebars
<div class="sixteen wide column title">
|
|
<div class="issue-title" id="issue-title-wrapper">
|
|
{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
|
|
<button id="edit-title" class="ui basic button secondary edit-button not-in-edit">{{.locale.Tr "repo.issues.edit"}}</button>
|
|
{{end}}
|
|
<h1>
|
|
<span id="issue-title">{{RenderIssueTitle $.Context .Issue.Title $.RepoLink $.Repository.ComposeMetas | RenderCodeBlock}}</span>
|
|
<span class="index">#{{.Issue.Index}}</span>
|
|
<div id="edit-title-input" class="ui input gt-ml-4 gt-hidden">
|
|
<input value="{{.Issue.Title}}" maxlength="255" autocomplete="off">
|
|
</div>
|
|
</h1>
|
|
{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
|
|
<div class="edit-buttons">
|
|
<button id="cancel-edit-title" class="ui basic button secondary in-edit gt-hidden">{{.locale.Tr "repo.issues.cancel"}}</button>
|
|
<button id="save-edit-title" class="ui primary button in-edit gt-hidden" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title" {{if .Issue.IsPull}}data-target-update-url="{{$.RepoLink}}/pull/{{.Issue.Index}}/target_branch"{{end}}>{{.locale.Tr "repo.issues.save"}}</button>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
{{if .HasMerged}}
|
|
<div class="ui purple large label">{{svg "octicon-git-merge" 16}} {{if eq .Issue.PullRequest.Status 3}}{{.locale.Tr "repo.pulls.manually_merged"}}{{else}}{{.locale.Tr "repo.pulls.merged"}}{{end}}</div>
|
|
{{else if .Issue.IsClosed}}
|
|
<div class="ui red large label">{{if .Issue.IsPull}}{{svg "octicon-git-pull-request"}}{{else}}{{svg "octicon-issue-closed"}}{{end}} {{.locale.Tr "repo.issues.closed_title"}}</div>
|
|
{{else if .Issue.IsPull}}
|
|
{{if .IsPullWorkInProgress}}
|
|
<div class="ui grey large label">{{svg "octicon-git-pull-request-draft"}} {{.locale.Tr "repo.issues.draft_title"}}</div>
|
|
{{else}}
|
|
<div class="ui green large label">{{svg "octicon-git-pull-request"}} {{.locale.Tr "repo.issues.open_title"}}</div>
|
|
{{end}}
|
|
{{else}}
|
|
<div class="ui green large label">{{svg "octicon-issue-opened"}} {{.locale.Tr "repo.issues.open_title"}}</div>
|
|
{{end}}
|
|
|
|
{{if .Issue.IsPull}}
|
|
{{$headHref := .HeadTarget|Escape}}
|
|
{{if .HeadBranchLink}}
|
|
{{$headHref = printf "<a href=\"%s\">%s</a>" (.HeadBranchLink | Escape) $headHref}}
|
|
{{end}}
|
|
{{$headHref = printf "%s <a class=\"tooltip\" data-content=\"%s\" data-clipboard-text=\"%s\">%s</a>" $headHref (.locale.Tr "copy_branch") (.HeadTarget | Escape) (svg "octicon-copy" 14)}}
|
|
{{$baseHref := .BaseTarget|Escape}}
|
|
{{if .BaseBranchLink}}
|
|
{{$baseHref = printf "<a href=\"%s\">%s</a>" (.BaseBranchLink | Escape) $baseHref}}
|
|
{{end}}
|
|
{{if .Issue.PullRequest.HasMerged}}
|
|
{{$mergedStr:= TimeSinceUnix .Issue.PullRequest.MergedUnix $.locale}}
|
|
{{if .Issue.OriginalAuthor}}
|
|
{{.Issue.OriginalAuthor}}
|
|
<span class="pull-desc">{{$.locale.Tr "repo.pulls.merged_title_desc" .NumCommits $headHref $baseHref $mergedStr | Safe}}</span>
|
|
{{else}}
|
|
<a {{if gt .Issue.PullRequest.Merger.ID 0}}href="{{.Issue.PullRequest.Merger.HomeLink}}"{{end}}>{{.Issue.PullRequest.Merger.GetDisplayName}}</a>
|
|
<span class="pull-desc">{{$.locale.Tr "repo.pulls.merged_title_desc" .NumCommits $headHref $baseHref $mergedStr | Safe}}</span>
|
|
{{end}}
|
|
{{else}}
|
|
{{if .Issue.OriginalAuthor}}
|
|
<span id="pull-desc" class="pull-desc">{{.Issue.OriginalAuthor}} {{$.locale.Tr "repo.pulls.title_desc" .NumCommits $headHref $baseHref | Safe}}</span>
|
|
{{else}}
|
|
<span id="pull-desc" class="pull-desc">
|
|
<a {{if gt .Issue.Poster.ID 0}}href="{{.Issue.Poster.HomeLink}}"{{end}}>{{.Issue.Poster.GetDisplayName}}</a>
|
|
{{$.locale.Tr "repo.pulls.title_desc" .NumCommits $headHref $baseHref | Safe}}
|
|
</span>
|
|
{{end}}
|
|
<span id="pull-desc-edit" class="gt-hidden">
|
|
<div class="ui floating filter dropdown">
|
|
<div class="ui basic small button">
|
|
<span class="text">{{.locale.Tr "repo.pulls.compare_compare"}}: {{$.HeadTarget}}</span>
|
|
</div>
|
|
</div>
|
|
{{svg "octicon-arrow-right"}}
|
|
<div class="ui floating filter dropdown" data-no-results="{{.locale.Tr "repo.pulls.no_results"}}">
|
|
<div class="ui basic small button">
|
|
<span class="text" id="pull-target-branch" data-basename="{{$.BaseName}}" data-branch="{{$.BaseBranch}}">{{.locale.Tr "repo.pulls.compare_base"}}: {{$.BaseName}}:{{$.BaseBranch}}</span>
|
|
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
|
</div>
|
|
<div class="menu">
|
|
<div class="ui icon search input">
|
|
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
|
|
<input name="search" placeholder="{{.locale.Tr "repo.pulls.filter_branch"}}...">
|
|
</div>
|
|
<div class="scrolling menu" id="branch-select">
|
|
{{range .Branches}}
|
|
{{$sameBase := ne $.BaseName $.HeadUserName}}
|
|
{{$differentBranch := ne . $.HeadBranch}}
|
|
{{if or $sameBase $differentBranch}}
|
|
<div class="item {{if eq $.BaseBranch .}}selected{{end}}" data-branch="{{.}}">{{$.BaseName}}{{if $.HeadRepo}}/{{$.HeadRepo}}{{end}}:{{.}}</div>
|
|
{{end}}
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
{{end}}
|
|
{{else}}
|
|
{{$createdStr:= TimeSinceUnix .Issue.CreatedUnix $.locale}}
|
|
<span class="time-desc">
|
|
{{if .Issue.OriginalAuthor}}
|
|
{{$.locale.Tr "repo.issues.opened_by_fake" $createdStr (.Issue.OriginalAuthor|Escape) | Safe}}
|
|
{{else if gt .Issue.Poster.ID 0}}
|
|
{{$.locale.Tr "repo.issues.opened_by" $createdStr (.Issue.Poster.HomeLink|Escape) (.Issue.Poster.GetDisplayName|Escape) | Safe}}
|
|
{{else}}
|
|
{{$.locale.Tr "repo.issues.opened_by_fake" $createdStr (.Issue.Poster.GetDisplayName|Escape) | Safe}}
|
|
{{end}}
|
|
·
|
|
{{$.locale.Tr "repo.issues.num_comments" .Issue.NumComments}}
|
|
</span>
|
|
{{end}}
|
|
<div class="ui divider"></div>
|
|
</div>
|