diff --git a/packages/styled-react/src/__tests__/primer-react-deprecated.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react-deprecated.browser.test.tsx
index dd0a9696a04..1913123d5f0 100644
--- a/packages/styled-react/src/__tests__/primer-react-deprecated.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react-deprecated.browser.test.tsx
@@ -21,6 +21,7 @@ describe('@primer/react/deprecated', () => {
 
   test('TabNav.Link supports `sx` prop', () => {
     render(<TabNav.Link data-testid="component" sx={{background: 'red'}} as={Button} />)
+    expect(screen.getByTestId('component')).toHaveAttribute('role', 'tab')
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
     expect(window.getComputedStyle(screen.getByRole('tab')).backgroundColor).toBe('rgb(255, 0, 0)')
     expect(screen.getByRole('tab').tagName).toBe('BUTTON')
diff --git a/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx
index 4e2a8fa64fe..86ea2df3afd 100644
--- a/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx
@@ -9,7 +9,8 @@ describe('@primer/react/experimental', () => {
   })
 
   test('PageHeader supports `sx` prop', () => {
-    const {container} = render(<PageHeader data-testid="component" sx={{background: 'red'}} />)
+    const {container} = render(<PageHeader as="div" data-testid="component" sx={{background: 'red'}} role="article" />)
+    expect(container.firstElementChild!).toHaveAttribute('role', 'article')
     expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
   })
 
diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
index 02a3e986dd1..33ed2c72e22 100644
--- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
+++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
@@ -47,8 +47,9 @@ import {
 
 describe('@primer/react', () => {
   test('ActionList supports `sx` prop', () => {
-    render(<ActionList data-testid="component" sx={{background: 'red'}} />)
+    render(<ActionList as="div" data-testid="component" sx={{background: 'red'}} variant="inset" />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByTestId('component')).toHaveAttribute('data-variant', 'inset')
   })
 
   test('ActionMenu.Button supports `sx` prop', () => {
@@ -109,7 +110,7 @@ describe('@primer/react', () => {
   })
 
   test('Box supports `sx` prop', () => {
-    render(<Box data-testid="component" sx={{background: 'red'}} />)
+    render(<Box as="div" data-testid="component" sx={{background: 'red'}} />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
   })
 
@@ -119,13 +120,15 @@ describe('@primer/react', () => {
   })
 
   test('Breadcrumbs.Item supports `sx` prop', () => {
-    render(<Breadcrumbs.Item data-testid="component" sx={{background: 'red'}} />)
+    render(<Breadcrumbs.Item as="li" data-testid="component" sx={{background: 'red'}} selected />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByTestId('component').className.includes('selected')).toBe(true)
   })
 
   test('Button supports `sx` prop', () => {
-    render(<Button data-testid="component" sx={{background: 'red'}} />)
+    render(<Button as="button" data-testid="component" sx={{background: 'red'}} size="medium" />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByTestId('component')).toHaveAttribute('data-size', 'medium')
   })
 
   test('Checkbox supports `sx` prop', () => {
@@ -183,8 +186,9 @@ describe('@primer/react', () => {
   })
 
   test('Flash supports `sx` prop', () => {
-    render(<Flash data-testid="component" sx={{background: 'red'}} />)
+    render(<Flash as="div" data-testid="component" sx={{background: 'red'}} variant="success" />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByTestId('component')).toHaveAttribute('variant', 'success')
   })
 
   test('FormControl supports `sx` prop', () => {
@@ -197,7 +201,7 @@ describe('@primer/react', () => {
   })
 
   test('Header supports `sx` prop', () => {
-    render(<Header data-testid="component" sx={{background: 'red'}} />)
+    render(<Header as="header" data-testid="component" sx={{background: 'red'}} />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
   })
 
@@ -207,23 +211,40 @@ describe('@primer/react', () => {
   })
 
   test('IconButton supports `sx` prop', () => {
-    render(<IconButton aria-label="test" data-testid="component" sx={{background: 'red'}} icon={() => <svg />} />)
+    render(
+      <IconButton
+        as="button"
+        aria-label="test"
+        data-testid="component"
+        sx={{background: 'red'}}
+        icon={() => <svg />}
+      />,
+    )
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+
+    // Test that IconButton renders the icon component (SVG) in its children
+    const iconButton = screen.getByTestId('component')
+    const svgElement = iconButton.querySelector('svg')
+    expect(svgElement).toBeInTheDocument()
+    expect(iconButton.children.length).toBeGreaterThan(0)
   })
 
   test('Label supports `sx` prop', () => {
-    render(<Label data-testid="component" sx={{background: 'red'}} />)
+    render(<Label as="span" data-testid="component" sx={{background: 'red'}} size="large" />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByTestId('component')).toHaveAttribute('data-size', 'large')
   })
 
   test('Link supports `sx` prop', () => {
-    render(<Link data-testid="component" sx={{background: 'red'}} />)
+    render(<Link as="a" data-testid="component" sx={{background: 'red'}} inline />)
+    expect(screen.getByTestId('component')).toHaveAttribute('data-inline', 'true')
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
   })
 
   test('LinkButton supports `sx` prop', () => {
-    render(<LinkButton data-testid="component" sx={{background: 'red'}} />)
+    render(<LinkButton as="a" data-testid="component" sx={{background: 'red'}} icon={<svg />} />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByTestId('component')).toHaveAttribute('icon')
   })
 
   test('NavList supports `sx` prop', () => {
@@ -285,19 +306,23 @@ describe('@primer/react', () => {
     render(
       <ThemeProvider>
         <Overlay
+          as="div"
           data-testid="component"
           sx={{background: 'red'}}
           onClickOutside={() => {}}
           onEscape={() => {}}
           returnFocusRef={ref}
+          role="dialog"
         />
       </ThemeProvider>,
     )
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByTestId('component')).toHaveAttribute('role', 'dialog')
   })
 
   test('PageHeader supports `sx` prop', () => {
-    const {container} = render(<PageHeader data-testid="component" sx={{background: 'red'}} />)
+    const {container} = render(<PageHeader as="div" data-testid="component" sx={{background: 'red'}} role="article" />)
+    expect(container.firstElementChild!).toHaveAttribute('role', 'article')
     expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
   })
 
@@ -322,8 +347,13 @@ describe('@primer/react', () => {
   })
 
   test('PageLayout.Content supports `sx` prop', () => {
-    const {container} = render(<PageLayout.Content data-testid="component" sx={{background: 'red'}} />)
-    expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
+    const {container} = render(
+      <PageLayout.Content as="section" data-testid="component" sx={{background: 'red'}} aria-labelledby="normal" />,
+    )
+
+    const outerElement = container.firstElementChild! as HTMLElement
+    expect(window.getComputedStyle(outerElement).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(outerElement).toHaveAttribute('aria-labelledby', 'normal')
   })
 
   test('PageLayout.Pane supports `sx` prop', () => {
@@ -385,8 +415,9 @@ describe('@primer/react', () => {
   })
 
   test.skip('Select supports `sx` prop', () => {
-    render(<Select data-testid="component" sx={{background: 'red'}} />)
+    render(<Select as="select" data-testid="component" sx={{background: 'red'}} required />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByTestId('component')).toHaveAttribute('required')
   })
 
   test('Spinner supports `sx` prop', () => {
@@ -410,13 +441,15 @@ describe('@primer/react', () => {
   })
 
   test('Text supports `sx` prop', () => {
-    render(<Text data-testid="component" sx={{background: 'red'}} />)
+    render(<Text as="span" data-testid="component" sx={{background: 'red'}} size="small" />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByTestId('component')).toHaveAttribute('data-size', 'small')
   })
 
   test('TextInput supports `sx` prop', () => {
-    const {container} = render(<TextInput sx={{background: 'red'}} />)
+    const {container} = render(<TextInput as="input" sx={{background: 'red'}} loading />)
     expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(container.firstElementChild).toHaveAttribute('data-trailing-visual', 'true')
   })
 
   test('TextInput.Action supports `sx` prop', () => {
@@ -455,8 +488,9 @@ describe('@primer/react', () => {
   })
 
   test('Token supports `sx` prop', () => {
-    render(<Token data-testid="component" sx={{background: 'red'}} text="test" />)
+    render(<Token as="button" data-testid="component" sx={{background: 'red'}} text="test" />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByTestId('component')).toHaveTextContent('test')
   })
 
   test.todo('Tooltip supports `sx` prop', () => {
@@ -469,25 +503,29 @@ describe('@primer/react', () => {
   })
 
   test('Truncate supports `sx` prop', () => {
-    render(<Truncate data-testid="component" sx={{background: 'red'}} title="test" />)
+    render(<Truncate as="div" data-testid="component" sx={{background: 'red'}} title="test" />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByTestId('component')).toHaveAttribute('title', 'test')
   })
 
   test('UnderlineNav supports `sx` prop', () => {
     render(
-      <UnderlineNav aria-label="navigation" data-testid="component" sx={{background: 'red'}}>
-        <UnderlineNav.Item id="123">test</UnderlineNav.Item>
+      <UnderlineNav as="nav" aria-label="navigation" data-testid="component" sx={{background: 'red'}} variant="inset">
+        <UnderlineNav.Item>test</UnderlineNav.Item>
       </UnderlineNav>,
     )
     expect(window.getComputedStyle(screen.getByLabelText('navigation')).backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(screen.getByLabelText('navigation')).toHaveAttribute('data-variant', 'inset')
   })
 
   test('UnderlineNav.Item supports `sx` prop', () => {
     render(
-      <UnderlineNav.Item data-testid="component" sx={{background: 'red'}}>
+      <UnderlineNav.Item as="a" data-testid="component" sx={{background: 'red'}} icon={<svg />}>
         test
       </UnderlineNav.Item>,
     )
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
+    const svgElement = screen.getByTestId('component').querySelector('svg')
+    expect(svgElement).toBeInTheDocument()
   })
 })