diff --git a/app/assets/stylesheets/views/article.scss b/app/assets/stylesheets/views/article.scss
index aa3f5e8c8..03236d868 100644
--- a/app/assets/stylesheets/views/article.scss
+++ b/app/assets/stylesheets/views/article.scss
@@ -146,6 +146,15 @@
   flex-direction: row;
   align-items: center;
 
+  .js-focus-visible &.focus-visible:focus,
+  &:is(label):focus-within {
+    background-color: var(--button-ghost-bg-hover);
+    border-color: transparent;
+    border-radius: 1000px;
+    box-shadow: none;
+    color: var(--button-ghost-color-hover);
+  }
+
   @media (min-width: $breakpoint-m) {
     flex-direction: column;
   }
@@ -248,6 +257,7 @@
 // This overrides some of the styles for the temporarily feature-flaged
 .reaction-drawer .crayons-reaction {
   border: 1px solid var(--card-bg);
+  border-radius: 20px;
   flex-direction: column;
 
   &.user-activated {
@@ -260,6 +270,12 @@
       box-shadow: none;
     }
   }
+
+  .js-focus-visible &.focus-visible:focus,
+  &:is(label):focus-within {
+    box-shadow: var(--focus-ring);
+    outline: 0;
+  }
 }
 
 .reaction-drawer .crayons-reaction:hover {
diff --git a/app/views/articles/_multiple_reactions.html.erb b/app/views/articles/_multiple_reactions.html.erb
index 466d77be8..45317e9fb 100644
--- a/app/views/articles/_multiple_reactions.html.erb
+++ b/app/views/articles/_multiple_reactions.html.erb
@@ -14,6 +14,9 @@
       <span class="crayons-reaction__count" id="reaction_total_count">
         <span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span>
       </span>
+      <span class="crayons-tooltip__content">
+        <%= t("views.reactions.drawer_button") %>
+      </span>
   </button>
 
   <div class="reaction-drawer" aria-expanded="false">