Fix incorrect display for comment context menu (#23343)

Replace #23342

Fix a regression of #23014: the `a` couldn't be used here because
Fomantic UI has style conflicts: `.ui.comments .comment .actions a {
display: inline-block; }`

And complete one more of my TODOs: "in the future there could be a
special CSS class for it"

diff --git a/templates/repo/issue/view_content/context_menu.tmpl b/templates/repo/issue/view_content/context_menu.tmpl
index f836271b65b56384db8d7ec8b80a4813c9b54a04..c073c74ea32f079c86755820cacab87a86be3f50 100644 (file)
--- a/templates/repo/issue/view_content/context_menu.tmpl
+++ b/templates/repo/issue/view_content/context_menu.tmpl
@@ -10,16 +10,16 @@
                {{else}}
                        {{$referenceUrl = Printf "%s/files#%s" .ctxData.Issue.Link .item.HashTag}}
                {{end}}
-               <a class="item context" data-clipboard-text-type="url" data-clipboard-text="{{AppSubUrl}}{{$referenceUrl}}">{{.ctxData.locale.Tr "repo.issues.context.copy_link"}}</a>
-               <a class="item context quote-reply {{if .diff}}quote-reply-diff{{end}}" data-target="{{.item.HashTag}}-raw">{{.ctxData.locale.Tr "repo.issues.context.quote_reply"}}</a>
+               <div class="item context js-aria-clickable" data-clipboard-text-type="url" data-clipboard-text="{{AppSubUrl}}{{$referenceUrl}}">{{.ctxData.locale.Tr "repo.issues.context.copy_link"}}</div>
+               <div class="item context js-aria-clickable quote-reply {{if .diff}}quote-reply-diff{{end}}" data-target="{{.item.HashTag}}-raw">{{.ctxData.locale.Tr "repo.issues.context.quote_reply"}}</div>
                {{if not .ctxData.UnitIssuesGlobalDisabled}}
-                       <a class="item context reference-issue" data-target="{{.item.HashTag}}-raw" data-modal="#reference-issue-modal" data-poster="{{.item.Poster.GetDisplayName}}" data-poster-username="{{.item.Poster.Name}}" data-reference="{{$referenceUrl}}">{{.ctxData.locale.Tr "repo.issues.context.reference_issue"}}</a>
+                       <div class="item context js-aria-clickable reference-issue" data-target="{{.item.HashTag}}-raw" data-modal="#reference-issue-modal" data-poster="{{.item.Poster.GetDisplayName}}" data-poster-username="{{.item.Poster.Name}}" data-reference="{{$referenceUrl}}">{{.ctxData.locale.Tr "repo.issues.context.reference_issue"}}</div>
                {{end}}
                {{if or .ctxData.Permission.IsAdmin .IsCommentPoster .ctxData.HasIssuesOrPullsWritePermission}}
                        <div class="divider"></div>
-                       <a class="item context edit-content">{{.ctxData.locale.Tr "repo.issues.context.edit"}}</a>
+                       <div class="item context js-aria-clickable edit-content">{{.ctxData.locale.Tr "repo.issues.context.edit"}}</div>
                        {{if .delete}}
-                               <a class="item context delete-comment" data-comment-id={{.item.HashTag}} data-url="{{.ctxData.RepoLink}}/comments/{{.item.ID}}/delete" data-locale="{{.ctxData.locale.Tr "repo.issues.delete_comment_confirm"}}">{{.ctxData.locale.Tr "repo.issues.context.delete"}}</a>
+                               <div class="item context js-aria-clickable delete-comment" data-comment-id={{.item.HashTag}} data-url="{{.ctxData.RepoLink}}/comments/{{.item.ID}}/delete" data-locale="{{.ctxData.locale.Tr "repo.issues.delete_comment_confirm"}}">{{.ctxData.locale.Tr "repo.issues.context.delete"}}</div>
                        {{end}}
                {{end}}
        </div>

diff --git a/web_src/js/features/aria.js b/web_src/js/features/aria.js
index 373d667c5f73c98d7ed82fd0184640cd15fe30ed..46944336adc1021bf0ee549cb5beede36f97e783 100644 (file)
--- a/web_src/js/features/aria.js
+++ b/web_src/js/features/aria.js
@@ -83,8 +83,9 @@ function attachOneDropdownAria($dropdown) {
     if (e.key === 'Enter') {
       let $item = $dropdown.dropdown('get item', $dropdown.dropdown('get value'));
       if (!$item) $item = $menu.find('> .item.selected'); // when dropdown filters items by input, there is no "value", so query the "selected" item
-      // if the selected item is clickable, then trigger the click event. in the future there could be a special CSS class for it.
-      if ($item && $item.is('a')) $item[0].click();
+      // if the selected item is clickable, then trigger the click event.
+      // we can not click any item without check, because Fomantic code might also handle the Enter event. that would result in double click.
+      if ($item && ($item.is('a') || $item.is('.js-aria-clickable'))) $item[0].click();
     }
   });