diff --git a/.changeset/giant-bobcats-deliver.md b/.changeset/giant-bobcats-deliver.md
new file mode 100644
index 00000000000..ada0448a3f7
--- /dev/null
+++ b/.changeset/giant-bobcats-deliver.md
@@ -0,0 +1,7 @@
+---
+'@primer/react': patch
+---
+
+Update ActionList to place `id` on item with an ARIA role
+
+<!-- Changed components: ActionList -->
diff --git a/.changeset/purple-panthers-accept.md b/.changeset/purple-panthers-accept.md
new file mode 100644
index 00000000000..11443b511e1
--- /dev/null
+++ b/.changeset/purple-panthers-accept.md
@@ -0,0 +1,7 @@
+---
+'@primer/react': patch
+---
+
+Button: Allow leadingIcon, trailingIcon, trailingAction to be overridable with sx
+
+<!-- Changed components: Button -->
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png
index 7a6d08b6e3d..10743f3b5c5 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png
index 8a150d03c56..8e61cdfdb5b 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png
index 42fd585200e..50a169a1c17 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png
index 97447d754f5..96757c51768 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png
index 7a6d08b6e3d..10743f3b5c5 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png
index 38e4599d0a8..d484a89b642 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png
index feca5e28d24..0a9407fb292 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png
index 36135cffb0f..2b0a2f46e66 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png differ
diff --git a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png
index 38e4599d0a8..d484a89b642 100644
Binary files a/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png and b/.playwright/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png differ
diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
index e7a76362bd3..04a07b00c39 100644
--- a/src/ActionList/Item.tsx
+++ b/src/ActionList/Item.tsx
@@ -190,10 +190,10 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
       [onSelect, disabled, afterSelect],
     )
 
-    // use props.id if provided, otherwise generate one.
-    const labelId = useId(id)
-    const inlineDescriptionId = useId(id && `${id}--inline-description`)
-    const blockDescriptionId = useId(id && `${id}--block-description`)
+    const itemId = useId(id)
+    const labelId = `${itemId}--label`
+    const inlineDescriptionId = `${itemId}--inline-description`
+    const blockDescriptionId = `${itemId}--block-description`
 
     const ItemWrapper = _PrivateItemWrapper || React.Fragment
 
@@ -208,6 +208,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
       'aria-describedby': slots.description?.props.variant === 'block' ? blockDescriptionId : undefined,
       ...(selectionAttribute && {[selectionAttribute]: selected}),
       role: role || itemRole,
+      id: itemId,
     }
 
     const containerProps = _PrivateItemWrapper ? {role: role || itemRole ? 'none' : undefined} : menuItemProps
diff --git a/src/Button/Button.dev.stories.tsx b/src/Button/Button.dev.stories.tsx
index d2a06e5019b..ec1f66d12d2 100644
--- a/src/Button/Button.dev.stories.tsx
+++ b/src/Button/Button.dev.stories.tsx
@@ -1,6 +1,7 @@
-import {SearchIcon, TriangleDownIcon, EyeIcon} from '@primer/octicons-react'
+import {SearchIcon, TriangleDownIcon, EyeIcon, IssueClosedIcon} from '@primer/octicons-react'
 import React from 'react'
 import {Button, IconButton} from '.'
