impr(accesibility): use button element instead of class button

monkeytypegame · Feb 28, 2024 · c1c6972 · c1c6972
1 parent 35b87c4
commit c1c6972
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
@@ -1685,6 +1685,7 @@
     .accountAlerts > .deleteAll {
       font-size: 0.75em;
       margin-bottom: 1rem;
+      width: 100%;
       .fas {
         margin-right: 0.25em;
       }
@@ -1710,7 +1711,7 @@
       .item {
         display: grid;
         grid-template-areas: "indicator title buttons" "indicator body buttons";
-        grid-template-columns: 0.25rem auto 1rem;
+        grid-template-columns: 0.25rem auto max-content;
         gap: 0.25rem 0.5rem;
         .indicator {
           grid-area: indicator;
@@ -1752,15 +1753,14 @@
           transition: 0.125s;
           align-items: center;
           align-content: center;
-          .button {
-            font-size: 0.75rem;
-            padding: 0.5em;
-            line-height: 1.25em;
+          button {
+            font-size: 0.8em;
             height: 100%;
             display: grid;
           }
         }
-        &:hover {
+        &:hover,
+        &:focus-within {
           .buttons {
             opacity: 1;
           }

diff --git a/frontend/src/ts/elements/alerts.ts b/frontend/src/ts/elements/alerts.ts
@@ -167,6 +167,7 @@ async function show(): Promise<void> {
         },
         100,
         () => {
+          wrapperDialog.focus();
           if (isAuthenticated()) {
             void getAccountAlerts();
           }
@@ -254,12 +255,12 @@ async function getAccountAlerts(): Promise<void> {
         <div class="buttons">
           ${
             ie.rewards.length > 0 && !ie.read
-              ? `<div class="markReadAlert textButton" aria-label="Claim" data-balloon-pos="left"><i class="fas fa-gift"></i></div>`
+              ? `<button class="markReadAlert textButton" aria-label="Claim" data-balloon-pos="left"><i class="fas fa-gift"></i></button>`
               : ``
           }
           ${
             (ie.rewards.length > 0 && ie.read) || ie.rewards.length === 0
-              ? `<div class="deleteAlert textButton" aria-label="Delete" data-balloon-pos="left"><i class="fas fa-trash"></i></div>`
+              ? `<button class="deleteAlert textButton" aria-label="Delete" data-balloon-pos="left"><i class="fas fa-trash"></i></button>`
               : ``
           }
         </div>
@@ -381,7 +382,7 @@ function markReadAlert(id: string): void {
   item
     .find(".buttons")
     .append(
-      `<div class="deleteAlert textButton" aria-label="Delete" data-balloon-pos="left"><i class="fas fa-trash"></i></div>`
+      `<button class="deleteAlert textButton" aria-label="Delete" data-balloon-pos="left"><i class="fas fa-trash"></i></button>`
     );
   item.find(".rewards").animate(
     {