From 321478682ca661c58f3fbc323fbbf49c92959a45 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Tue, 26 Mar 2024 14:08:56 +1100
Subject: [PATCH] fix: wrap radiobutton in buttons to focus is visible

---
 ts/components/SessionWrapperModal.tsx    |  8 ++-
 ts/components/basic/SessionButton.tsx    |  4 --
 ts/components/basic/SessionRadio.tsx     | 66 ++++++++++++------------
 ts/components/icon/SessionIconButton.tsx |  4 --
 4 files changed, 38 insertions(+), 44 deletions(-)

diff --git a/ts/components/SessionWrapperModal.tsx b/ts/components/SessionWrapperModal.tsx
index fd2aaef87..48e53219c 100644
--- a/ts/components/SessionWrapperModal.tsx
+++ b/ts/components/SessionWrapperModal.tsx
@@ -64,14 +64,18 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
   };
 
   return (
-    <FocusTrap focusTrapOptions={{ initialFocus: '#focus-trap-start' }}>
+    <FocusTrap focusTrapOptions={{ initialFocus: '#focus-trap-start-wrapper' }}>
       <div
         className={classNames('loki-dialog modal', additionalClassName || null)}
         onClick={handleClick}
         role="dialog"
       >
         {/* FocusTrap needs a button always mounted as a start, which is apparently not our case */}
-        <button id="focus-trap-start" style={{ opacity: 0, width: 0, height: 0 }} />
+        <div
+          role="button"
+          id="focus-trap-start-wrapper"
+          style={{ opacity: 0, width: 0, height: 0 }}
+        />
         <div className="session-confirm-wrapper">
           <div ref={modalRef} className="session-modal">
             {showHeader ? (
diff --git a/ts/components/basic/SessionButton.tsx b/ts/components/basic/SessionButton.tsx
index e996ab350..ca2ae7992 100644
--- a/ts/components/basic/SessionButton.tsx
+++ b/ts/components/basic/SessionButton.tsx
@@ -67,10 +67,6 @@ const StyledButton = styled.button<{
     'box-shadow: 0px 0px 6px var(--button-solid-shadow-color);'}
   border-radius: ${props => (props.buttonShape === SessionButtonShape.Round ? '17px' : '6px')};
 
-  :focus-within {
-    outline: 1px var(--primary-color) dashed;
-  }
-
   .session-icon {
     fill: var(--background-primary-color);
   }
diff --git a/ts/components/basic/SessionRadio.tsx b/ts/components/basic/SessionRadio.tsx
index ca4302d15..1df1e0f29 100644
--- a/ts/components/basic/SessionRadio.tsx
+++ b/ts/components/basic/SessionRadio.tsx
@@ -21,10 +21,6 @@ const StyledInput = styled.input<{
           ? props.selectedColor
           : 'var(--primary-color)'};
   }
-
-  :focus-within + label:before {
-    outline: 1px var(--primary-color) dashed;
-  }
 `;
 
 // NOTE (Will): We don't use a transition because it's too slow and creates flickering when changing buttons.
@@ -87,37 +83,39 @@ export const SessionRadio = (props: SessionRadioProps) => {
   const outlineOffset = 2;
 
   return (
-    <Flex
-      container={true}
-      flexDirection={radioPosition === 'left' ? 'row' : 'row-reverse'}
-      justifyContent={radioPosition === 'left' ? 'flex-start' : 'flex-end'}
-      style={{ ...style, position: 'relative' }}
-    >
-      <StyledInput
-        type="radio"
-        name={inputName || ''}
-        value={value}
-        aria-checked={active}
-        checked={active}
-        onChange={clickHandler}
-        filledSize={filledSize * 2}
-        outlineOffset={outlineOffset}
-        disabled={disabled}
-        data-testid={`input-${value.replaceAll(' ', '-')}`} // data-testid cannot have spaces
-      />
-      <StyledLabel
-        role="button"
-        onClick={clickHandler}
-        filledSize={filledSize - 1}
-        outlineOffset={outlineOffset}
-        beforeMargins={beforeMargins}
-        aria-label={label}
-        disabled={disabled}
-        data-testid={`label-${value}`}
+    <button>
+      <Flex
+        container={true}
+        flexDirection={radioPosition === 'left' ? 'row' : 'row-reverse'}
+        justifyContent={radioPosition === 'left' ? 'flex-start' : 'flex-end'}
+        style={{ ...style, position: 'relative' }}
       >
-        {label}
-      </StyledLabel>
-    </Flex>
+        <StyledInput
+          type="radio"
+          name={inputName || ''}
+          value={value}
+          aria-checked={active}
+          checked={active}
+          onChange={clickHandler}
+          filledSize={filledSize * 2}
+          outlineOffset={outlineOffset}
+          disabled={disabled}
+          data-testid={`input-${value.replaceAll(' ', '-')}`} // data-testid cannot have spaces
+        />
+        <StyledLabel
+          role="button"
+          onClick={clickHandler}
+          filledSize={filledSize - 1}
+          outlineOffset={outlineOffset}
+          beforeMargins={beforeMargins}
+          aria-label={label}
+          disabled={disabled}
+          data-testid={`label-${value}`}
+        >
+          {label}
+        </StyledLabel>
+      </Flex>
+    </button>
   );
 };
 
diff --git a/ts/components/icon/SessionIconButton.tsx b/ts/components/icon/SessionIconButton.tsx
index 2370da9d8..584dba0e7 100644
--- a/ts/components/icon/SessionIconButton.tsx
+++ b/ts/components/icon/SessionIconButton.tsx
@@ -37,10 +37,6 @@ const StyledSessionIconButton = styled.button<{ color?: string; isSelected?: boo
   &:hover svg path {
     ${props => !props.color && 'fill: var(--button-icon-stroke-hover-color);'}
   }
-
-  :focus-within {
-    outline: 1px var(--primary-color) dashed;
-  }
 `;
 
 // eslint-disable-next-line react/display-name