From 3bf670588c1eea24ec3b8e12ecf1fba4931fe0c4 Mon Sep 17 00:00:00 2001
From: Alfonso Bribiesca <alfonsobries@gmail.com>
Date: Fri, 8 Oct 2021 07:03:48 -0500
Subject: [PATCH] feat: add tab navigation to single tile component (#6)

---
 resources/assets/css/_components.css                        | 2 +-
 .../views/inputs/includes/tile-selection-option.blade.php   | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/resources/assets/css/_components.css b/resources/assets/css/_components.css
index 4fa2105c6..9517fcd2c 100644
--- 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
index 318e4d989..5b7289b71 100644
--- 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"