From 01b493ad00c6100f08c922cec7898bf45d2eea8d Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Tue, 26 Mar 2024 14:47:24 +1100
Subject: [PATCH] fix: tab navigation in modals

---
 ts/components/basic/SessionRadio.tsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/ts/components/basic/SessionRadio.tsx b/ts/components/basic/SessionRadio.tsx
index 1df1e0f29b0..ca54b7e94f2 100644
--- a/ts/components/basic/SessionRadio.tsx
+++ b/ts/components/basic/SessionRadio.tsx
@@ -2,6 +2,11 @@ import React, { ChangeEvent } from 'react';
 import styled, { CSSProperties } from 'styled-components';
 import { Flex } from './Flex';
 
+const StyledButton = styled.button<{ disabled: boolean }>`
+  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
+  min-height: 30px;
+`;
+
 const StyledInput = styled.input<{
   filledSize: number;
   outlineOffset: number;
@@ -9,7 +14,6 @@ const StyledInput = styled.input<{
 }>`
   opacity: 0;
   position: absolute;
-  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
   width: ${props => props.filledSize + props.outlineOffset}px;
   height: ${props => props.filledSize + props.outlineOffset}px;
 
@@ -71,7 +75,7 @@ export const SessionRadio = (props: SessionRadioProps) => {
     style,
   } = props;
 
-  const clickHandler = (e: ChangeEvent<any>) => {
+  const clickHandler = (e: React.SyntheticEvent<any>) => {
     if (!disabled && onClick) {
       // let something else catch the event if our click handler is not set
       e.stopPropagation();
@@ -83,7 +87,15 @@ export const SessionRadio = (props: SessionRadioProps) => {
   const outlineOffset = 2;
 
   return (
-    <button>
+    <StyledButton
+      onKeyDown={e => {
+        if (e.code === 'Space') {
+          clickHandler(e);
+        }
+      }}
+      onClick={clickHandler}
+      disabled={disabled}
+    >
       <Flex
         container={true}
         flexDirection={radioPosition === 'left' ? 'row' : 'row-reverse'}
@@ -97,6 +109,7 @@ export const SessionRadio = (props: SessionRadioProps) => {
           aria-checked={active}
           checked={active}
           onChange={clickHandler}
+          tabIndex={-1} // clickHandler is on the parent button, so we need to skip this input while pressing Tab
           filledSize={filledSize * 2}
           outlineOffset={outlineOffset}
           disabled={disabled}
@@ -115,7 +128,7 @@ export const SessionRadio = (props: SessionRadioProps) => {
           {label}
         </StyledLabel>
       </Flex>
-    </button>
+    </StyledButton>
   );
 };