make close button keyboard accessible (#4399)

add tabindex and enter handler to close span, add css cusor for icon
ideacrew · Sep 16, 2024 · 551f526 · 551f526
1 parent 143badc
commit 551f526
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/app/javascript/css/alerts.scss b/app/javascript/css/alerts.scss
@@ -154,6 +154,7 @@
   height: 18px;
   width: 18px;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' fill='gray' /%3E%3C/svg%3E");
+  cursor: pointer;
   .sr-only {
     color: var(--default-font-color);
   }

diff --git a/components/benefit_sponsors/app/views/benefit_sponsors/shared/inboxes/_message_list.html.erb b/components/benefit_sponsors/app/views/benefit_sponsors/shared/inboxes/_message_list.html.erb
@@ -8,13 +8,13 @@
       <%= l10n("broker_agencies.message_deleted") %>
     </div>
     <div class="d-flex pl-1">
-      <span class="close-icon icon icon-sm pr-1" alt='<%= l10n("close") %>' href="javascript;">&nbsp;<span class="sr-only"><%= l10n("close") %></span></span>
+      <span id="close" class="close-icon icon icon-sm pr-1" alt='<%= l10n("close") %>' href="javascript;" tabindex="0" onkeydown="handleButtonKeyDown(event, 'close')"><span class="sr-only"><%= l10n("close") %></span></span>
     </div>
   </div>
 </div>
 
 <script>
-  $(".close-icon").on('click', function() {
+  $("#close").on('click', function() {
     $("#messageDeleted").addClass("hidden");
   });
 </script>