From b676a695730e220293da1de1b5e9e3bcdf5555df Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@users.noreply.github.com>
Date: Wed, 30 Aug 2023 14:24:48 -0500
Subject: [PATCH 1/3] fix(ActionList): place `id` on item with role

---
 src/ActionList/Item.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
index cbe721b9cfa..ee99ddf030f 100644
--- a/src/ActionList/Item.tsx
+++ b/src/ActionList/Item.tsx
@@ -183,10 +183,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
 
@@ -201,6 +201,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

From 2d6386b2fb96e5e16a82f8f6a27d6e743ecaabe7 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@users.noreply.github.com>
Date: Wed, 30 Aug 2023 14:25:34 -0500
Subject: [PATCH 2/3] chore: add changeset

---
 .changeset/giant-bobcats-deliver.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/giant-bobcats-deliver.md

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 -->

From fb42cb846c2f77e187c8d0dc484a132aac437139 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@users.noreply.github.com>
Date: Thu, 7 Sep 2023 11:03:04 -0500
Subject: [PATCH 3/3] test: update snapshots and tests with new id

---
 package-lock.json                             |  4 +-
 .../__snapshots__/NavList.test.tsx.snap       | 49 +++++++++++--------
 .../InlineAutocomplete.test.tsx               |  4 +-
 3 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 03c7e80ea7c..406995744c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@primer/react",
-  "version": "35.28.0",
+  "version": "35.29.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@primer/react",
-      "version": "35.28.0",
+      "version": "35.29.0",
       "license": "MIT",
       "dependencies": {
         "@github/combobox-nav": "^2.1.5",
diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap
index b50e0e3e252..a8ed9fd5de8 100644
--- a/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -304,9 +304,10 @@ exports[`NavList renders a simple list 1`] = `
       >
         <a
           aria-current="page"
-          aria-labelledby="react-aria-1 "
+          aria-labelledby="react-aria-1--label "
           class="c3"
           href="/"
+          id="react-aria-1"
           tabindex="0"
         >
           <div
@@ -315,7 +316,7 @@ exports[`NavList renders a simple list 1`] = `
           >
             <span
               class="c5"
-              id="react-aria-1"
+              id="react-aria-1--label"
             >
               Home
             </span>
@@ -326,9 +327,10 @@ exports[`NavList renders a simple list 1`] = `
         class="c1 c6"
       >
         <a
-          aria-labelledby="react-aria-4 "
+          aria-labelledby="react-aria-2--label "
           class="c3"
           href="/about"
+          id="react-aria-2"
           tabindex="0"
         >
           <div
@@ -337,7 +339,7 @@ exports[`NavList renders a simple list 1`] = `
           >
             <span
               class="c5"
-              id="react-aria-4"
+              id="react-aria-2--label"
             >
               About
             </span>
@@ -348,9 +350,10 @@ exports[`NavList renders a simple list 1`] = `
         class="c1 c6"
       >
         <a
-          aria-labelledby="react-aria-7 "
+          aria-labelledby="react-aria-3--label "
           class="c3"
           href="/contact"
+          id="react-aria-3"
           tabindex="0"
         >
           <div
@@ -359,7 +362,7 @@ exports[`NavList renders a simple list 1`] = `
           >
             <span
               class="c5"
-              id="react-aria-7"
+              id="react-aria-3--label"
             >
               Contact
             </span>
@@ -732,9 +735,10 @@ exports[`NavList renders with groups 1`] = `
           >
             <a
               aria-current="page"
-              aria-labelledby="react-aria-2 "
+              aria-labelledby="react-aria-2--label "
               class="c7"
               href="/getting-started"
+              id="react-aria-2"
               tabindex="0"
             >
               <div
@@ -743,7 +747,7 @@ exports[`NavList renders with groups 1`] = `
               >
                 <span
                   class="c9"
-                  id="react-aria-2"
+                  id="react-aria-2--label"
                 >
                   Getting started
                 </span>
@@ -766,22 +770,23 @@ exports[`NavList renders with groups 1`] = `
           role="presentation"
         >
           <span
-            id="react-aria-5"
+            id="react-aria-3"
           >
             Components
           </span>
         </div>
         <ul
-          aria-labelledby="react-aria-5"
+          aria-labelledby="react-aria-3"
           class="c4"
         >
           <li
             class="c5 c10"
           >
             <a
-              aria-labelledby="react-aria-6 "
+              aria-labelledby="react-aria-4--label "
               class="c7"
               href="/Avatar"
+              id="react-aria-4"
               tabindex="0"
             >
               <div
@@ -790,7 +795,7 @@ exports[`NavList renders with groups 1`] = `
               >
                 <span
                   class="c9"
-                  id="react-aria-6"
+                  id="react-aria-4--label"
                 >
                   Avatar
                 </span>
@@ -1194,8 +1199,9 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
         <button
           aria-controls="react-aria-2"
           aria-expanded="true"
-          aria-labelledby="react-aria-1 "
+          aria-labelledby="react-aria-1--label "
           class="c2 c3"
+          id="react-aria-1"
           tabindex="0"
         >
           <div
@@ -1207,7 +1213,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
             >
               <span
                 class="c6"
-                id="react-aria-1"
+                id="react-aria-1--label"
               >
                 Item
               </span>
@@ -1244,9 +1250,10 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
             >
               <a
                 aria-current="page"
-                aria-labelledby="react-aria-3 "
+                aria-labelledby="react-aria-3--label "
                 class="c11"
                 href="#"
+                id="react-aria-3"
                 tabindex="0"
               >
                 <div
@@ -1255,7 +1262,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
                 >
                   <span
                     class="c6"
-                    id="react-aria-3"
+                    id="react-aria-3--label"
                   >
                     Sub Item
                   </span>
@@ -1672,8 +1679,9 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
         <button
           aria-controls="react-aria-2"
           aria-expanded="false"
-          aria-labelledby="react-aria-1 "
+          aria-labelledby="react-aria-1--label "
           class="c2 c3"
+          id="react-aria-1"
           tabindex="0"
         >
           <div
@@ -1685,7 +1693,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
             >
               <span
                 class="c6"
-                id="react-aria-1"
+                id="react-aria-1--label"
               >
                 Item
               </span>
@@ -1722,9 +1730,10 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
             >
               <a
                 aria-current="page"
-                aria-labelledby="react-aria-3 "
+                aria-labelledby="react-aria-3--label "
                 class="c11"
                 href="#"
+                id="react-aria-3"
                 tabindex="0"
               >
                 <div
@@ -1733,7 +1742,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
                 >
                   <span
                     class="c6"
-                    id="react-aria-3"
+                    id="react-aria-3--label"
                   >
                     Sub Item
                   </span>
diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx b/src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx
index 5b090e5eb5d..948e0c56d00 100644
--- a/src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx
+++ b/src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx
@@ -1,5 +1,5 @@
 import React, {useLayoutEffect, useState} from 'react'
-import {fireEvent, render, within} from '@testing-library/react'
+import {fireEvent, render, within, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import InlineAutocomplete, {ShowSuggestionsEvent, Suggestions, Trigger} from '.'
 import FormControl from '../../FormControl'
@@ -361,7 +361,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}')