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.

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 8c7990e0d4dea12394ade0a2f2e4e8ec357f3ec8..77003351f5d9189a281c903c65233881e6adb487 100644 (file)
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -2375,6 +2375,7 @@ diff.show_more = Show More
 diff.load = Load Diff
 diff.generated = generated
 diff.vendored = vendored
+diff.comment.add_line_comment = Add line comment
 diff.comment.placeholder = Leave a comment
 diff.comment.markdown_info = Styling with markdown is supported.
 diff.comment.add_single_comment = Add single comment

diff --git a/templates/repo/diff/section_split.tmpl b/templates/repo/diff/section_split.tmpl
index 6a8a105e2b75167f13649e5ea68015ebb14872db..a1a5f5ba569940b0f504dcfdc03e9c5412a367e5 100644 (file)
--- a/templates/repo/diff/section_split.tmpl
+++ b/templates/repo/diff/section_split.tmpl
@@ -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-code lines-code-old del-code">{{/*
                                                */}}{{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"}}{{/*
-                                                       */}}</a>{{/*
+                                                       */}}</button>{{/*
                                                */}}{{end}}{{/*
                                                */}}{{if $line.LeftIdx}}{{/*
                                                        */}}{{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-code lines-code-new add-code">{{/*
                                                */}}{{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"}}{{/*
-                                                       */}}</a>{{/*
+                                                       */}}</button>{{/*
                                                */}}{{end}}{{/*
                                                */}}{{if $match.RightIdx}}{{/*
                                                        */}}{{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-code lines-code-old">{{/*
                                                */}}{{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"}}{{/*
-                                                       */}}</a>{{/*
+                                                       */}}</button>{{/*
                                                */}}{{end}}{{/*
                                                */}}{{if $line.LeftIdx}}{{/*
                                                        */}}{{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-code lines-code-new">{{/*
                                                */}}{{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"}}{{/*
-                                                       */}}</a>{{/*
+                                                       */}}</button>{{/*
                                                */}}{{end}}{{/*
                                                */}}{{if $line.RightIdx}}{{/*
                                                        */}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.root.locale}}{{/*

diff --git a/templates/repo/diff/section_unified.tmpl b/templates/repo/diff/section_unified.tmpl
index 8f9c122f05fd58218fce391a3e68745ac07c9184..98e382a0cb0e6525e191e8e9e11fb0c93b1f35f3 100644 (file)
--- a/templates/repo/diff/section_unified.tmpl
+++ b/templates/repo/diff/section_unified.tmpl
@@ -52,9 +52,9 @@
                        {{else}}
                                <td class="chroma lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}">{{/*
                                        */}}{{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"}}{{/*
-                                               */}}</a>{{/*
+                                               */}}</button>{{/*
                                        */}}{{end}}{{/*
                                        */}}{{template "repo/diff/section_code" dict "diff" $inlineDiff "locale" $.root.locale}}{{/*
                                */}}</td>

diff --git a/web_src/css/review.css b/web_src/css/review.css
index f82a6e7f370675bad10ddd393fd19ee6ce4d3b4e..a4c4efd029d149cd822889bd5ad6e0218f28edf7 100644 (file)
--- a/web_src/css/review.css
+++ b/web_src/css/review.css
@@ -36,6 +36,10 @@
   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-right,
 .repository .diff-file-box .code-diff .add-code-comment .add-comment-left,