fix: wrap radiobutton in buttons to focus is visible

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 ? (

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);
   }

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,6 +83,7 @@ export const SessionRadio = (props: SessionRadioProps) => {
   const outlineOffset = 2;
 
   return (
+    <button>
       <Flex
         container={true}
         flexDirection={radioPosition === 'left' ? 'row' : 'row-reverse'}
@@ -118,6 +115,7 @@ export const SessionRadio = (props: SessionRadioProps) => {
           {label}
         </StyledLabel>
       </Flex>
+    </button>
   );
 };
 

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