forked from gitea/gitea
1
0
Fork 0

Make `add line comment` buttons focusable (#25894)

Use a real button and add an aria-label.
Additionally, show the button whenever it is focused.
See https://codeberg.org/forgejo/forgejo/issues/998 for explanation.

Our handling of this button is now equal to that of GitHub.
Nothing has changed visually.
This commit is contained in:
sebastian-sauer 2023-07-15 11:45:34 +02:00 committed by GitHub
parent 9672085d94
commit d473de0c2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 10 deletions

View File

@ -2375,6 +2375,7 @@ diff.show_more = Show More
diff.load = Load Diff diff.load = Load Diff
diff.generated = generated diff.generated = generated
diff.vendored = vendored diff.vendored = vendored
diff.comment.add_line_comment = Add line comment
diff.comment.placeholder = Leave a comment diff.comment.placeholder = Leave a comment
diff.comment.markdown_info = Styling with markdown is supported. diff.comment.markdown_info = Styling with markdown is supported.
diff.comment.add_single_comment = Add single comment diff.comment.add_single_comment = Add single comment

View File

@ -47,9 +47,9 @@
<td class="lines-type-marker lines-type-marker-old del-code"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td> <td class="lines-type-marker lines-type-marker-old del-code"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
<td class="lines-code lines-code-old del-code">{{/* <td class="lines-code lines-code-old del-code">{{/*
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
*/}}<a class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/* */}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/*
*/}}{{svg "octicon-plus"}}{{/* */}}{{svg "octicon-plus"}}{{/*
*/}}</a>{{/* */}}</button>{{/*
*/}}{{end}}{{/* */}}{{end}}{{/*
*/}}{{if $line.LeftIdx}}{{/* */}}{{if $line.LeftIdx}}{{/*
*/}}{{template "repo/diff/section_code" dict "diff" $leftDiff "locale" $.root.locale}}{{/* */}}{{template "repo/diff/section_code" dict "diff" $leftDiff "locale" $.root.locale}}{{/*
@ -62,9 +62,9 @@
<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> <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>
<td class="lines-code lines-code-new add-code">{{/* <td class="lines-code lines-code-new add-code">{{/*
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
*/}}<a class="ui primary button add-code-comment add-code-comment-right{{if (not $match.CanComment)}} invisible{{end}}" data-side="right" data-idx="{{$match.RightIdx}}">{{/* */}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-right{{if (not $match.CanComment)}} invisible{{end}}" data-side="right" data-idx="{{$match.RightIdx}}">{{/*
*/}}{{svg "octicon-plus"}}{{/* */}}{{svg "octicon-plus"}}{{/*
*/}}</a>{{/* */}}</button>{{/*
*/}}{{end}}{{/* */}}{{end}}{{/*
*/}}{{if $match.RightIdx}}{{/* */}}{{if $match.RightIdx}}{{/*
*/}}{{template "repo/diff/section_code" dict "diff" $rightDiff "locale" $.root.locale}}{{/* */}}{{template "repo/diff/section_code" dict "diff" $rightDiff "locale" $.root.locale}}{{/*
@ -79,9 +79,9 @@
<td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td> <td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
<td class="lines-code lines-code-old">{{/* <td class="lines-code lines-code-old">{{/*
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 2))}}{{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 2))}}{{/*
*/}}<a class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/* */}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/*
*/}}{{svg "octicon-plus"}}{{/* */}}{{svg "octicon-plus"}}{{/*
*/}}</a>{{/* */}}</button>{{/*
*/}}{{end}}{{/* */}}{{end}}{{/*
*/}}{{if $line.LeftIdx}}{{/* */}}{{if $line.LeftIdx}}{{/*
*/}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.root.locale}}{{/* */}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.root.locale}}{{/*
@ -94,9 +94,9 @@
<td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td> <td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
<td class="lines-code lines-code-new">{{/* <td class="lines-code lines-code-new">{{/*
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 3))}}{{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 3))}}{{/*
*/}}<a class="ui primary button add-code-comment add-code-comment-right{{if (not $line.CanComment)}} invisible{{end}}" data-side="right" data-idx="{{$line.RightIdx}}">{{/* */}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-right{{if (not $line.CanComment)}} invisible{{end}}" data-side="right" data-idx="{{$line.RightIdx}}">{{/*
*/}}{{svg "octicon-plus"}}{{/* */}}{{svg "octicon-plus"}}{{/*
*/}}</a>{{/* */}}</button>{{/*
*/}}{{end}}{{/* */}}{{end}}{{/*
*/}}{{if $line.RightIdx}}{{/* */}}{{if $line.RightIdx}}{{/*
*/}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.root.locale}}{{/* */}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.root.locale}}{{/*

View File

@ -52,9 +52,9 @@
{{else}} {{else}}
<td class="chroma lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}">{{/* <td class="chroma lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}">{{/*
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
*/}}<a class="ui primary button add-code-comment add-code-comment-{{if $line.RightIdx}}right{{else}}left{{end}}{{if (not $line.CanComment)}} invisible{{end}}" data-side="{{if $line.RightIdx}}right{{else}}left{{end}}" data-idx="{{if $line.RightIdx}}{{$line.RightIdx}}{{else}}{{$line.LeftIdx}}{{end}}">{{/* */}}<button type="button" aria-label="{{$.root.locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-{{if $line.RightIdx}}right{{else}}left{{end}}{{if (not $line.CanComment)}} invisible{{end}}" data-side="{{if $line.RightIdx}}right{{else}}left{{end}}" data-idx="{{if $line.RightIdx}}{{$line.RightIdx}}{{else}}{{$line.LeftIdx}}{{end}}">{{/*
*/}}{{svg "octicon-plus"}}{{/* */}}{{svg "octicon-plus"}}{{/*
*/}}</a>{{/* */}}</button>{{/*
*/}}{{end}}{{/* */}}{{end}}{{/*
*/}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.root.locale}}{{/* */}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.root.locale}}{{/*
*/}}</td> */}}</td>

View File

@ -36,6 +36,10 @@
opacity: 1; opacity: 1;
} }
.ui.button.add-code-comment:focus {
opacity: 1;
}
.repository .diff-file-box .code-diff .add-comment-left, .repository .diff-file-box .code-diff .add-comment-left,
.repository .diff-file-box .code-diff .add-comment-right, .repository .diff-file-box .code-diff .add-comment-right,
.repository .diff-file-box .code-diff .add-code-comment .add-comment-left, .repository .diff-file-box .code-diff .add-code-comment .add-comment-left,