+import {default as Text} from '../Text'
 
 export default {
   title: 'Components/Button/DevOnly',
@@ -64,8 +65,11 @@ export const TestSxProp = () => {
       >
         Red
       </Button>
-      <Button leadingVisual={SearchIcon} variant="invisible" sx={{color: 'firebrick'}}>
-        Red
+      <Button variant="invisible" sx={{color: 'firebrick'}}>
+        Invariant color overridden
+      </Button>
+      <Button leadingVisual={IssueClosedIcon} sx={{color: 'done.fg'}}>
+        <Text sx={{color: 'fg.default'}}>Close issue</Text>
       </Button>
       <Button
         size="small"
diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
index fcb3059307c..66088e8dbf3 100644
--- a/src/Button/Button.tsx
+++ b/src/Button/Button.tsx
@@ -3,18 +3,23 @@ import {ButtonProps} from './types'
 import {ButtonBase} from './ButtonBase'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {defaultSxProp} from '../utils/defaultSxProp'
-import {BetterSystemStyleObject} from '../sx'
+import {BetterSystemStyleObject, CSSCustomProperties} from '../sx'
 
 const ButtonComponent = forwardRef(({children, sx: sxProp = defaultSxProp, ...props}, forwardedRef): JSX.Element => {
   const {block, size, leadingVisual, trailingVisual, trailingAction} = props
   let sxStyles = sxProp
+  const style: CSSCustomProperties = {}
 
   if (sxProp !== null && Object.keys(sxProp).length > 0) {
     sxStyles = generateCustomSxProp({block, size, leadingVisual, trailingVisual, trailingAction}, sxProp)
+
+    // @ts-ignore sxProp can have color attribute
+    const {color} = sxProp
+    if (color) style['--button-color'] = color
   }
 
   return (
-    <ButtonBase ref={forwardedRef} as="button" sx={sxStyles} type="button" {...props}>
+    <ButtonBase ref={forwardedRef} as="button" sx={sxStyles} style={style} type="button" {...props}>
       {children}
     </ButtonBase>
   )
@@ -67,11 +72,10 @@ export function generateCustomSxProp(
   // Possible data attributes: data-size, data-block, data-no-visuals
   const size = props.size && props.size !== 'medium' ? `[data-size="${props.size}"]` : '' // medium is a default size therefore it doesn't have a data attribute that used for styling
   const block = props.block ? `[data-block="block"]` : ''
-  const noVisuals =
-    props.leadingVisual || props.trailingVisual || props.trailingAction ? '' : '[data-no-visuals="true"]'
+  const noVisuals = props.leadingVisual || props.trailingVisual || props.trailingAction ? '' : '[data-no-visuals]'
 
-  // this is custom selector. We need to make sure we add the data attributes to the base css class (& -> &[data-attributename="value"]])
-  const cssSelector = `&${size}${block}${noVisuals}` // &[data-size="small"][data-block="block"][data-no-visuals="true"]
+  // this is a custom selector. We need to make sure we add the data attributes to the base css class (& -> &[data-attributename="value"]])
+  const cssSelector = `&${size}${block}${noVisuals}` // &[data-size="small"][data-block="block"][data-no-visuals]
 
   const customSxProp: {
     [key: string]: BetterSystemStyleObject
diff --git a/src/Button/__tests__/__snapshots__/Button.test.tsx.snap b/src/Button/__tests__/__snapshots__/Button.test.tsx.snap
index 499079f6b10..a250e813ad6 100644
--- a/src/Button/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -212,7 +212,7 @@ exports[`Button renders consistently 1`] = `
 .c0 [data-component="leadingVisual"],
 .c0 [data-component="trailingVisual"],
 .c0 [data-component="trailingAction"] {
-  color: #656d76;
+  color: var(--button-color,#656d76);
 }
 
 @media (forced-colors:active) {
@@ -225,6 +225,7 @@ exports[`Button renders consistently 1`] = `
   className="c0"
   data-block={null}
   data-no-visuals={true}
+  style={{}}
   type="button"
 >
   <span
@@ -445,7 +446,7 @@ exports[`Button respects block prop 1`] = `
 .c0 [data-component="leadingVisual"],
 .c0 [data-component="trailingVisual"],
 .c0 [data-component="trailingAction"] {
-  color: fg.muted;
+  color: var(--button-color,undefined);
 }
 
 @media (forced-colors:active) {
@@ -684,7 +685,7 @@ exports[`Button respects the alignContent prop 1`] = `
 .c0 [data-component="leadingVisual"],
 .c0 [data-component="trailingVisual"],
 .c0 [data-component="trailingAction"] {
-  color: fg.muted;
+  color: var(--button-color,undefined);
 }
 
 @media (forced-colors:active) {
@@ -922,7 +923,7 @@ exports[`Button respects the large size prop 1`] = `
 .c0 [data-component="leadingVisual"],
 .c0 [data-component="trailingVisual"],
 .c0 [data-component="trailingAction"] {
-  color: fg.muted;
+  color: var(--button-color,undefined);
 }
 
 @media (forced-colors:active) {
@@ -1161,7 +1162,7 @@ exports[`Button respects the small size prop 1`] = `
 .c0 [data-component="leadingVisual"],
 .c0 [data-component="trailingVisual"],
 .c0 [data-component="trailingAction"] {
-  color: fg.muted;
+  color: var(--button-color,undefined);
 }
 
 @media (forced-colors:active) {
diff --git a/src/Button/styles.ts b/src/Button/styles.ts
index 9664d1746f4..cdf44d9c1d0 100644
--- a/src/Button/styles.ts
+++ b/src/Button/styles.ts
@@ -26,7 +26,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         borderColor: 'btn.activeBorder',
       },
       '[data-component="leadingVisual"], [data-component="trailingVisual"], [data-component="trailingAction"]': {
-        color: 'fg.muted',
+        color: `var(--button-color, ${theme?.colors.fg.muted})`,
       },
     },
     primary: {
diff --git a/src/Dialog/__snapshots__/Dialog.test.tsx.snap b/src/Dialog/__snapshots__/Dialog.test.tsx.snap
index 25b2573a161..5b38846ea61 100644
--- a/src/Dialog/__snapshots__/Dialog.test.tsx.snap
+++ b/src/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -291,6 +291,9 @@ exports[`Dialog renders consistently 1`] = `
 
 .c1[data-no-visuals] {
   color: #0969da;
+  position: absolute;
+  top: 8px;
+  right: 16px;
 }
 
 .c1:has([data-component="ButtonCounter"]) {
@@ -305,12 +308,6 @@ exports[`Dialog renders consistently 1`] = `
   color: inherit;
 }
 
-.c1[data-no-visuals="true"] {
-  position: absolute;
-  top: 8px;
-  right: 16px;
-}
-
 .c4 {
   font-size: 14px;
   font-weight: 600;
diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap
index a79fec27bfe..128ae74e612 100644
--- a/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -306,9 +306,10 @@ exports[`NavList renders a simple list 1`] = `
       >
         <a
           aria-current="page"
-          aria-labelledby="react-aria-2 "
+          aria-labelledby="react-aria-2--label "
           class="c3"
           href="/"
+          id="react-aria-2"
           tabindex="0"
         >
           <div
@@ -317,7 +318,7 @@ exports[`NavList renders a simple list 1`] = `
           >
             <span
               class="c5"
-              id="react-aria-2"
+              id="react-aria-2--label"
             >
               Home
             </span>
@@ -328,9 +329,10 @@ exports[`NavList renders a simple list 1`] = `
         class="c1 c6"
       >
         <a
-          aria-labelledby="react-aria-5 "
+          aria-labelledby="react-aria-3--label "
           class="c3"
           href="/about"
+          id="react-aria-3"
           tabindex="0"
         >
           <div
@@ -339,7 +341,7 @@ exports[`NavList renders a simple list 1`] = `
           >
             <span
               class="c5"
-              id="react-aria-5"
+              id="react-aria-3--label"
             >
               About
             </span>
@@ -350,9 +352,10 @@ exports[`NavList renders a simple list 1`] = `
         class="c1 c6"
       >
         <a
-          aria-labelledby="react-aria-8 "
+          aria-labelledby="react-aria-4--label "
           class="c3"
           href="/contact"
+          id="react-aria-4"
           tabindex="0"
         >
           <div
@@ -361,7 +364,7 @@ exports[`NavList renders a simple list 1`] = `
           >
             <span
               class="c5"
-              id="react-aria-8"
+              id="react-aria-4--label"
             >
               Contact
             </span>
@@ -736,9 +739,10 @@ exports[`NavList renders with groups 1`] = `
           >
             <a
               aria-current="page"
-              aria-labelledby="react-aria-3 "
+              aria-labelledby="react-aria-3--label "
               class="c7"
               href="/getting-started"
+              id="react-aria-3"
               tabindex="0"
             >
               <div
@@ -747,7 +751,7 @@ exports[`NavList renders with groups 1`] = `
               >
                 <span
                   class="c9"
-                  id="react-aria-3"
+                  id="react-aria-3--label"
                 >
                   Getting started
                 </span>
@@ -770,22 +774,23 @@ exports[`NavList renders with groups 1`] = `
           role="presentation"
         >
           <span
-            id="react-aria-6"
+            id="react-aria-4"
           >
             Components
           </span>
         </div>
         <ul
-          aria-labelledby="react-aria-6"
+          aria-labelledby="react-aria-4"
           class="c4"
         >
           <li
             class="c5 c10"
           >
             <a
-              aria-labelledby="react-aria-7 "
+              aria-labelledby="react-aria-5--label "
               class="c7"
               href="/Avatar"
+              id="react-aria-5"
               tabindex="0"
             >
               <div
@@ -794,7 +799,7 @@ exports[`NavList renders with groups 1`] = `
               >
                 <span
                   class="c9"
-                  id="react-aria-7"
+                  id="react-aria-5--label"
                 >
                   Avatar
                 </span>
@@ -1177,8 +1182,9 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
         <button
           aria-controls="react-aria-3"
           aria-expanded="true"
-          aria-labelledby="react-aria-2 "
+          aria-labelledby="react-aria-2--label "
           class="c3 c4"
+          id="react-aria-2"
           tabindex="0"
         >
           <div
@@ -1190,7 +1196,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
             >
               <span
                 class="c1 c7"
-                id="react-aria-2"
+                id="react-aria-2--label"
               >
                 Item
               </span>
@@ -1227,9 +1233,10 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
             >
               <a
                 aria-current="page"
-                aria-labelledby="react-aria-4 "
+                aria-labelledby="react-aria-4--label "
                 class="c12"
                 href="#"
+                id="react-aria-4"
                 tabindex="0"
               >
                 <div
@@ -1238,7 +1245,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
                 >
                   <span
                     class="c1 c7"
-                    id="react-aria-4"
+                    id="react-aria-4--label"
                   >
                     Sub Item
                   </span>
@@ -1651,8 +1658,9 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
         <button
           aria-controls="react-aria-3"
           aria-expanded="false"
-          aria-labelledby="react-aria-2 "
+          aria-labelledby="react-aria-2--label "
           class="c3 c4"
+          id="react-aria-2"
           tabindex="0"
         >
           <div
@@ -1664,7 +1672,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
             >
               <span
                 class="c1 c7"
-                id="react-aria-2"
+                id="react-aria-2--label"
               >
                 Item
               </span>
@@ -1701,9 +1709,10 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
             >
               <a
                 aria-current="page"
-                aria-labelledby="react-aria-4 "
+                aria-labelledby="react-aria-4--label "
                 class="c12"
                 href="#"
+                id="react-aria-4"
                 tabindex="0"
               >
                 <div
@@ -1712,7 +1721,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
                 >
                   <span
                     class="c1 c7"
-                    id="react-aria-4"
+                    id="react-aria-4--label"
                   >
                     Sub Item
                   </span>
diff --git a/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap b/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap
index 9a1b7357773..695c468dd03 100644
--- a/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap
+++ b/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap
@@ -226,7 +226,7 @@ exports[`SelectPanel renders consistently 1`] = `
 .c1 [data-component="leadingVisual"],
 .c1 [data-component="trailingVisual"],
 .c1 [data-component="trailingAction"] {
-  color: #656d76;
+  color: var(--button-color,#656d76);
 }
 
 @media (forced-colors:active) {
@@ -251,6 +251,7 @@ exports[`SelectPanel renders consistently 1`] = `
     id="react-aria-3"
     onClick={[Function]}
     onKeyDown={[Function]}
+    style={{}}
     tabIndex={0}
     type="button"
   >
diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
index 898cf48e4eb..0927c476249 100644
--- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
@@ -226,7 +226,7 @@ exports[`ActionMenu renders consistently 1`] = `
 .c1 [data-component="leadingVisual"],
 .c1 [data-component="trailingVisual"],
 .c1 [data-component="trailingAction"] {
-  color: #656d76;
+  color: var(--button-color,#656d76);
 }
 
 @media (forced-colors:active) {
@@ -251,6 +251,7 @@ exports[`ActionMenu renders consistently 1`] = `
     id="react-aria-1"
     onClick={[Function]}
     onKeyDown={[Function]}
+    style={{}}
     tabIndex={0}
     type="button"
   >
diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index 70fa2392d24..fd3451135ff 100644
--- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -781,10 +781,10 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
         role="listbox"
       >
         <li
-          aria-labelledby="0 "
-          aria-selected={false}
+          aria-labelledby="0--label "
           className="c2 c3"
           data-id="0"
+          id="0"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -804,17 +804,17 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           >
             <span
               className="c4 c8"
-              id="0"
+              id="0--label"
             >
               zero
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="1 "
-          aria-selected={false}
+          aria-labelledby="1--label "
           className="c2 c3"
           data-id="1"
+          id="1"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -834,17 +834,17 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           >
             <span
               className="c4 c8"
-              id="1"
+              id="1--label"
             >
               one
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="2 "
-          aria-selected={false}
+          aria-labelledby="2--label "
           className="c2 c3"
           data-id="2"
+          id="2"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -864,17 +864,17 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           >
             <span
               className="c4 c8"
-              id="2"
+              id="2--label"
             >
               two
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="3 "
-          aria-selected={false}
+          aria-labelledby="3--label "
           className="c2 c3"
           data-id="3"
+          id="3"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -894,17 +894,17 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           >
             <span
               className="c4 c8"
-              id="3"
+              id="3--label"
             >
               three
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="4 "
-          aria-selected={false}
+          aria-labelledby="4--label "
           className="c2 c3"
           data-id="4"
+          id="4"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -924,17 +924,17 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           >
             <span
               className="c4 c8"
-              id="4"
+              id="4--label"
             >
               four
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="5 "
-          aria-selected={false}
+          aria-labelledby="5--label "
           className="c2 c3"
           data-id="5"
+          id="5"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -954,17 +954,17 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           >
             <span
               className="c4 c8"
-              id="5"
+              id="5--label"
             >
               five
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="6 "
-          aria-selected={false}
+          aria-labelledby="6--label "
           className="c2 c3"
           data-id="6"
+          id="6"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -984,17 +984,17 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           >
             <span
               className="c4 c8"
-              id="6"
+              id="6--label"
             >
               six
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="7 "
-          aria-selected={false}
+          aria-labelledby="7--label "
           className="c2 c3"
           data-id="7"
+          id="7"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -1014,17 +1014,17 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           >
             <span
               className="c4 c8"
-              id="7"
+              id="7--label"
             >
               seven
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="20 "
-          aria-selected={false}
+          aria-labelledby="20--label "
           className="c2 c3"
           data-id="20"
+          id="20"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -1044,17 +1044,17 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           >
             <span
               className="c4 c8"
-              id="20"
+              id="20--label"
             >
               twenty
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="21 "
-          aria-selected={false}
+          aria-labelledby="21--label "
           className="c2 c3"
           data-id="21"
+          id="21"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -1074,17 +1074,17 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           >
             <span
               className="c4 c8"
-              id="21"
+              id="21--label"
             >
               twentyone
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="add-new-item "
-          aria-selected={false}
+          aria-labelledby="add-new-item--label "
           className="c2 c3"
           data-id="add-new-item"
+          id="add-new-item"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -1130,7 +1130,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
           >
             <span
               className="c4 c8"
-              id="add-new-item"
+              id="add-new-item--label"
             >
               Add new item
             </span>
@@ -1499,10 +1499,10 @@ exports[`snapshots renders a multiselect input 1`] = `
         role="listbox"
       >
         <li
-          aria-labelledby="0 "
-          aria-selected={false}
+          aria-labelledby="0--label "
           className="c2 c3"
           data-id="0"
+          id="0"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -1522,17 +1522,17 @@ exports[`snapshots renders a multiselect input 1`] = `
           >
             <span
               className="c7"
-              id="0"
+              id="0--label"
             >
               zero
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="1 "
-          aria-selected={false}
+          aria-labelledby="1--label "
           className="c2 c3"
           data-id="1"
+          id="1"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -1552,17 +1552,17 @@ exports[`snapshots renders a multiselect input 1`] = `
           >
             <span
               className="c7"
-              id="1"
+              id="1--label"
             >
               one
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="2 "
-          aria-selected={false}
+          aria-labelledby="2--label "
           className="c2 c3"
           data-id="2"
+          id="2"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -1582,17 +1582,17 @@ exports[`snapshots renders a multiselect input 1`] = `
           >
             <span
               className="c7"
-              id="2"
+              id="2--label"
             >
               two
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="3 "
-          aria-selected={false}
+          aria-labelledby="3--label "
           className="c2 c3"
           data-id="3"
+          id="3"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -1612,17 +1612,17 @@ exports[`snapshots renders a multiselect input 1`] = `
           >
             <span
               className="c7"
-              id="3"
+              id="3--label"
             >
               three
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="4 "
-          aria-selected={false}
+          aria-labelledby="4--label "
           className="c2 c3"
           data-id="4"
+          id="4"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -1642,17 +1642,17 @@ exports[`snapshots renders a multiselect input 1`] = `
           >
             <span
               className="c7"
-              id="4"
+              id="4--label"
             >
               four
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="5 "
-          aria-selected={false}
+          aria-labelledby="5--label "
           className="c2 c3"
           data-id="5"
+          id="5"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -1672,17 +1672,17 @@ exports[`snapshots renders a multiselect input 1`] = `
           >
             <span
               className="c7"
-              id="5"
+              id="5--label"
             >
               five
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="6 "
-          aria-selected={false}
+          aria-labelledby="6--label "
           className="c2 c3"
           data-id="6"
+          id="6"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -1702,17 +1702,17 @@ exports[`snapshots renders a multiselect input 1`] = `
           >
             <span
               className="c7"
-              id="6"
+              id="6--label"
             >
               six
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="7 "
-          aria-selected={false}
+          aria-labelledby="7--label "
           className="c2 c3"
           data-id="7"
+          id="7"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -1732,17 +1732,17 @@ exports[`snapshots renders a multiselect input 1`] = `
           >
             <span
               className="c7"
-              id="7"
+              id="7--label"
             >
               seven
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="20 "
-          aria-selected={false}
+          aria-labelledby="20--label "
           className="c2 c3"
           data-id="20"
+          id="20"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -1762,17 +1762,17 @@ exports[`snapshots renders a multiselect input 1`] = `
           >
             <span
               className="c7"
-              id="20"
+              id="20--label"
             >
               twenty
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="21 "
-          aria-selected={false}
+          aria-labelledby="21--label "
           className="c2 c3"
           data-id="21"
+          id="21"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -1792,7 +1792,7 @@ exports[`snapshots renders a multiselect input 1`] = `
           >
             <span
               className="c7"
-              id="21"
+              id="21--label"
             >
               twentyone
             </span>
@@ -2307,10 +2307,10 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
         role="listbox"
       >
         <li
-          aria-labelledby="0 "
-          aria-selected={true}
+          aria-labelledby="0--label "
           className="c2 c3"
           data-id="0"
+          id="0"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -2330,17 +2330,17 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           >
             <span
               className="c7"
-              id="0"
+              id="0--label"
             >
               zero
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="1 "
-          aria-selected={true}
+          aria-labelledby="1--label "
           className="c2 c3"
           data-id="1"
+          id="1"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -2360,17 +2360,17 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           >
             <span
               className="c7"
-              id="1"
+              id="1--label"
             >
               one
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="2 "
-          aria-selected={true}
+          aria-labelledby="2--label "
           className="c2 c3"
           data-id="2"
+          id="2"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -2390,17 +2390,17 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           >
             <span
               className="c7"
-              id="2"
+              id="2--label"
             >
               two
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="3 "
-          aria-selected={false}
+          aria-labelledby="3--label "
           className="c2 c8"
           data-id="3"
+          id="3"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -2420,17 +2420,17 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           >
             <span
               className="c7"
-              id="3"
+              id="3--label"
             >
               three
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="4 "
-          aria-selected={false}
+          aria-labelledby="4--label "
           className="c2 c8"
           data-id="4"
+          id="4"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -2450,17 +2450,17 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           >
             <span
               className="c7"
-              id="4"
+              id="4--label"
             >
               four
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="5 "
-          aria-selected={false}
+          aria-labelledby="5--label "
           className="c2 c8"
           data-id="5"
+          id="5"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -2480,17 +2480,17 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           >
             <span
               className="c7"
-              id="5"
+              id="5--label"
             >
               five
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="6 "
-          aria-selected={false}
+          aria-labelledby="6--label "
           className="c2 c8"
           data-id="6"
+          id="6"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -2510,17 +2510,17 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           >
             <span
               className="c7"
-              id="6"
+              id="6--label"
             >
               six
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="7 "
-          aria-selected={false}
+          aria-labelledby="7--label "
           className="c2 c8"
           data-id="7"
+          id="7"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -2540,17 +2540,17 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           >
             <span
               className="c7"
-              id="7"
+              id="7--label"
             >
               seven
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="20 "
-          aria-selected={false}
+          aria-labelledby="20--label "
           className="c2 c8"
           data-id="20"
+          id="20"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -2570,17 +2570,17 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           >
             <span
               className="c7"
-              id="20"
+              id="20--label"
             >
               twenty
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="21 "
-          aria-selected={false}
+          aria-labelledby="21--label "
           className="c2 c8"
           data-id="21"
+          id="21"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -2600,7 +2600,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
           >
             <span
               className="c7"
-              id="21"
+              id="21--label"
             >
               twentyone
             </span>
@@ -2931,9 +2931,10 @@ exports[`snapshots renders a single select input 1`] = `
         role="listbox"
       >
         <li
-          aria-labelledby="0 "
+          aria-labelledby="0--label "
           className="c2 c3"
           data-id="0"
+          id="0"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -2948,16 +2949,17 @@ exports[`snapshots renders a single select input 1`] = `
           >
             <span
               className="c6"
-              id="0"
+              id="0--label"
             >
               zero
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="1 "
+          aria-labelledby="1--label "
           className="c2 c3"
           data-id="1"
+          id="1"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -2972,16 +2974,17 @@ exports[`snapshots renders a single select input 1`] = `
           >
             <span
               className="c6"
-              id="1"
+              id="1--label"
             >
               one
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="2 "
+          aria-labelledby="2--label "
           className="c2 c3"
           data-id="2"
+          id="2"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -2996,16 +2999,17 @@ exports[`snapshots renders a single select input 1`] = `
           >
             <span
               className="c6"
-              id="2"
+              id="2--label"
             >
               two
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="3 "
+          aria-labelledby="3--label "
           className="c2 c3"
           data-id="3"
+          id="3"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -3020,16 +3024,17 @@ exports[`snapshots renders a single select input 1`] = `
           >
             <span
               className="c6"
-              id="3"
+              id="3--label"
             >
               three
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="4 "
+          aria-labelledby="4--label "
           className="c2 c3"
           data-id="4"
+          id="4"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -3044,16 +3049,17 @@ exports[`snapshots renders a single select input 1`] = `
           >
             <span
               className="c6"
-              id="4"
+              id="4--label"
             >
               four
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="5 "
+          aria-labelledby="5--label "
           className="c2 c3"
           data-id="5"
+          id="5"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -3068,16 +3074,17 @@ exports[`snapshots renders a single select input 1`] = `
           >
             <span
               className="c6"
-              id="5"
+              id="5--label"
             >
               five
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="6 "
+          aria-labelledby="6--label "
           className="c2 c3"
           data-id="6"
+          id="6"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -3092,16 +3099,17 @@ exports[`snapshots renders a single select input 1`] = `
           >
             <span
               className="c6"
-              id="6"
+              id="6--label"
             >
               six
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="7 "
+          aria-labelledby="7--label "
           className="c2 c3"
           data-id="7"
+          id="7"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -3116,16 +3124,17 @@ exports[`snapshots renders a single select input 1`] = `
           >
             <span
               className="c6"
-              id="7"
+              id="7--label"
             >
               seven
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="20 "
+          aria-labelledby="20--label "
           className="c2 c3"
           data-id="20"
+          id="20"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -3140,16 +3149,17 @@ exports[`snapshots renders a single select input 1`] = `
           >
             <span
               className="c6"
-              id="20"
+              id="20--label"
             >
               twenty
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="21 "
+          aria-labelledby="21--label "
           className="c2 c3"
           data-id="21"
+          id="21"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -3164,7 +3174,7 @@ exports[`snapshots renders a single select input 1`] = `
           >
             <span
               className="c6"
-              id="21"
+              id="21--label"
             >
               twentyone
             </span>
@@ -3366,9 +3376,10 @@ exports[`snapshots renders with a custom text input component 1`] = `
         role="listbox"
       >
         <li
-          aria-labelledby="0 "
+          aria-labelledby="0--label "
           className="c2 c3"
           data-id="0"
+          id="0"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -3383,16 +3394,17 @@ exports[`snapshots renders with a custom text input component 1`] = `
           >
             <span
               className="c6"
-              id="0"
+              id="0--label"
             >
               zero
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="1 "
+          aria-labelledby="1--label "
           className="c2 c3"
           data-id="1"
+          id="1"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -3407,16 +3419,17 @@ exports[`snapshots renders with a custom text input component 1`] = `
           >
             <span
               className="c6"
-              id="1"
+              id="1--label"
             >
               one
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="2 "
+          aria-labelledby="2--label "
           className="c2 c3"
           data-id="2"
+          id="2"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -3431,16 +3444,17 @@ exports[`snapshots renders with a custom text input component 1`] = `
           >
             <span
               className="c6"
-              id="2"
+              id="2--label"
             >
               two
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="3 "
+          aria-labelledby="3--label "
           className="c2 c3"
           data-id="3"
+          id="3"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -3455,16 +3469,17 @@ exports[`snapshots renders with a custom text input component 1`] = `
           >
             <span
               className="c6"
-              id="3"
+              id="3--label"
             >
               three
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="4 "
+          aria-labelledby="4--label "
           className="c2 c3"
           data-id="4"
+          id="4"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -3479,16 +3494,17 @@ exports[`snapshots renders with a custom text input component 1`] = `
           >
             <span
               className="c6"
-              id="4"
+              id="4--label"
             >
               four
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="5 "
+          aria-labelledby="5--label "
           className="c2 c3"
           data-id="5"
+          id="5"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -3503,16 +3519,17 @@ exports[`snapshots renders with a custom text input component 1`] = `
           >
             <span
               className="c6"
-              id="5"
+              id="5--label"
             >
               five
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="6 "
+          aria-labelledby="6--label "
           className="c2 c3"
           data-id="6"
+          id="6"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -3527,16 +3544,17 @@ exports[`snapshots renders with a custom text input component 1`] = `
           >
             <span
               className="c6"
-              id="6"
+              id="6--label"
             >
               six
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="7 "
+          aria-labelledby="7--label "
           className="c2 c3"
           data-id="7"
+          id="7"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -3551,16 +3569,17 @@ exports[`snapshots renders with a custom text input component 1`] = `
           >
             <span
               className="c6"
-              id="7"
+              id="7--label"
             >
               seven
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="20 "
+          aria-labelledby="20--label "
           className="c2 c3"
           data-id="20"
+          id="20"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -3575,16 +3594,17 @@ exports[`snapshots renders with a custom text input component 1`] = `
           >
             <span
               className="c6"
-              id="20"
+              id="20--label"
             >
               twenty
             </span>
           </div>
         </li>
         <li
-          aria-labelledby="21 "
+          aria-labelledby="21--label "
           className="c2 c3"
           data-id="21"
+          id="21"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -3599,7 +3619,7 @@ exports[`snapshots renders with a custom text input component 1`] = `
           >
             <span
               className="c6"
-              id="21"
+              id="21--label"
             >
               twentyone
             </span>
diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index e87cc3fcf71..866903d6651 100644
--- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -1907,7 +1907,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   color: inherit;
 }
 
-.c5[data-size="small"][data-no-visuals="true"] {
+.c5[data-size="small"][data-no-visuals] {
   padding-top: 2px;
   padding-right: 4px;
   padding-bottom: 2px;
@@ -1915,7 +1915,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   position: relative;
 }
 
-.c5[data-size="small"][data-no-visuals="true"][data-component="IconButton"] {
+.c5[data-size="small"][data-no-visuals][data-component="IconButton"] {
   width: var(--inner-action-size);
   height: var(--inner-action-size);
 }
@@ -2244,7 +2244,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 }
 
 @media (pointer:coarse) {
-  .c5[data-size="small"][data-no-visuals="true"]:after {
+  .c5[data-size="small"][data-no-visuals]:after {
     content: "";
     position: absolute;
     left: 0;
@@ -2547,6 +2547,16 @@ exports[`TextInput renders trailingAction text button 1`] = `
 
 .c4[data-no-visuals] {
   color: #0969da;
+  padding-top: 2px;
+  padding-right: 4px;
+  padding-bottom: 2px;
+  padding-left: 4px;
+  position: relative;
+}
+
+.c4[data-no-visuals][data-component="IconButton"] {
+  width: var(--inner-action-size);
+  height: var(--inner-action-size);
 }
 
 .c4:has([data-component="ButtonCounter"]) {
@@ -2561,19 +2571,6 @@ exports[`TextInput renders trailingAction text button 1`] = `
   color: inherit;
 }
 
-.c4[data-no-visuals="true"] {
-  padding-top: 2px;
-  padding-right: 4px;
-  padding-bottom: 2px;
-  padding-left: 4px;
-  position: relative;
-}
-
-.c4[data-no-visuals="true"][data-component="IconButton"] {
-  width: var(--inner-action-size);
-  height: var(--inner-action-size);
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -2673,7 +2670,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 @media (pointer:coarse) {
-  .c4[data-no-visuals="true"]:after {
+  .c4[data-no-visuals]:after {
     content: "";
     position: absolute;
     left: 0;
@@ -2714,6 +2711,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
       data-block={null}
       data-no-visuals={true}
       onClick={[MockFunction]}
+      style={{}}
       type="button"
     >
       <span
@@ -2955,6 +2953,16 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 
 .c5[data-no-visuals] {
   color: #0969da;
+  padding-top: 2px;
+  padding-right: 4px;
+  padding-bottom: 2px;
+  padding-left: 4px;
+  position: relative;
+}
+
+.c5[data-no-visuals][data-component="IconButton"] {
+  width: var(--inner-action-size);
+  height: var(--inner-action-size);
 }
 
 .c5:has([data-component="ButtonCounter"]) {
@@ -2969,19 +2977,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   color: inherit;
 }
 
-.c5[data-no-visuals="true"] {
-  padding-top: 2px;
-  padding-right: 4px;
-  padding-bottom: 2px;
-  padding-left: 4px;
-  position: relative;
-}
-
-.c5[data-no-visuals="true"][data-component="IconButton"] {
-  width: var(--inner-action-size);
-  height: var(--inner-action-size);
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -3307,7 +3302,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 @media (pointer:coarse) {
-  .c5[data-no-visuals="true"]:after {
+  .c5[data-no-visuals]:after {
     content: "";
     position: absolute;
     left: 0;
@@ -3353,6 +3348,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
         data-block={null}
         data-no-visuals={true}
         onClick={[MockFunction]}
+        style={{}}
         type="button"
       >
         <span
diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx b/src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx
index d7c26c48908..cfd7dff63ea 100644
--- a/src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx
+++ b/src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx
@@ -362,7 +362,7 @@ describe('InlineAutocomplete', () => {
     await user.keyboard('{ArrowDown}')
 
     expect(input).toHaveFocus()
-    expect(input).toHaveAttribute('aria-activedescendant', expect.stringContaining('option-1'))
+    expect(input).toHaveAttribute('aria-activedescendant', 'github')
     expect(within(getByRole('listbox')).queryAllByRole('option')[1]).toHaveAttribute('aria-selected', 'true')
 
     await user.keyboard('{Enter}')
diff --git a/src/sx.ts b/src/sx.ts
index 0a2f378b0c6..a9bf56d65ab 100644
--- a/src/sx.ts
+++ b/src/sx.ts
@@ -14,7 +14,7 @@ export type BetterCssProperties = {
 }
 
 // Support CSS custom properties in the `sx` prop
-type CSSCustomProperties = {
+export type CSSCustomProperties = {
   [key: `--${string}`]: string | number
 }