fix(Radio): update ordering of selectors for checked options

.changeset/serious-jars-sing.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Update ordering of selectors to improve rendering of checked Radio options

e2e/components/Radio.test.ts

@@ -2,74 +2,62 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-test.describe('Radio', () => {
-  test.describe('Default', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-radio--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
+const stories = [
+  {
+    title: 'Default',
+    id: 'components-radio--default',
+  },
+  {
+    title: 'Disabled',
+    id: 'components-radio-features--disabled',
+  },
+  {
+    title: 'With Caption',
+    id: 'components-radio-features--with-caption',
+  },
+  {
+    title: 'With Leading Visual',
+    id: 'components-radio-features--with-leading-visual',
+  },
+] as const
 
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Radio.Default.${theme}.png`)
-        })
-      })
-    }
-  })
+test.describe('Radio', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('default @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
 
-  test.describe('Disabled', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-radio-features--disabled',
-            globals: {
-              colorScheme: theme,
-            },
+            // Default state
+            expect(await page.screenshot()).toMatchSnapshot(`Radio.${story.title}.${theme}.png`)
           })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Radio.Disabled.${theme}.png`)
         })
-      })
-    }
-  })
+      }
+    })
+  }
 
-  test.describe('With Caption', () => {
+  test.describe('Checked', () => {
     for (const theme of themes) {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'components-radio-features--with-caption',
+            id: 'components-radio--playground',
             globals: {
               colorScheme: theme,
             },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Radio.With Caption.${theme}.png`)
-        })
-      })
-    }
-  })
-
-  test.describe('With Leading Visual', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-radio-features--with-leading-visual',
-            globals: {
-              colorScheme: theme,
+            args: {
+              checked: true,
             },
           })
 
           // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Radio.With Leading Visual.${theme}.png`)
+          expect(await page.screenshot()).toMatchSnapshot(`Radio.Checked.${theme}.png`)
         })
       })
     }

packages/react/src/Radio/Radio.tsx

@@ -4,8 +4,8 @@ import type {SxProp} from '../sx'
 import type {FormValidationStatus} from '../utils/types/FormValidationStatus'
 import {RadioGroupContext} from '../RadioGroup/RadioGroup'
 import {clsx} from 'clsx'
-import classes from './Radio.module.css'
 import sharedClasses from '../Checkbox/shared.module.css'
+import classes from './Radio.module.css'
 import {defaultSxProp} from '../utils/defaultSxProp'
 import Box from '../Box'