feat: add tab navigation to single tile component (#6)

ArkEcosystem · Oct 8, 2021 · 3bf6705 · 3bf6705
1 parent 9911f55
commit 3bf6705
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/resources/assets/css/_components.css b/resources/assets/css/_components.css
@@ -337,7 +337,7 @@
 }
 
 .tile-selection-single {
-    @apply relative py-4 border-2 cursor-pointer select-none rounded-xl border-theme-primary-100 transition-default;
+    @apply relative py-4 border-2 cursor-pointer select-none rounded-xl border-theme-primary-100 transition-default outline-none focus:ring-2 focus:ring-theme-primary-500;
 }
 
 .tile-selection-option:hover,

diff --git a/resources/views/inputs/includes/tile-selection-option.blade.php b/resources/views/inputs/includes/tile-selection-option.blade.php
@@ -10,7 +10,10 @@ class="flex relative flex-col"
     <label
         dusk="tile-selection-label-{{ $option['id'] }}"
         for="{{ $id.'-'.$option['id'] }}"
-        wire:key="tile-selection-option-{{ $id.'-'.$option['id'] }}"
+        @if ($single)
+            tabindex="0"
+            x-on:keydown.space.prevent="$event.target.querySelector('input').click()"
+        @endif
         @class([
             'tile-selection-single' => $single,
             'tile-selection-option' => ! $single,
@@ -26,6 +29,7 @@ class="flex relative flex-col"
     >
         @if ($single)
             <input
+                tabindex="-1"
                 id="{{ $id.'-'.$option['id'] }}"
                 name="{{ $id }}"
                 type="radio"