From 4f86a34c836b193df9ab96dcdeffd6596ef3cda6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20Tron=C3=AD=C4=8Dek?= <filip@gitpod.io>
Date: Tue, 28 Mar 2023 12:57:20 +0000
Subject: [PATCH 1/3] Add focus ring for `<SelectableCardSolid>`

---
 .../src/components/SelectableCardSolid.tsx    | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/components/dashboard/src/components/SelectableCardSolid.tsx b/components/dashboard/src/components/SelectableCardSolid.tsx
index 90d7fc98007033..8e51fcaa6d20a0 100644
--- a/components/dashboard/src/components/SelectableCardSolid.tsx
+++ b/components/dashboard/src/components/SelectableCardSolid.tsx
@@ -4,6 +4,8 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
+import { useState } from "react";
+
 export interface SelectableCardSolidProps {
     title: string;
     selected: boolean;
@@ -13,9 +15,21 @@ export interface SelectableCardSolidProps {
 }
 
 function SelectableCardSolid(props: SelectableCardSolidProps) {
+    const [isFocused, setIsFocused] = useState(false);
+
+    const handleFocus = () => {
+        setIsFocused(true);
+    };
+
+    const handleBlur = () => {
+        setIsFocused(false);
+    };
+
     return (
         <div
             className={`rounded-xl px-3 py-3 flex flex-col cursor-pointer group transition ease-in-out ${
+                isFocused ? "focus:ring-2 focus:ring-blue-500" : ""
+            } ${
                 props.selected
                     ? "bg-gray-800 dark:bg-gray-100"
                     : "bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700"
@@ -31,7 +45,13 @@ function SelectableCardSolid(props: SelectableCardSolidProps) {
                 >
                     {props.title}
                 </p>
-                <input className="opacity-0" type="radio" checked={props.selected} />
+                <input
+                    className="opacity-0"
+                    type="radio"
+                    checked={props.selected}
+                    onFocus={handleFocus}
+                    onBlur={handleBlur}
+                />
             </div>
             {props.children}
         </div>

From 65208565d6ed4a634fb2e8bc6249fd087ab8bb73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20Tron=C3=AD=C4=8Dek?= <filip@gitpod.io>
Date: Thu, 30 Mar 2023 14:33:14 +0000
Subject: [PATCH 2/3] Fix Selectable card focus

---
 components/dashboard/src/components/SelectableCardSolid.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dashboard/src/components/SelectableCardSolid.tsx b/components/dashboard/src/components/SelectableCardSolid.tsx
index 8e51fcaa6d20a0..f627e4e98f31df 100644
--- a/components/dashboard/src/components/SelectableCardSolid.tsx
+++ b/components/dashboard/src/components/SelectableCardSolid.tsx
@@ -28,7 +28,7 @@ function SelectableCardSolid(props: SelectableCardSolidProps) {
     return (
         <div
             className={`rounded-xl px-3 py-3 flex flex-col cursor-pointer group transition ease-in-out ${
-                isFocused ? "focus:ring-2 focus:ring-blue-500" : ""
+                isFocused ? "ring-2 ring-blue-500" : ""
             } ${
                 props.selected
                     ? "bg-gray-800 dark:bg-gray-100"

From c3feb5a7632ef70546b0bf732a73985fa5e9884a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20Tron=C3=AD=C4=8Dek?= <filip@gitpod.io>
Date: Thu, 30 Mar 2023 16:43:32 +0000
Subject: [PATCH 3/3] Make radio input aria-labelled

---
 components/dashboard/src/components/SelectableCardSolid.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/dashboard/src/components/SelectableCardSolid.tsx b/components/dashboard/src/components/SelectableCardSolid.tsx
index f627e4e98f31df..207bc12e9392fd 100644
--- a/components/dashboard/src/components/SelectableCardSolid.tsx
+++ b/components/dashboard/src/components/SelectableCardSolid.tsx
@@ -51,6 +51,7 @@ function SelectableCardSolid(props: SelectableCardSolidProps) {
                     checked={props.selected}
                     onFocus={handleFocus}
                     onBlur={handleBlur}
+                    aria-label={props.title}
                 />
             </div>
             {props.children}