From fff3f9d10436c8e5d89bebf1959c59b2f11ea89b Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Thu, 21 May 2026 16:52:57 -0700
Subject: [PATCH 1/9] update ActionMenu and add test

---
 packages/react/src/ActionMenu/ActionMenu.test.tsx | 13 +++++++++++++
 packages/react/src/ActionMenu/ActionMenu.tsx      |  7 ++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/ActionMenu/ActionMenu.test.tsx b/packages/react/src/ActionMenu/ActionMenu.test.tsx
index 09303b7923b..27a07601392 100644
--- a/packages/react/src/ActionMenu/ActionMenu.test.tsx
+++ b/packages/react/src/ActionMenu/ActionMenu.test.tsx
@@ -180,6 +180,19 @@ function ExampleWithSubmenus(): JSX.Element {
 describe('ActionMenu', () => {
   implementsClassName(ActionMenu.Button)
 
+  it('renders data-component attributes for ActionMenu parts', async () => {
+    const component = HTMLRender(<Example />)
+    const user = userEvent.setup()
+
+    const trigger = component.getByRole('button', {name: 'Toggle Menu'})
+    expect(trigger).toHaveAttribute('data-component', 'ActionMenu.Button')
+
+    await user.click(trigger)
+
+    expect(component.baseElement.querySelector('[data-component="AnchoredOverlay"]')).not.toBeNull()
+    expect(component.baseElement.querySelector('[data-component="ActionMenu.Overlay"]')).not.toBeNull()
+  })
+
   it('should open Menu on MenuButton click', async () => {
     const component = HTMLRender(<Example />)
     const button = component.getByRole('button')
diff --git a/packages/react/src/ActionMenu/ActionMenu.tsx b/packages/react/src/ActionMenu/ActionMenu.tsx
index c0dfb464f39..5291b8d158b 100644
--- a/packages/react/src/ActionMenu/ActionMenu.tsx
+++ b/packages/react/src/ActionMenu/ActionMenu.tsx
@@ -237,6 +237,9 @@ const Anchor: WithSlotMarker<
     [isSubmenu, onOpen, parentActionListContext],
   )
 
+  // only add data-component to the anchor if it's not a button, so we don't accidentally override
+  const isCustomAnchor = child.type !== Button
+
   return (
     <ActionListContainerContext.Provider value={thisActionListContext}>
       {React.cloneElement(child, {
@@ -245,6 +248,7 @@ const Anchor: WithSlotMarker<
         className: clsx(anchorProps.className, child.props.className),
         onClick: onButtonClick,
         onKeyDown: onButtonKeyDown,
+        ...(isCustomAnchor ? {'data-component': 'ActionMenu.Anchor'} : {}),
       })}
     </ActionListContainerContext.Provider>
   )
@@ -256,7 +260,7 @@ export type ActionMenuButtonProps = ButtonProps
 const MenuButton = React.forwardRef(({...props}, anchorRef) => {
   return (
     <Anchor ref={anchorRef}>
-      <Button type="button" trailingAction={TriangleDownIcon} {...props} />
+      <Button data-component="ActionMenu.Button" type="button" trailingAction={TriangleDownIcon} {...props} />
     </Anchor>
   )
 }) as PolymorphicForwardRefComponent<'button', ActionMenuButtonProps>
@@ -364,6 +368,7 @@ const Overlay: FCWithSlotMarker<React.PropsWithChildren<MenuOverlayProps>> = ({
       <div
         ref={containerRef}
         className={styles.ActionMenuContainer}
+        data-component="ActionMenu.Overlay"
         data-variant={responsiveVariant}
         {...(overlayProps.overflow ? {[`data-overflow-${overlayProps.overflow}`]: ''} : {})}
         {...(overlayProps.maxHeight ? {[`data-max-height-${overlayProps.maxHeight}`]: ''} : {})}

From dc1cc17366eae9cdb2f79d6611434b5f872d99cc Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Thu, 21 May 2026 16:56:57 -0700
Subject: [PATCH 2/9] update AnchoredOverlay and add test

---
 .../AnchoredOverlay/AnchoredOverlay.test.tsx  | 20 +++++++++++++++++++
 .../src/AnchoredOverlay/AnchoredOverlay.tsx   |  5 ++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx
index 255c771c6b3..63c6662a471 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx
@@ -93,6 +93,26 @@ describe.each([true, false])(
       overlayClasses.Overlay,
     )
 
+    it('renders data-component attribute on the responsive close button container when shown', () => {
+      const {baseElement} = render(
+        <FeatureFlags flags={{primer_react_css_anchor_positioning: true}}>
+          <BaseStyles>
+            <AnchoredOverlay
+              open={true}
+              onOpen={() => {}}
+              onClose={() => {}}
+              renderAnchor={props => <Button {...props}>Anchor Button</Button>}
+              variant={{regular: 'anchored', narrow: 'fullscreen'}}
+            >
+              <div>content</div>
+            </AnchoredOverlay>
+          </BaseStyles>
+        </FeatureFlags>,
+      )
+
+      expect(baseElement.querySelector('[data-component="AnchoredOverlay.CloseButtonContainer"]')).toBeInTheDocument()
+    })
+
     it('should call onOpen when the anchor is clicked', async () => {
       const mockOpenCallback = vi.fn()
       const mockCloseCallback = vi.fn()
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
index e0050775587..42cb6ae2926 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
@@ -395,7 +395,10 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
           data-side={cssAnchorPositioning ? side : position?.anchorSide}
         >
           {showXIcon ? (
-            <div className={classes.ResponsiveCloseButtonContainer}>
+            <div
+              className={classes.ResponsiveCloseButtonContainer}
+              data-component="AnchoredOverlay.CloseButtonContainer"
+            >
               <IconButton
                 {...(closeButtonProps as IconButtonProps)}
                 type="button"

From d886f3c33cd873f2c00565d78f37ad3b6637a77b Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Thu, 21 May 2026 17:09:40 -0700
Subject: [PATCH 3/9] update Autocomplete sub-components and add test

---
 .../react/src/Autocomplete/Autocomplete.test.tsx   | 14 ++++++++++++++
 .../react/src/Autocomplete/AutocompleteInput.tsx   |  1 +
 .../react/src/Autocomplete/AutocompleteOverlay.tsx |  1 +
 3 files changed, 16 insertions(+)

diff --git a/packages/react/src/Autocomplete/Autocomplete.test.tsx b/packages/react/src/Autocomplete/Autocomplete.test.tsx
index 68e61313b3e..267af66ef32 100644
--- a/packages/react/src/Autocomplete/Autocomplete.test.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.test.tsx
@@ -55,6 +55,20 @@ describe('Autocomplete', () => {
         <Autocomplete.Input {...props} />
       </Autocomplete>
     ))
+
+    it('tags overlay with data-component when menu is shown', async () => {
+      const user = userEvent.setup()
+      const {container} = render(
+        <LabelledAutocomplete
+          menuProps={{items: mockItems, selectedItemIds: [], ['aria-labelledby']: 'autocompleteLabel'}}
+        />,
+      )
+      const inputNode = container.querySelector('#autocompleteInput')!
+      await user.type(inputNode, 'z')
+
+      expect(container.querySelector('[data-component="Autocomplete.Overlay"]')).toBeInTheDocument()
+    })
+
     it('calls onChange', async () => {
       const user = userEvent.setup()
       const onChangeMock = vi.fn()
diff --git a/packages/react/src/Autocomplete/AutocompleteInput.tsx b/packages/react/src/Autocomplete/AutocompleteInput.tsx
index ef1278451a1..c12898f15f4 100644
--- a/packages/react/src/Autocomplete/AutocompleteInput.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteInput.tsx
@@ -170,6 +170,7 @@ const AutocompleteInput = React.forwardRef(
         autoComplete="off"
         id={id}
         {...props}
+        data-component="Autocomplete.Input"
       />
     )
   },
diff --git a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
index f0486c5822d..f330153c2ba 100644
--- a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
@@ -78,6 +78,7 @@ function AutocompleteOverlay({
       left={position?.left}
       className={clsx(classes.Overlay, className)}
       {...overlayProps}
+      data-component="Autocomplete.Overlay"
     >
       {children}
     </Overlay>

From 55b406e8c862c81cee64b7a7183c47717fc3531d Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Thu, 21 May 2026 17:17:06 -0700
Subject: [PATCH 4/9] update NavList and add tests

---
 packages/react/src/NavList/NavList.test.tsx | 20 ++++++++++++++++++++
 packages/react/src/NavList/NavList.tsx      | 10 ++++++++--
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/NavList/NavList.test.tsx b/packages/react/src/NavList/NavList.test.tsx
index 05f92549307..684fdf42f29 100644
--- a/packages/react/src/NavList/NavList.test.tsx
+++ b/packages/react/src/NavList/NavList.test.tsx
@@ -23,6 +23,26 @@ const NextJSLikeLink = React.forwardRef<HTMLAnchorElement, NextJSLinkProps>(
 describe('NavList', () => {
   implementsClassName(NavList)
 
+  it('renders data-component attributes for NavList and NavList.SubNav', () => {
+    const {container} = render(
+      <NavList>
+        <NavList.Item href="#">Item 1</NavList.Item>
+        <NavList.Item>
+          Item 2
+          <NavList.SubNav>
+            <NavList.Item href="#">Sub Item 1</NavList.Item>
+          </NavList.SubNav>
+        </NavList.Item>
+      </NavList>,
+    )
+
+    const nav = container.querySelector('nav')
+    expect(nav).toHaveAttribute('data-component', 'NavList')
+
+    const subNav = container.querySelector('[data-component="NavList.SubNav"]')
+    expect(subNav).toBeInTheDocument()
+  })
+
   it('supports TrailingAction', async () => {
     const {getByRole} = render(
       <NavList>
diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx
index c81795db695..15e5c3f70c1 100644
--- a/packages/react/src/NavList/NavList.tsx
+++ b/packages/react/src/NavList/NavList.tsx
@@ -29,7 +29,7 @@ export type NavListProps = {
 
 const Root = React.forwardRef<HTMLElement, NavListProps>(({children, ...props}, ref) => {
   return (
-    <nav {...props} ref={ref}>
+    <nav {...props} ref={ref} data-component="NavList">
       <ActionListContainerContext.Provider
         value={{
           container: 'NavList',
@@ -232,7 +232,13 @@ const SubNav = React.forwardRef<HTMLUListElement, NavListSubNavProps>(({children
 
   return (
     <SubNavContext.Provider value={{depth: depth + 1}}>
-      <ul className={classes.SubGroup} id={subNavId} aria-labelledby={buttonId} ref={forwardedRef}>
+      <ul
+        className={classes.SubGroup}
+        id={subNavId}
+        aria-labelledby={buttonId}
+        ref={forwardedRef}
+        data-component="NavList.SubNav"
+      >
         {children}
       </ul>
     </SubNavContext.Provider>

From c6b08e97e60c81256b206f9bdd9ea48f1658cbfa Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Thu, 21 May 2026 17:38:49 -0700
Subject: [PATCH 5/9] tweak ActionMenu implementation to avoid downstream
 conflict with ActionBar.Menu.IconButton

---
 packages/react/src/ActionMenu/ActionMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/ActionMenu/ActionMenu.tsx b/packages/react/src/ActionMenu/ActionMenu.tsx
index 5291b8d158b..bbc571dbe9d 100644
--- a/packages/react/src/ActionMenu/ActionMenu.tsx
+++ b/packages/react/src/ActionMenu/ActionMenu.tsx
@@ -248,7 +248,7 @@ const Anchor: WithSlotMarker<
         className: clsx(anchorProps.className, child.props.className),
         onClick: onButtonClick,
         onKeyDown: onButtonKeyDown,
-        ...(isCustomAnchor ? {'data-component': 'ActionMenu.Anchor'} : {}),
+        ...(isCustomAnchor && !child.props['data-component'] ? {'data-component': 'ActionMenu.Anchor'} : {}),
       })}
     </ActionListContainerContext.Provider>
   )

From 3cd151f6d7c7d164a288e708fef341978a837ee1 Mon Sep 17 00:00:00 2001
From: "Brittany L. Houtz" <55068883+llastflowers@users.noreply.github.com>
Date: Thu, 21 May 2026 17:42:10 -0700
Subject: [PATCH 6/9] add quick-ants-lead.md

---
 .changeset/quick-ants-lead.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/quick-ants-lead.md

diff --git a/.changeset/quick-ants-lead.md b/.changeset/quick-ants-lead.md
new file mode 100644
index 00000000000..2189997b67c
--- /dev/null
+++ b/.changeset/quick-ants-lead.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Add data-component attributes and associated tests for ActionMenu, AnchoredOverlay, Autocomplete, and NavList

From f3aa5494d97b8997bbbc2651ffcec937997522d1 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Fri, 22 May 2026 09:14:56 -0700
Subject: [PATCH 7/9] change override prevention logic in ActionMenu to prevent
 unwanted overrides

---
 packages/react/src/ActionMenu/ActionMenu.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/ActionMenu/ActionMenu.tsx b/packages/react/src/ActionMenu/ActionMenu.tsx
index bbc571dbe9d..7e4fb0fd053 100644
--- a/packages/react/src/ActionMenu/ActionMenu.tsx
+++ b/packages/react/src/ActionMenu/ActionMenu.tsx
@@ -237,8 +237,7 @@ const Anchor: WithSlotMarker<
     [isSubmenu, onOpen, parentActionListContext],
   )
 
-  // only add data-component to the anchor if it's not a button, so we don't accidentally override
-  const isCustomAnchor = child.type !== Button
+  const dataComponent = child.props['data-component'] ?? 'ActionMenu.Anchor' // avoid unwanted downstream overrides
 
   return (
     <ActionListContainerContext.Provider value={thisActionListContext}>
@@ -248,7 +247,7 @@ const Anchor: WithSlotMarker<
         className: clsx(anchorProps.className, child.props.className),
         onClick: onButtonClick,
         onKeyDown: onButtonKeyDown,
-        ...(isCustomAnchor && !child.props['data-component'] ? {'data-component': 'ActionMenu.Anchor'} : {}),
+        'data-component': dataComponent,
       })}
     </ActionListContainerContext.Provider>
   )

From 24026bed152ab685e7b8ae30ede43ff0f83ff399 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Fri, 22 May 2026 09:55:20 -0700
Subject: [PATCH 8/9] remove data-component from ActionMenu.Anchor

---
 packages/react/src/ActionMenu/ActionMenu.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/react/src/ActionMenu/ActionMenu.tsx b/packages/react/src/ActionMenu/ActionMenu.tsx
index 7e4fb0fd053..abdab145fa1 100644
--- a/packages/react/src/ActionMenu/ActionMenu.tsx
+++ b/packages/react/src/ActionMenu/ActionMenu.tsx
@@ -237,8 +237,6 @@ const Anchor: WithSlotMarker<
     [isSubmenu, onOpen, parentActionListContext],
   )
 
-  const dataComponent = child.props['data-component'] ?? 'ActionMenu.Anchor' // avoid unwanted downstream overrides
-
   return (
     <ActionListContainerContext.Provider value={thisActionListContext}>
       {React.cloneElement(child, {
@@ -247,7 +245,6 @@ const Anchor: WithSlotMarker<
         className: clsx(anchorProps.className, child.props.className),
         onClick: onButtonClick,
         onKeyDown: onButtonKeyDown,
-        'data-component': dataComponent,
       })}
     </ActionListContainerContext.Provider>
   )

From bc3dc323f0010dd39185c2042a7a7fd59606b37a Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Fri, 22 May 2026 10:56:38 -0700
Subject: [PATCH 9/9] test fixes

---
 .../AnchoredOverlay/AnchoredOverlay.test.tsx  | 40 +++++++++----------
 packages/react/src/NavList/NavList.test.tsx   |  1 +
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx
index 63c6662a471..27b1d4bf6be 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx
@@ -93,26 +93,6 @@ describe.each([true, false])(
       overlayClasses.Overlay,
     )
 
-    it('renders data-component attribute on the responsive close button container when shown', () => {
-      const {baseElement} = render(
-        <FeatureFlags flags={{primer_react_css_anchor_positioning: true}}>
-          <BaseStyles>
-            <AnchoredOverlay
-              open={true}
-              onOpen={() => {}}
-              onClose={() => {}}
-              renderAnchor={props => <Button {...props}>Anchor Button</Button>}
-              variant={{regular: 'anchored', narrow: 'fullscreen'}}
-            >
-              <div>content</div>
-            </AnchoredOverlay>
-          </BaseStyles>
-        </FeatureFlags>,
-      )
-
-      expect(baseElement.querySelector('[data-component="AnchoredOverlay.CloseButtonContainer"]')).toBeInTheDocument()
-    })
-
     it('should call onOpen when the anchor is clicked', async () => {
       const mockOpenCallback = vi.fn()
       const mockCloseCallback = vi.fn()
@@ -220,6 +200,26 @@ describe.each([true, false])(
       })
     })
 
+    it('renders data-component attribute on the responsive close button container when shown', () => {
+      const {baseElement} = render(
+        <FeatureFlags flags={{primer_react_css_anchor_positioning: true}}>
+          <BaseStyles>
+            <AnchoredOverlay
+              open={true}
+              onOpen={() => {}}
+              onClose={() => {}}
+              renderAnchor={props => <Button {...props}>Anchor Button</Button>}
+              variant={{regular: 'anchored', narrow: 'fullscreen'}}
+            >
+              <div>content</div>
+            </AnchoredOverlay>
+          </BaseStyles>
+        </FeatureFlags>,
+      )
+
+      expect(baseElement.querySelector('[data-component="AnchoredOverlay.CloseButtonContainer"]')).toBeInTheDocument()
+    })
+
     it('should support a `ref` through `overlayProps` on the overlay element', () => {
       const ref = createRef<HTMLDivElement>()
 
diff --git a/packages/react/src/NavList/NavList.test.tsx b/packages/react/src/NavList/NavList.test.tsx
index 684fdf42f29..0ece5c490e8 100644
--- a/packages/react/src/NavList/NavList.test.tsx
+++ b/packages/react/src/NavList/NavList.test.tsx
@@ -37,6 +37,7 @@ describe('NavList', () => {
     )
 
     const nav = container.querySelector('nav')
+    expect(nav).toBeInTheDocument()
     expect(nav).toHaveAttribute('data-component', 'NavList')
 
     const subNav = container.querySelector('[data-component="NavList.SubNav"]')