diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 02598dc3dc4d2..b2b7b206df277 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -1338,6 +1338,7 @@ issues.draft_title = Draft
 issues.num_comments = %d comments
 issues.commented_at = `commented <a href="#%s">%s</a>`
 issues.delete_comment_confirm = Are you sure you want to delete this comment?
+issues.context.options_button = Comment Options
 issues.context.copy_link = Copy Link
 issues.context.quote_reply = Quote Reply
 issues.context.reference_issue = Reference in new issue
diff --git a/routers/web/repo/issue.go b/routers/web/repo/issue.go
index 318d9af70354a..d890d4fb03e16 100644
--- a/routers/web/repo/issue.go
+++ b/routers/web/repo/issue.go
@@ -2900,6 +2900,7 @@ func ChangeIssueReaction(ctx *context.Context) {
 		"ctx":       ctx.Data,
 		"ActionURL": fmt.Sprintf("%s/issues/%d/reactions", ctx.Repo.RepoLink, issue.Index),
 		"Reactions": issue.Reactions.GroupByType(),
+		"IdPrefix":  issue.HashTag(),
 	})
 	if err != nil {
 		ctx.ServerError("ChangeIssueReaction.HTMLString", err)
@@ -3002,6 +3003,7 @@ func ChangeCommentReaction(ctx *context.Context) {
 		"ctx":       ctx.Data,
 		"ActionURL": fmt.Sprintf("%s/comments/%d/reactions", ctx.Repo.RepoLink, comment.ID),
 		"Reactions": comment.Reactions.GroupByType(),
+		"IdPrefix":  comment.HashTag(),
 	})
 	if err != nil {
 		ctx.ServerError("ChangeCommentReaction.HTMLString", err)
diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl
index 647c662d51ce6..3b84b3cea1f38 100644
--- a/templates/repo/diff/comments.tmpl
+++ b/templates/repo/diff/comments.tmpl
@@ -42,7 +42,7 @@
 						</div>
 					{{end}}
 				{{end}}
-				{{template "repo/issue/view_content/add_reaction" Dict "ctx" $.root "ActionURL" (Printf "%s/comments/%d/reactions" $.root.RepoLink .ID)}}
+				{{template "repo/issue/view_content/add_reaction" Dict "ctx" $.root "ActionURL" (Printf "%s/comments/%d/reactions" $.root.RepoLink .ID) "IdPrefix" .HashTag}}
 				{{template "repo/issue/view_content/context_menu" Dict "ctx" $.root "item" . "delete" true "issue" false "diff" true "IsCommentPoster" (and $.root.IsSigned (eq $.root.SignedUserID .PosterID))}}
 			</div>
 		</div>
@@ -60,7 +60,7 @@
 		{{$reactions := .Reactions.GroupByType}}
 		{{if $reactions}}
 			<div class="ui attached segment reactions">
-			{{template "repo/issue/view_content/reactions" Dict "ctx" $.root "ActionURL" (Printf "%s/comments/%d/reactions" $.root.RepoLink .ID) "Reactions" $reactions}}
+			{{template "repo/issue/view_content/reactions" Dict "ctx" $.root "ActionURL" (Printf "%s/comments/%d/reactions" $.root.RepoLink .ID) "Reactions" $reactions "IdPrefix" .HashTag}}
 			</div>
 		{{end}}
 	</div>
diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index 0cb74e8182904..15d04241b366e 100644
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -64,7 +64,7 @@
 								{{end}}
 							{{end}}
 							{{if not $.Repository.IsArchived}}
-								{{template "repo/issue/view_content/add_reaction" Dict "ctx" $ "ActionURL" (Printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index)}}
+								{{template "repo/issue/view_content/add_reaction" Dict "ctx" $ "ActionURL" (Printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index) "IdPrefix" .Issue.HashTag}}
 								{{template "repo/issue/view_content/context_menu" Dict "ctx" $ "item" .Issue "delete" false "issue" true "diff" false "IsCommentPoster" $.IsIssuePoster}}
 							{{end}}
 						</div>
@@ -86,7 +86,7 @@
 					{{$reactions := .Issue.Reactions.GroupByType}}
 					{{if $reactions}}
 						<div class="ui attached segment reactions">
-							{{template "repo/issue/view_content/reactions" Dict "ctx" $ "ActionURL" (Printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index) "Reactions" $reactions}}
+							{{template "repo/issue/view_content/reactions" Dict "ctx" $ "ActionURL" (Printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index) "Reactions" $reactions "IdPrefix" .Issue.HashTag}}
 						</div>
 					{{end}}
 				</div>
diff --git a/templates/repo/issue/view_content/add_reaction.tmpl b/templates/repo/issue/view_content/add_reaction.tmpl
index 9bd9022d28abf..a6e51b57f26c9 100644
--- a/templates/repo/issue/view_content/add_reaction.tmpl
+++ b/templates/repo/issue/view_content/add_reaction.tmpl
@@ -1,13 +1,13 @@
 {{if .ctx.IsSigned}}
-<div class="item action ui pointing select-reaction dropdown top right" data-action-url="{{.ActionURL}}">
-	<a class="add-reaction">
+<div class="item action ui pointing select-reaction dropdown top right" role="menu" aria-haspopup="menu" aria-expanded="false" aria-label="{{.ctx.locale.Tr "repo.pick_reaction"}}" tabindex="0" data-action-url="{{.ActionURL}}" data-aria-templated="true">
+	<a class="add-reaction" role="none" aria-hidden="true">
 		{{svg "octicon-smiley"}}
 	</a>
 	<div class="menu">
-		<div class="header">{{.ctx.locale.Tr "repo.pick_reaction"}}</div>
-		<div class="divider"></div>
-		{{range $value := AllowedReactions}}
-			<div class="item reaction tooltip" data-content="{{$value}}">{{ReactionToEmoji $value}}</div>
+		<div class="header" role="none">{{.ctx.locale.Tr "repo.pick_reaction"}}</div>
+		<div class="divider" role="none"></div>
+		{{range $index, $value := AllowedReactions}}
+			<div id="{{$.IdPrefix}}-reaction-option-{{$index}}" class="item reaction tooltip" role="menuitem" aria-label="{{$value}}" tabindex="-1" data-content="{{$value}}">{{ReactionToEmoji $value}}</div>
 		{{end}}
 	</div>
 </div>
diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index e9b7172d1b324..e126880bb70e4 100644
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -64,7 +64,7 @@
 								</div>
 							{{end}}
 							{{if not $.Repository.IsArchived}}
-								{{template "repo/issue/view_content/add_reaction" Dict "ctx" $ "ActionURL" (Printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
+								{{template "repo/issue/view_content/add_reaction" Dict "ctx" $ "ActionURL" (Printf "%s/comments/%d/reactions" $.RepoLink .ID) "IdPrefix" .HashTag}}
 								{{template "repo/issue/view_content/context_menu" Dict "ctx" $ "item" . "delete" true "issue" true "diff" false "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}}
 							{{end}}
 						</div>
@@ -86,7 +86,7 @@
 					{{$reactions := .Reactions.GroupByType}}
 					{{if $reactions}}
 						<div class="ui attached segment reactions">
-							{{template "repo/issue/view_content/reactions" Dict "ctx" $ "ActionURL" (Printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
+							{{template "repo/issue/view_content/reactions" Dict "ctx" $ "ActionURL" (Printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions "IdPrefix" .HashTag}}
 						</div>
 					{{end}}
 				</div>
@@ -436,8 +436,8 @@
 										</div>
 									{{end}}
 									{{if not $.Repository.IsArchived}}
-											{{template "repo/issue/view_content/add_reaction" Dict "ctx" $ "ActionURL" (Printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
-											{{template "repo/issue/view_content/context_menu" Dict "ctx" $ "item" . "delete" true "issue" true "diff" false "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}}
+										{{template "repo/issue/view_content/add_reaction" Dict "ctx" $ "ActionURL" (Printf "%s/comments/%d/reactions" $.RepoLink .ID) "IdPrefix" .HashTag}}
+										{{template "repo/issue/view_content/context_menu" Dict "ctx" $ "item" . "delete" true "issue" true "diff" false "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}}
 									{{end}}
 							</div>
 						</div>
@@ -458,7 +458,7 @@
 						{{$reactions := .Reactions.GroupByType}}
 						{{if $reactions}}
 							<div class="ui attached segment reactions">
-									{{template "repo/issue/view_content/reactions" Dict "ctx" $ "ActionURL" (Printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
+								{{template "repo/issue/view_content/reactions" Dict "ctx" $ "ActionURL" (Printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions "IdPrefix" .HashTag}}
 							</div>
 						{{end}}
 					</div>
@@ -563,7 +563,7 @@
 																	</div>
 																{{end}}
 																{{if not $.Repository.IsArchived}}
-																	{{template "repo/issue/view_content/add_reaction" Dict "ctx" $ "ActionURL" (Printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
+																	{{template "repo/issue/view_content/add_reaction" Dict "ctx" $ "ActionURL" (Printf "%s/comments/%d/reactions" $.RepoLink .ID) "IdPrefix" .HashTag}}
 																	{{template "repo/issue/view_content/context_menu" Dict "ctx" $ "item" . "delete" true "issue" true "diff" true "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}}
 																{{end}}
 															</div>
@@ -582,7 +582,7 @@
 														{{$reactions := .Reactions.GroupByType}}
 														{{if $reactions}}
 															<div class="ui attached segment reactions">
-																{{template "repo/issue/view_content/reactions" Dict "ctx" $ "ActionURL" (Printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
+																{{template "repo/issue/view_content/reactions" Dict "ctx" $ "ActionURL" (Printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions "IdPrefix" .HashTag}}
 															</div>
 														{{end}}
 													</div>
diff --git a/templates/repo/issue/view_content/context_menu.tmpl b/templates/repo/issue/view_content/context_menu.tmpl
index 45dd08bf61035..24bec44e673d8 100644
--- a/templates/repo/issue/view_content/context_menu.tmpl
+++ b/templates/repo/issue/view_content/context_menu.tmpl
@@ -1,6 +1,6 @@
 {{if .ctx.IsSigned}}
-<div class="item action ui pointing custom dropdown top right context-dropdown">
-	<a class="context-menu">
+<div class="item action ui pointing custom dropdown top right context-dropdown" role="menu" aria-haspopup="menu" aria-expanded="false" aria-label="{{.locale.Tr "repo.issues.context.options_button"}}" tabindex="0" data-aria-templated="true">
+	<a class="context-menu" role="none" aria-hidden="true">
 		{{svg "octicon-kebab-horizontal"}}
 	</a>
 	<div class="menu">
@@ -10,16 +10,16 @@
 		{{else}}
 			{{$referenceUrl = Printf "%s/files#%s" .ctx.Issue.HTMLURL .item.HashTag}}
 		{{end}}
-		<div class="item context" data-clipboard-text="{{$referenceUrl}}">{{.ctx.locale.Tr "repo.issues.context.copy_link"}}</div>
-		<div class="item context quote-reply {{if .diff}}quote-reply-diff{{end}}" data-target="{{.item.ID}}">{{.ctx.locale.Tr "repo.issues.context.quote_reply"}}</div>
+		<div id="{{.item.HashTag}}-option-1" class="item context" role="menuitem" tabindex="-1" data-clipboard-text="{{$referenceUrl}}">{{.ctx.locale.Tr "repo.issues.context.copy_link"}}</div>
+		<div id="{{.item.HashTag}}-option-2" class="item context quote-reply {{if .diff}}quote-reply-diff{{end}}" role="menuitem" tabindex="-1" data-target="{{.item.ID}}">{{.ctx.locale.Tr "repo.issues.context.quote_reply"}}</div>
 		{{if not .ctx.UnitIssuesGlobalDisabled}}
-			<div class="item context reference-issue" data-target="{{.item.ID}}" data-modal="#reference-issue-modal" data-poster="{{.item.Poster.GetDisplayName}}" data-poster-username="{{.item.Poster.Name}}" data-reference="{{$referenceUrl}}">{{.ctx.locale.Tr "repo.issues.context.reference_issue"}}</div>
+			<div id="{{.item.HashTag}}-option-3" class="item context reference-issue" role="menuitem" tabindex="-1" data-target="{{.item.ID}}" data-modal="#reference-issue-modal" data-poster="{{.item.Poster.GetDisplayName}}" data-poster-username="{{.item.Poster.Name}}" data-reference="{{$referenceUrl}}">{{.ctx.locale.Tr "repo.issues.context.reference_issue"}}</div>
 		{{end}}
 		{{if or .ctx.Permission.IsAdmin .IsCommentPoster .ctx.HasIssuesOrPullsWritePermission}}
-			<div class="divider"></div>
-			<div class="item context edit-content">{{.ctx.locale.Tr "repo.issues.context.edit"}}</div>
+			<div class="divider" role="none"></div>
+			<div id="{{.item.HashTag}}-option-4" class="item context edit-content" role="menuitem" tabindex="-1">{{.ctx.locale.Tr "repo.issues.context.edit"}}</div>
 			{{if .delete}}
-				<div class="item context delete-comment" data-comment-id={{.item.HashTag}} data-url="{{.ctx.RepoLink}}/comments/{{.item.ID}}/delete" data-locale="{{.ctx.locale.Tr "repo.issues.delete_comment_confirm"}}">{{.ctx.locale.Tr "repo.issues.context.delete"}}</div>
+				<div id="{{.item.HashTag}}-option-5" class="item context delete-comment" role="menuitem" tabindex="-1" data-comment-id={{.item.HashTag}} data-url="{{.ctx.RepoLink}}/comments/{{.item.ID}}/delete" data-locale="{{.ctx.locale.Tr "repo.issues.delete_comment_confirm"}}">{{.ctx.locale.Tr "repo.issues.context.delete"}}</div>
 			{{end}}
 		{{end}}
 	</div>
diff --git a/templates/repo/issue/view_content/reactions.tmpl b/templates/repo/issue/view_content/reactions.tmpl
index c0a925d18bf4c..d2362d49bfc60 100644
--- a/templates/repo/issue/view_content/reactions.tmpl
+++ b/templates/repo/issue/view_content/reactions.tmpl
@@ -5,5 +5,5 @@
 	</a>
 {{end}}
 {{if AllowedReactions}}
-	{{template "repo/issue/view_content/add_reaction" Dict "ctx" $.ctx "ActionURL" .ActionURL}}
+	{{template "repo/issue/view_content/add_reaction" Dict "ctx" $.ctx "ActionURL" .ActionURL "IdPrefix" (Printf "%s-inline" .IdPrefix)}}
 {{end}}
diff --git a/web_src/js/features/aria.js b/web_src/js/features/aria.js
index 162843678bb45..76076d378080f 100644
--- a/web_src/js/features/aria.js
+++ b/web_src/js/features/aria.js
@@ -33,43 +33,48 @@ function attachOneDropdownAria($dropdown) {
   const $focusable = $textSearch.length ? $textSearch : $dropdown; // see comment below
   if (!$focusable.length) return;
 
-  // prepare menu list
   const $menu = $dropdown.find('> .menu');
-  if (!$menu.attr('id')) $menu.attr('id', generateAriaId());
-
-  // dropdown has 2 different focusing behaviors
-  // * with search input: the input is focused, and it works perfectly with aria-activedescendant pointing another sibling element.
-  // * without search input (but the readonly text), the dropdown itself is focused. then the aria-activedescendant points to the element inside dropdown
-
-  // expected user interactions for dropdown with aria support:
-  // * user can use Tab to focus in the dropdown, then the dropdown menu (list) will be shown
-  // * user presses Tab on the focused dropdown to move focus to next sibling focusable element (but not the menu item)
-  // * user can use arrow key Up/Down to navigate between menu items
-  // * when user presses Enter:
-  //    - if the menu item is clickable (eg: <a>), then trigger the click event
-  //    - otherwise, the dropdown control (low-level code) handles the Enter event, hides the dropdown menu
-
-  // TODO: multiple selection is not supported yet.
-
-  $focusable.attr({
-    'role': 'menu',
-    'aria-haspopup': 'menu',
-    'aria-controls': $menu.attr('id'),
-    'aria-expanded': 'false',
-  });
+  if (!$dropdown.attr('data-aria-templated')) {
+    // prepare menu list
+    if (!$menu.attr('id')) $menu.attr('id', generateAriaId());
+
+    // dropdown has 2 different focusing behaviors
+    // * with search input: the input is focused, and it works perfectly with aria-activedescendant pointing another sibling element.
+    // * without search input (but the readonly text), the dropdown itself is focused. then the aria-activedescendant points to the element inside dropdown
+
+    // expected user interactions for dropdown with aria support:
+    // * user can use Tab to focus in the dropdown, then the dropdown menu (list) will be shown
+    // * user presses Tab on the focused dropdown to move focus to next sibling focusable element (but not the menu item)
+    // * user can use arrow key Up/Down to navigate between menu items
+    // * when user presses Enter:
+    //    - if the menu item is clickable (eg: <a>), then trigger the click event
+    //    - otherwise, the dropdown control (low-level code) handles the Enter event, hides the dropdown menu
+
+    // TODO: multiple selection is not supported yet.
+
+    $focusable.attr({
+      'role': 'menu',
+      'aria-haspopup': 'menu',
+      'aria-controls': $menu.attr('id'),
+      'aria-expanded': 'false',
+    });
+
+    if ($dropdown.attr('data-content') && !$dropdown.attr('aria-label')) {
+      $dropdown.attr('aria-label', $dropdown.attr('data-content'));
+    }
 
-  if ($dropdown.attr('data-content') && !$dropdown.attr('aria-label')) {
-    $dropdown.attr('aria-label', $dropdown.attr('data-content'));
+    $menu.find('> .item').each((_, item) => {
+      prepareMenuItem($(item));
+    });
   }
-
-  $menu.find('> .item').each((_, item) => {
-    prepareMenuItem($(item));
-  });
-
   // update aria attributes according to current active/selected item
   const refreshAria = () => {
     const isMenuVisible = !$menu.is('.hidden') && !$menu.is('.animating.out');
-    $focusable.attr('aria-expanded', isMenuVisible ? 'true' : 'false');
+    if (isMenuVisible) {
+      $focusable.attr('aria-expanded', 'true');
+    } else {
+      $focusable.removeAttr('aria-expanded');
+    }
 
     let $active = $menu.find('> .item.active');
     if (!$active.length) $active = $menu.find('> .item.selected'); // it's strange that we need this fallback at the moment
@@ -83,7 +88,10 @@ function attachOneDropdownAria($dropdown) {
     if (e.key === 'Enter') {
       const $item = $dropdown.dropdown('get item', $dropdown.dropdown('get value'));
       // 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 ($item) $item[0].click();
+    } else if (e.key === 'ESC') {
+      $dropdown.dropdown('hide');
+      $dropdown.removeAttr('aria-expanded');
     }
   });