Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit e95b42e

Browse files
delvhsilverwind
delvh
and
silverwind
authoredMay 21, 2023
Improve accessibility when (re-)viewing files (#24817)
Visually, nothing should have changed. Changes include - Convert most `<a [no href]>` to `<button>` when (re-)viewing files: - `<a [no href]>` are, by HTML definition, not a link and hence cannot be focused - `<a class="ui button">` can now be clicked (again?) using <kbd>Enter</kbd> - Previously, the installed keypress handler on `.ui.button` elements disabled it for links somehow - The `(un)escape file`, the `expand section` and the `expand/collapse file` buttons can now be focused (and subsequently clicked using only the keyboard) - You can now press <kbd>Space</kbd> on a focused `View file` checkbox to mark the file as viewed. - previously, this was impossible as this checkbox listened on the wrong event listener The `add code comment` button has been left inaccessible for now as it requires quite a bit of extra logic so that it is unhidden when it is focused (you can otherwise focus it without seeing it as you are not hovering on the corresponding line). --------- Co-authored-by: silverwind <[email protected]>
1 parent c59a057 commit e95b42e

17 files changed

+105
-92
lines changed
 

‎templates/repo/blame.tmpl

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
{{end}}
1212
<a class="ui tiny button" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">{{.locale.Tr "repo.normal_view"}}</a>
1313
<a class="ui tiny button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">{{.locale.Tr "repo.file_history"}}</a>
14-
<a class="ui tiny button unescape-button">{{.locale.Tr "repo.unescape_control_characters"}}</a>
15-
<a class="ui tiny button escape-button gt-hidden">{{.locale.Tr "repo.escape_control_characters"}}</a>
14+
<button class="ui tiny button unescape-button">{{.locale.Tr "repo.unescape_control_characters"}}</button>
15+
<button class="ui tiny button escape-button gt-hidden">{{.locale.Tr "repo.escape_control_characters"}}</button>
1616
</div>
1717
</div>
1818
</h4>
@@ -52,7 +52,7 @@
5252
{{if $.EscapeStatus.Escaped}}
5353
<td class="lines-escape">
5454
{{if $row.EscapeStatus.Escaped}}
55-
<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $row "locale" $.locale}}"></a>
55+
<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $row "locale" $.locale}}"></button>
5656
{{end}}
5757
</td>
5858
{{end}}

