fix tests

interledger · Jan 23, 2024 · cbc49da · cbc49da
1 parent 779efcf
commit cbc49da
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 17 deletions.
diff --git a/...components/__tests__/radio-group-test.tsx → ...components/__tests__/radio-group.test.tsx b/...components/__tests__/radio-group-test.tsx → ...components/__tests__/radio-group.test.tsx
@@ -14,14 +14,14 @@ describe('RadioGroup', () => {
       <RadioGroup variant="inline" items={radioItems} name="radioName" />,
     )
 
-    expect(queryByRole('tabpanel')).toBeInTheDocument()
-    expect(queryByRole('tabpanel')).toHaveClass('flex-row')
+    expect(queryByRole('radiogroup')).toBeInTheDocument()
+    expect(queryByRole('radiogroup')).toHaveClass('flex-row')
   })
 
   it('renders radio group correctly with items', () => {
     const { getByRole } = render(<RadioGroup items={radioItems} name="radioGroup" />)
 
-    const radioGroup = getByRole('tabpanel')
+    const radioGroup = getByRole('radiogroup')
     expect(radioGroup).toBeInTheDocument()
     expect(radioGroup.childNodes.length).toBe(2) // Ensure two radio buttons are rendered
   })

diff --git a/src/components/radio-group.tsx b/src/components/radio-group.tsx
@@ -44,13 +44,21 @@ export const Radio = ({
         disabled={disabled}
         value={value}
         name={name}
-        className="hidden"
+        className="hidden peer"
         onChange={onChange}
         checked={checked}
+        aria-checked={checked}
       />
 
-      <label htmlFor={inputId} className="flex items-center">
-        <span className="w-6 h-6 inline-block rounded-full border-2 border-base" />
+      <label htmlFor={inputId} className="group flex items-center">
+        <span
+          className={`w-6 h-6 inline-block rounded-full border-2 border-base
+          peer-checked:group-[]:bg-primary
+          peer-checked:group-[]:border-blue-500
+          peer-checked:group-[]:ring-white
+          peer-checked:group-[]:ring-inset
+          peer-checked:group-[]:ring-4`}
+        />
         {label ? <p className="text-base text-medium leading-6 ms-2">{label}</p> : ''}
       </label>
     </div>
@@ -95,7 +103,7 @@ export const RadioGroup = ({
     if (event.code === 'ArrowRight' || event.code === 'ArrowDown') {
       event.preventDefault()
 
-      const nextIndex = selected > 0 ? selected + (1 % items.length) : 1
+      const nextIndex = (selected >= 0 ? selected + 1 : 1) % items.length
       setSelected(nextIndex)
     } else if (event.code === 'ArrowLeft' || event.code === 'ArrowUp') {
       event.preventDefault()
@@ -107,7 +115,6 @@ export const RadioGroup = ({
 
   useEffect(() => {
     const handleKeyPress = (event: any) => {
-      console.log('handle key press', event, selected)
       if (selected === -1 && (event.code === 'Enter' || event.code === 'Space')) {
         setSelected(0)
       }
@@ -122,7 +129,7 @@ export const RadioGroup = ({
   return (
     <div
       tabIndex={-1}
-      className={cn(radioGroupVariants({ variant, fullWidth }), className, 'outline-none')}
+      className={cn(radioGroupVariants({ variant, fullWidth }), className)}
       onKeyDown={handleKeyDown}
       role="radiogroup">
       {items.map((item, index) => (

diff --git a/src/popup/index.css b/src/popup/index.css
@@ -32,11 +32,3 @@
     --popup-height: 559px;
   }
 }
-
-input[type='radio']:checked + label span,
-input[type='radio']:checked + span {
-  @apply bg-primary;
-  background-color: bg-primary;
-  box-shadow: 0px 0px 0px 4px white inset;
-  border-color: #3490dc;
-}