fix(webapp): fix badge focus (#8452)

* Verification badge is never a button

* Fix focus style of badges, removing weird outline

Instead of outline, increase size, like when hovered.

webapp/components/Badges.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="[badges.length === 2 && 'hc-badges-dual']" class="hc-badges">
     <component
-      :is="selectionMode ? 'button' : 'div'"
+      :is="selectionMode && index > 0 ? 'button' : 'div'"
       class="hc-badge-container"
       v-for="(badge, index) in badges"
       :key="index"
@@ -84,8 +84,10 @@ export default {
 
       transition: transform 0.1s ease-in;
 
-      &:hover {
+      &:hover,
+      &:focus-visible {
         transform: scale(1.1);
+        outline: none;
       }
     }
 

webapp/components/__snapshots__/Badges.spec.js.snap

@@ -43,7 +43,7 @@ exports[`Badges.vue with badges in selection mode clicking on second badge selec
     class="hc-badges"
     scale="1.2"
   >
-    <button
+    <div
       class="hc-badge-container"
     >
       <img
@@ -51,7 +51,7 @@ exports[`Badges.vue with badges in selection mode clicking on second badge selec
         src="/api/path/to/some/icon"
         title="Some description"
       />
-    </button>
+    </div>
     <button
       class="hc-badge-container selectable selected"
     >
@@ -80,7 +80,7 @@ exports[`Badges.vue with badges in selection mode clicking twice on second badge
     class="hc-badges"
     scale="1.2"
   >
-    <button
+    <div
       class="hc-badge-container"
     >
       <img
@@ -88,7 +88,7 @@ exports[`Badges.vue with badges in selection mode clicking twice on second badge
         src="/api/path/to/some/icon"
         title="Some description"
       />
-    </button>
+    </div>
     <button
       class="hc-badge-container selectable"
     >
@@ -117,7 +117,7 @@ exports[`Badges.vue with badges in selection mode renders 1`] = `
     class="hc-badges"
     scale="1.2"
   >
-    <button
+    <div
       class="hc-badge-container"
     >
       <img
@@ -125,7 +125,7 @@ exports[`Badges.vue with badges in selection mode renders 1`] = `
         src="/api/path/to/some/icon"
         title="Some description"
       />
-    </button>
+    </div>
     <button
       class="hc-badge-container selectable"
     >

webapp/pages/settings/__snapshots__/badges.spec.js.snap

@@ -25,7 +25,7 @@ exports[`badge settings with badges more badges available selecting an empty slo
         <div
           class="hc-badges"
         >
-          <button
+          <div
             class="hc-badge-container"
           >
             <img
@@ -33,7 +33,7 @@ exports[`badge settings with badges more badges available selecting an empty slo
               src="/api/verification/icon"
               title="Verification description"
             />
-          </button>
+          </div>
           <button
             class="hc-badge-container selectable"
           >
@@ -160,7 +160,7 @@ exports[`badge settings with badges no more badges available selecting an empty
         <div
           class="hc-badges"
         >
-          <button
+          <div
             class="hc-badge-container"
           >
             <img
@@ -168,7 +168,7 @@ exports[`badge settings with badges no more badges available selecting an empty
               src="/api/verification/icon"
               title="Verification description"
             />
-          </button>
+          </div>
           <button
             class="hc-badge-container selectable"
           >
@@ -242,7 +242,7 @@ exports[`badge settings with badges renders 1`] = `
         <div
           class="hc-badges"
         >
-          <button
+          <div
             class="hc-badge-container"
           >
             <img
@@ -250,7 +250,7 @@ exports[`badge settings with badges renders 1`] = `
               src="/api/verification/icon"
               title="Verification description"
             />
-          </button>
+          </div>
           <button
             class="hc-badge-container selectable"
           >
@@ -402,7 +402,7 @@ exports[`badge settings without badges renders 1`] = `
         <div
           class="hc-badges"
         >
-          <button
+          <div
             class="hc-badge-container"
           >
             <img
@@ -410,7 +410,7 @@ exports[`badge settings without badges renders 1`] = `
               src="/api/verification/icon"
               title="Verification description"
             />
-          </button>
+          </div>
         </div>
       </div>