‎templates/repo/diff/blob_excerpt.tmpl

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,38 @@
33
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}}">
44
{{if eq .GetType 4}}
55
<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}">
6+
<div class="gt-df">
67
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
7-
<a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=down&wiki={{$.PageIsWiki}}" data-anchor="{{$.Anchor}}">
8+
<button class="code-expander-button" data-url="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=down&wiki={{$.PageIsWiki}}" data-anchor="{{$.Anchor}}">
89
{{svg "octicon-fold-down"}}
9-
</a>
10+
</button>
1011
{{end}}
1112
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}}
12-
<a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=up&wiki={{$.PageIsWiki}}" data-anchor="{{$.Anchor}}">
13+
<button class="code-expander-button" data-url="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=up&wiki={{$.PageIsWiki}}" data-anchor="{{$.Anchor}}">
1314
{{svg "octicon-fold-up"}}
14-
</a>
15+
</button>
1516
{{end}}
1617
{{if eq $line.GetExpandDirection 2}}
17-
<a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=&wiki={{$.PageIsWiki}}" data-anchor="{{$.Anchor}}">
18+
<button class="code-expander-button" data-url="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=&wiki={{$.PageIsWiki}}" data-anchor="{{$.Anchor}}">
1819
{{svg "octicon-fold"}}
19-
</a>
20+
</button>
2021
{{end}}
22+
</div>
2123
</td>
2224
<td colspan="7" class="lines-code lines-code-old ">{{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}}{{/*
2325
*/}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}</td>
2426
{{else}}
2527
{{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}}
2628
<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{$.FileNameHash}}L{{$line.LeftIdx}}{{end}}"></span></td>
27-
<td class="blob-excerpt lines-escape lines-escape-old">{{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></a>{{end}}</td>
29+
<td class="blob-excerpt lines-escape lines-escape-old">{{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
2830
<td class="blob-excerpt lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker=""></span>{{end}}</td>
2931
<td class="blob-excerpt lines-code lines-code-old">{{/*
3032
*/}}{{if $line.LeftIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/*
3133
*/}}<code class="code-inner"></code>{{/*
3234
*/}}{{end}}{{/*
3335
*/}}</td>
3436
<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$.FileNameHash}}R{{$line.RightIdx}}{{end}}"></span></td>
35-
<td class="blob-excerpt lines-escape lines-escape-new">{{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></a>{{end}}</td>
37+
<td class="blob-excerpt lines-escape lines-escape-new">{{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
3638
<td class="blob-excerpt lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker=""></span>{{end}}</td>
3739
<td class="blob-excerpt lines-code lines-code-new">{{/*
3840
*/}}{{if $line.RightIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.locale}}{{else}}{{/*
@@ -47,28 +49,30 @@
4749
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}}">
4850
{{if eq .GetType 4}}
4951
<td colspan="2" class="lines-num">
50-
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
51-
<a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=down&wiki={{$.PageIsWiki}}" data-anchor="{{$.Anchor}}">
52-
{{svg "octicon-fold-down"}}
53-
</a>
54-
{{end}}
55-
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}}
56-
<a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=up&wiki={{$.PageIsWiki}}" data-anchor="{{$.Anchor}}">
57-
{{svg "octicon-fold-up"}}
58-
</a>
59-
{{end}}
60-
{{if eq $line.GetExpandDirection 2}}
61-
<a role="button" class="blob-excerpt" data-url="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=&wiki={{$.PageIsWiki}}" data-anchor="{{$.Anchor}}">
62-
{{svg "octicon-fold"}}
63-
</a>
64-
{{end}}
52+
<div class="gt-df">
53+
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
54+
<button class="code-expander-button" data-url="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=down&wiki={{$.PageIsWiki}}" data-anchor="{{$.Anchor}}">
55+
{{svg "octicon-fold-down"}}
56+
</button>
57+
{{end}}
58+
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}}
59+
<button class="code-expander-button" data-url="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=up&wiki={{$.PageIsWiki}}" data-anchor="{{$.Anchor}}">
60+
{{svg "octicon-fold-up"}}
61+
</button>
62+
{{end}}
63+
{{if eq $line.GetExpandDirection 2}}
64+
<button class="code-expander-button" data-url="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=&wiki={{$.PageIsWiki}}" data-anchor="{{$.Anchor}}">
65+
{{svg "octicon-fold"}}
66+
</button>
67+
{{end}}
68+
</div>
6569
</td>
6670
{{else}}
6771
<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{$.FileNameHash}}L{{$line.LeftIdx}}{{end}}"></span></td>
6872
<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$.FileNameHash}}R{{$line.RightIdx}}{{end}}"></span></td>
6973
{{end}}
7074
{{$inlineDiff := $.section.GetComputedInlineDiffFor $line $.locale}}
71-
<td class="blob-excerpt lines-escape">{{if $inlineDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></a>{{end}}</td>
75+
<td class="blob-excerpt lines-escape">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"></button>{{end}}</td>
7276
<td class="blob-excerpt lines-type-marker"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
7377
<td class="blob-excerpt lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}"><code {{if $inlineDiff.EscapeStatus.Escaped}}class="code-inner has-escaped" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.locale}}"{{else}}class="code-inner"{{end}}>{{$inlineDiff.Content}}</code></td>
7478
</tr>

‎templates/repo/diff/box.tmpl

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,13 +90,13 @@
9090
<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} gt-mt-3" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}>
9191
<h4 class="diff-file-header sticky-2nd-row ui top attached normal header gt-df gt-ac gt-sb">
9292
<div class="diff-file-name gt-df gt-ac gt-mr-3">
93-
<a role="button" class="fold-file muted gt-mr-2" {{if not $isExpandable}}style="visibility: hidden"{{end}}>
93+
<button class="fold-file ui button button-ghost gt-p-0 gt-mr-3{{if not $isExpandable}} gt-invisible{{end}}">
9494
{{if $file.ShouldBeHidden}}
9595
{{svg "octicon-chevron-right" 18}}
9696
{{else}}
9797
{{svg "octicon-chevron-down" 18}}
9898
{{end}}
99-
</a>
99+
</button>
100100
<div class="gt-bold gt-df gt-ac gt-mono">
101101
{{if $file.IsBin}}
102102
<span class="gt-ml-1 gt-mr-3">
@@ -125,8 +125,8 @@
125125
<span class="ui basic label">{{$.locale.Tr "repo.diff.protected"}}</span>
126126
{{end}}
127127
{{if not (or $file.IsIncomplete $file.IsBin $file.IsSubmodule)}}
128-
<a class="ui basic tiny button unescape-button">{{$.locale.Tr "repo.unescape_control_characters"}}</a>
129-
<a class="ui basic tiny button escape-button gt-hidden">{{$.locale.Tr "repo.escape_control_characters"}}</a>
128+
<button class="ui basic tiny button unescape-button">{{$.locale.Tr "repo.unescape_control_characters"}}</button>
129+
<button class="ui basic tiny button escape-button gt-hidden">{{$.locale.Tr "repo.escape_control_characters"}}</button>
130130
{{end}}
131131
{{if and (not $file.IsSubmodule) (not $.PageIsWiki)}}
132132
{{if $file.IsDeleted}}

‎templates/repo/diff/section_split.tmpl

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,25 @@
1616
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}}" data-line-type="{{.GetHTMLDiffLineType}}">
1717
{{if eq .GetType 4}}
1818
<td class="lines-num lines-num-old">
19+
<div class="gt-df">
1920
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
20-
<a role="button" class="blob-excerpt" data-url="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=down&wiki={{$.root.PageIsWiki}}" data-anchor="diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
21+
<button class="code-expander-button" data-url="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=down&wiki={{$.root.PageIsWiki}}" data-anchor="diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
2122
{{svg "octicon-fold-down"}}
22-
</a>
23+
</button>
2324
{{end}}
2425
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}}
25-
<a role="button" class="blob-excerpt" data-url="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=up&wiki={{$.root.PageIsWiki}}" data-anchor="diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
26+
<button class="code-expander-button" data-url="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=up&wiki={{$.root.PageIsWiki}}" data-anchor="diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
2627
{{svg "octicon-fold-up"}}
27-
</a>
28+
</button>
2829
{{end}}
2930
{{if eq $line.GetExpandDirection 2}}
30-
<a role="button" class="blob-excerpt" data-url="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=&wiki={{$.root.PageIsWiki}}" data-anchor="diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
31+
<button class="code-expander-button" data-url="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=split&direction=&wiki={{$.root.PageIsWiki}}" data-anchor="diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
3132
{{svg "octicon-fold"}}
32-
</a>
33+
</button>
3334
{{end}}
35+
</div>
3436
</td>{{$inlineDiff := $section.GetComputedInlineDiffFor $line $.root.locale}}
35-
<td class="lines-escape lines-escape-old">{{if $inlineDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></a>{{end}}</td>
37+
<td class="lines-escape lines-escape-old">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}</td>
3638
<td colspan="6" class="lines-code lines-code-old ">{{/*
3739
*/}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.root.locale}}{{/*
3840
*/}}</td>
@@ -41,7 +43,7 @@
4143
{{- $leftDiff := ""}}{{if $line.LeftIdx}}{{$leftDiff = $section.GetComputedInlineDiffFor $line $.root.locale}}{{end}}
4244
{{- $rightDiff := ""}}{{if $match.RightIdx}}{{$rightDiff = $section.GetComputedInlineDiffFor $match $.root.locale}}{{end}}
4345
<td class="lines-num lines-num-old del-code" data-line-num="{{$line.LeftIdx}}"><span rel="diff-{{$file.NameHash}}L{{$line.LeftIdx}}"></span></td>
44-
<td class="lines-escape del-code lines-escape-old">{{if $line.LeftIdx}}{{if $leftDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $leftDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td>
46+
<td class="lines-escape del-code lines-escape-old">{{if $line.LeftIdx}}{{if $leftDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $leftDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td>
4547
<td class="lines-type-marker lines-type-marker-old del-code"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
4648
<td class="lines-code lines-code-old del-code">{{/*
4749
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
@@ -56,7 +58,7 @@
5658
*/}}{{end}}{{/*
5759
*/}}</td>
5860
<td class="lines-num lines-num-new add-code" data-line-num="{{if $match.RightIdx}}{{$match.RightIdx}}{{end}}"><span rel="{{if $match.RightIdx}}diff-{{$file.NameHash}}R{{$match.RightIdx}}{{end}}"></span></td>
59-
<td class="lines-escape add-code lines-escape-new">{{if $match.RightIdx}}{{if $rightDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $rightDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td>
61+
<td class="lines-escape add-code lines-escape-new">{{if $match.RightIdx}}{{if $rightDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $rightDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td>
6062
<td class="lines-type-marker lines-type-marker-new add-code">{{if $match.RightIdx}}<span class="gt-mono" data-type-marker="{{$match.GetLineTypeMarker}}"></span>{{end}}</td>
6163
<td class="lines-code lines-code-new add-code">{{/*
6264
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
@@ -73,7 +75,7 @@
7375
{{else}}
7476
{{$inlineDiff := $section.GetComputedInlineDiffFor $line $.root.locale}}
7577
<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{$file.NameHash}}L{{$line.LeftIdx}}{{end}}"></span></td>
76-
<td class="lines-escape lines-escape-old">{{if $line.LeftIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td>
78+
<td class="lines-escape lines-escape-old">{{if $line.LeftIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td>
7779
<td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
7880
<td class="lines-code lines-code-old">{{/*
7981
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 2))}}{{/*
@@ -88,7 +90,7 @@
8890
*/}}{{end}}{{/*
8991
*/}}</td>
9092
<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$file.NameHash}}R{{$line.RightIdx}}{{end}}"></span></td>
91-
<td class="lines-escape lines-escape-new">{{if $line.RightIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></a>{{end}}{{end}}</td>
93+
<td class="lines-escape lines-escape-new">{{if $line.RightIdx}}{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>{{end}}{{end}}</td>
9294
<td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
9395
<td class="lines-code lines-code-new">{{/*
9496
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 3))}}{{/*

‎templates/repo/diff/section_unified.tmpl

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,23 @@
1212
{{if eq .GetType 4}}
1313
{{if $.root.AfterCommitID}}
1414
<td colspan="2" class="lines-num">
15-
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
16-
<a role="button" class="blob-excerpt" data-url="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=down&wiki={{$.root.PageIsWiki}}" data-anchor="diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
17-
{{svg "octicon-fold-down"}}
18-
</a>
19-
{{end}}
20-
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}}
21-
<a role="button" class="blob-excerpt" data-url="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=up&wiki={{$.root.PageIsWiki}}" data-anchor="diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
22-
{{svg "octicon-fold-up"}}
23-
</a>
24-
{{end}}
25-
{{if eq $line.GetExpandDirection 2}}
26-
<a role="button" class="blob-excerpt" data-url="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=&wiki={{$.root.PageIsWiki}}" data-anchor="diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
27-
{{svg "octicon-fold"}}
28-
</a>
29-
{{end}}
15+
<div class="gt-df">
16+
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
17+
<button class="code-expander-button" data-url="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=down&wiki={{$.root.PageIsWiki}}" data-anchor="diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
18+
{{svg "octicon-fold-down"}}
19+
</button>
20+
{{end}}
21+
{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}}
22+
<button class="code-expander-button" data-url="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=up&wiki={{$.root.PageIsWiki}}" data-anchor="diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
23+
{{svg "octicon-fold-up"}}
24+
</button>
25+
{{end}}
26+
{{if eq $line.GetExpandDirection 2}}
27+
<button class="code-expander-button" data-url="{{$.root.RepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}" data-query="{{$line.GetBlobExcerptQuery}}&style=unified&direction=&wiki={{$.root.PageIsWiki}}" data-anchor="diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
28+
{{svg "octicon-fold"}}
29+
</button>
30+
{{end}}
31+
</div>
3032
</td>
3133
{{else}}
3234
{{/* for code file preview page or comment diffs on pull comment pages, do not show the expansion arrows */}}
@@ -37,7 +39,11 @@
3739
<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$file.NameHash}}R{{$line.RightIdx}}{{end}}"></span></td>
3840
{{end}}
3941
{{$inlineDiff := $section.GetComputedInlineDiffFor $line $.root.locale -}}
40-
<td class="lines-escape">{{if $inlineDiff.EscapeStatus.Escaped}}<a href="" class="toggle-escape-button" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></a>{{end}}</td>
42+
<td class="lines-escape">
43+
{{- if $inlineDiff.EscapeStatus.Escaped -}}
44+
<button class="toggle-escape-button button button-ghost" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff "locale" $.root.locale}}"></button>
45+
{{- end -}}
46+
</td>
4147
<td class="lines-type-marker"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
4248
{{if eq .GetType 4}}
4349
<td class="chroma lines-code blob-hunk">{{/*

‎templates/repo/issue/labels/labels_selector_field.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-label dropdown">
2-
<a class="text gt-df gt-ac muted">
2+
<span class="text gt-df gt-ac muted">
33
<strong>{{.locale.Tr "repo.issues.new.labels"}}</strong>
44
{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
55
{{svg "octicon-gear" 16 "gt-ml-2"}}
66
{{end}}
7-
</a>
7+
</span>
88
<div class="filter menu" {{if .Issue}}data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/labels"{{else}}data-id="#label_ids"{{end}}>
99
<div class="header" style="text-transform: none;font-size:16px;">{{.locale.Tr "repo.issues.new.add_labels_title"}}</div>
1010
{{if or .Labels .OrgLabels}}

‎templates/repo/issue/view_title.tmpl

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,12 @@
4545
{{if .Issue.IsPull}}
4646
{{$headHref := .HeadTarget|Escape}}
4747
{{if .HeadBranchLink}}
48-
{{$headHref = printf "<a href=\"%s\">%s</a>" (.HeadBranchLink | Escape) $headHref}}
48+
{{$headHref = printf `<a href="%s">%s</a>` (.HeadBranchLink | Escape) $headHref}}
4949
{{end}}
50-
{{$headHref = printf "%s <a data-tooltip-content=\"%s\" data-clipboard-text=\"%s\">%s</a>" $headHref (.locale.Tr "copy_branch") (.HeadTarget | Escape) (svg "octicon-copy" 14)}}
50+
{{$headHref = printf `%s <button class="button button-ghost" data-tooltip-content="%s" data-clipboard-text="%s">%s</button>` $headHref (.locale.Tr "copy_branch") (.HeadTarget | Escape) (svg "octicon-copy" 14)}}
5151
{{$baseHref := .BaseTarget|Escape}}
5252
{{if .BaseBranchLink}}
53-
{{$baseHref = printf "<a href=\"%s\">%s</a>" (.BaseBranchLink | Escape) $baseHref}}
53+
{{$baseHref = printf `<a href="%s">%s</a>` (.BaseBranchLink | Escape) $baseHref}}
5454
{{end}}
5555
{{if .Issue.PullRequest.HasMerged}}
5656
{{$mergedStr:= TimeSinceUnix .Issue.PullRequest.MergedUnix $.locale}}

‎templates/repo/view_file.tmpl

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@
3636
{{end}}
3737
<a class="ui mini basic button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{PathEscapeSegments .TreePath}}">{{.locale.Tr "repo.file_history"}}</a>
3838
{{if .EscapeStatus.Escaped}}
39-
<a class="ui mini basic button unescape-button gt-hidden">{{.locale.Tr "repo.unescape_control_characters"}}</a>
40-
<a class="ui mini basic button escape-button">{{.locale.Tr "repo.escape_control_characters"}}</a>
39+
<button class="ui mini basic button unescape-button gt-hidden">{{.locale.Tr "repo.unescape_control_characters"}}</button>
40+
<button class="ui mini basic button escape-button">{{.locale.Tr "repo.escape_control_characters"}}</button>
4141
{{end}}
4242
</div>
4343
<a download href="{{$.RawFileLink}}"><span class="btn-octicon" data-tooltip-content="{{.locale.Tr "repo.download_file"}}">{{svg "octicon-download"}}</span></a>
@@ -58,8 +58,8 @@
5858
{{end}}
5959
{{end}}
6060
{{else if .EscapeStatus.Escaped}}
61-
<a class="ui mini basic button unescape-button gt-mr-2 gt-hidden">{{.locale.Tr "repo.unescape_control_characters"}}</a>
62-
<a class="ui mini basic button escape-button gt-mr-2">{{.locale.Tr "repo.escape_control_characters"}}</a>
61+
<button class="ui mini basic button unescape-button gt-mr-2 gt-hidden">{{.locale.Tr "repo.unescape_control_characters"}}</button>
62+
<button class="ui mini basic button escape-button gt-mr-2">{{.locale.Tr "repo.escape_control_characters"}}</button>
6363
{{end}}
6464
</div>
6565
</h4>
@@ -107,7 +107,7 @@
107107
<tr>
108108
<td id="L{{$line}}" class="lines-num"><span id="L{{$line}}" data-line-number="{{$line}}"></span></td>
109109
{{if $.EscapeStatus.Escaped}}
110-
<td class="lines-escape">{{if (index $.LineEscapeStatus $idx).Escaped}}<a href="" class="toggle-escape-button" title="{{if (index $.LineEscapeStatus $idx).HasInvisible}}{{$.locale.Tr "repo.invisible_runes_line"}} {{end}}{{if (index $.LineEscapeStatus $idx).HasAmbiguous}}{{$.locale.Tr "repo.ambiguous_runes_line"}}{{end}}"></a>{{end}}</td>
110+
<td class="lines-escape">{{if (index $.LineEscapeStatus $idx).Escaped}}<button class="toggle-escape-button button button-ghost" title="{{if (index $.LineEscapeStatus $idx).HasInvisible}}{{$.locale.Tr "repo.invisible_runes_line"}} {{end}}{{if (index $.LineEscapeStatus $idx).HasAmbiguous}}{{$.locale.Tr "repo.ambiguous_runes_line"}}{{end}}"></button>{{end}}</td>
111111
{{end}}
112112
<td rel="L{{$line}}" class="lines-code chroma"><code class="code-inner">{{$code | Safe}}</code></td>
113113
</tr>

‎templates/user/settings/profile.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@
125125

126126
<div class="field">
127127
<button class="ui green button">{{$.locale.Tr "settings.update_avatar"}}</button>
128-
<a class="ui red button delete-post" data-request-url="{{.Link}}/avatar/delete" data-done-url="{{.Link}}">{{$.locale.Tr "settings.delete_current_avatar"}}</a>
128+
<button class="ui red button delete-post" data-request-url="{{.Link}}/avatar/delete" data-done-url="{{.Link}}">{{$.locale.Tr "settings.delete_current_avatar"}}</button>
129129
</div>
130130
</form>
131131
</div>

‎web_src/css/repo.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2943,7 +2943,7 @@ tbody.commit-list {
29432943
padding-top: 0 !important;
29442944
}
29452945

2946-
td.blob-excerpt {
2946+
.blob-excerpt {
29472947
background-color: var(--color-secondary-alpha-30);
29482948
}
29492949

‎web_src/css/review.css

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
transform: scale(1.1);
2222
}
2323

24-
.lines-escape a.toggle-escape-button::before {
24+
.lines-escape .toggle-escape-button::before {
2525
visibility: visible;
2626
content: "⚠️";
2727
font-family: var(--fonts-emoji);
@@ -198,17 +198,19 @@
198198
color: var(--color-text);
199199
}
200200

201-
a.blob-excerpt {
201+
.code-expander-button {
202+
border: none;
202203
color: var(--color-text-light);
203204
height: 28px;
204205
display: flex;
205206
justify-content: center;
206207
align-items: center;
207208
width: 100%;
208209
background: var(--color-expand-button);
210+
flex: 1;
209211
}
210212

211-
a.blob-excerpt:hover {
213+
.code-expander-button:hover {
212214
background: var(--color-primary);
213215
color: var(--color-primary-contrast);
214216
}

‎web_src/js/features/common-global.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,8 @@ export function initGlobalEnterQuickSubmit() {
5656
}
5757

5858
export function initGlobalButtonClickOnEnter() {
59-
$(document).on('keypress', '.ui.button', (e) => {
60-
if (e.keyCode === 13 || e.keyCode === 32) { // enter key or space bar
61-
if (e.target.nodeName === 'BUTTON') return; // button already handles space&enter correctly
59+
$(document).on('keypress', 'div.ui.button,span.ui.button', (e) => {
60+
if (e.code === ' ' || e.code === 'Enter') {
6261
$(e.target).trigger('click');
6362
e.preventDefault();
6463
}

‎web_src/js/features/pull-view-file.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export function initViewedCheckboxListenerFor() {
3838
// The checkbox consists of a div containing the real checkbox with its label and the CSRF token,
3939
// hence the actual checkbox first has to be found
4040
const checkbox = form.querySelector('input[type=checkbox]');
41-
checkbox.addEventListener('change', function() {
41+
checkbox.addEventListener('input', function() {
4242
// Mark the file as viewed visually - will especially change the background
4343
if (this.checked) {
4444
form.classList.add(viewedStyleClass);

‎web_src/js/features/repo-code.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ export function initRepoCodeView() {
181181
$(document).on('click', '.fold-file', ({currentTarget}) => {
182182
invertFileFolding(currentTarget.closest('.file-content'), currentTarget);
183183
});
184-
$(document).on('click', '.blob-excerpt', async ({currentTarget}) => {
184+
$(document).on('click', '.code-expander-button', async ({currentTarget}) => {
185185
const url = currentTarget.getAttribute('data-url');
186186
const query = currentTarget.getAttribute('data-query');
187187
const anchor = currentTarget.getAttribute('data-anchor');

‎web_src/js/features/repo-diff.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,9 @@ function initRepoDiffConversationForm() {
6262

6363
$form.closest('.conversation-holder').replaceWith($newConversationHolder);
6464
if ($form.closest('tr').data('line-type') === 'same') {
65-
$(`[data-path="${path}"] a.add-code-comment[data-idx="${idx}"]`).addClass('invisible');
65+
$(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).addClass('invisible');
6666
} else {
67-
$(`[data-path="${path}"] a.add-code-comment[data-side="${side}"][data-idx="${idx}"]`).addClass('invisible');
67+
$(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).addClass('invisible');
6868
}
6969
$newConversationHolder.find('.dropdown').dropdown();
7070
initCompReactionSelector($newConversationHolder);

‎web_src/js/features/repo-issue.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -177,9 +177,9 @@ export function initRepoIssueCommentDelete() {
177177
const idx = $conversationHolder.data('idx');
178178
const lineType = $conversationHolder.closest('tr').data('line-type');
179179
if (lineType === 'same') {
180-
$(`[data-path="${path}"] a.add-code-comment[data-idx="${idx}"]`).removeClass('invisible');
180+
$(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).removeClass('invisible');
181181
} else {
182-
$(`[data-path="${path}"] a.add-code-comment[data-side="${side}"][data-idx="${idx}"]`).removeClass('invisible');
182+
$(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).removeClass('invisible');
183183
}
184184
$conversationHolder.remove();
185185
}
@@ -488,7 +488,7 @@ export function initRepoPullRequestReview() {
488488
});
489489
}
490490

491-
$(document).on('click', 'a.add-code-comment', async function (e) {
491+
$(document).on('click', '.add-code-comment', async function (e) {
492492
if ($(e.target).hasClass('btn-add-single')) return; // https://github.com/go-gitea/gitea/issues/4745
493493
e.preventDefault();
494494

‎web_src/js/features/repo-unicode-escape.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,30 @@ import $ from 'jquery';
22
import {hideElem, showElem} from '../utils/dom.js';
33

44
export function initUnicodeEscapeButton() {
5-
$(document).on('click', 'a.escape-button', (e) => {
5+
$(document).on('click', '.escape-button', (e) => {
66
e.preventDefault();
77
$(e.target).parents('.file-content, .non-diff-file-content').find('.file-code, .file-view').addClass('unicode-escaped');
88
hideElem($(e.target));
9-
showElem($(e.target).siblings('a.unescape-button'));
9+
showElem($(e.target).siblings('.unescape-button'));
1010
});
11-
$(document).on('click', 'a.unescape-button', (e) => {
11+
$(document).on('click', '.unescape-button', (e) => {
1212
e.preventDefault();
1313
$(e.target).parents('.file-content, .non-diff-file-content').find('.file-code, .file-view').removeClass('unicode-escaped');
1414
hideElem($(e.target));
15-
showElem($(e.target).siblings('a.escape-button'));
15+
showElem($(e.target).siblings('.escape-button'));
1616
});
17-
$(document).on('click', 'a.toggle-escape-button', (e) => {
17+
$(document).on('click', '.toggle-escape-button', (e) => {
1818
e.preventDefault();
1919
const fileContent = $(e.target).parents('.file-content, .non-diff-file-content');
2020
const fileView = fileContent.find('.file-code, .file-view');
2121
if (fileView.hasClass('unicode-escaped')) {
2222
fileView.removeClass('unicode-escaped');
23-
hideElem(fileContent.find('a.unescape-button'));
24-
showElem(fileContent.find('a.escape-button'));
23+
hideElem(fileContent.find('.unescape-button'));
24+
showElem(fileContent.find('.escape-button'));
2525
} else {
2626
fileView.addClass('unicode-escaped');
27-
showElem(fileContent.find('a.unescape-button'));
28-
hideElem(fileContent.find('a.escape-button'));
27+
showElem(fileContent.find('.unescape-button'));
28+
hideElem(fileContent.find('.escape-button'));
2929
}
3030
});
3131
}

0 commit comments

Comments
 (0)
Please sign in to comment.