From 85794f99b82ad26632f7805b95e7e66ea041fa9b Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Fri, 6 Jan 2023 12:52:24 -0800
Subject: [PATCH 1/4] fix: add aria-owns to combobox and dropdown root

---
 .../src/components/Combobox/Combobox.test.tsx       | 12 ++++++++++++
 .../Combobox/__snapshots__/Combobox.test.tsx.snap   |  1 +
 .../src/components/Combobox/useCombobox.tsx         |  3 ++-
 .../src/components/Dropdown/Dropdown.test.tsx       | 13 +++++++++++++
 .../Dropdown/__snapshots__/Dropdown.test.tsx.snap   |  9 +++++----
 .../src/components/Dropdown/useDropdown.tsx         |  1 +
 .../src/utils/useTriggerListboxSlots.ts             |  4 +++-
 7 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx b/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx
index 14003e83921ab7..e5ad059520970c 100644
--- a/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx
+++ b/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx
@@ -136,6 +136,18 @@ describe('Combobox', () => {
     expect(chevronButton?.getAttribute('aria-labelledby')).toEqual('testId');
   });
 
+  it('adds aria-owns pointing to the popup', () => {
+    const { getByRole, container } = render(
+      <Combobox open className="root">
+        <Option>Red</Option>
+        <Option>Green</Option>
+        <Option>Blue</Option>
+      </Combobox>,
+    );
+    const listboxId = getByRole('listbox').id;
+    expect(container.querySelector('.root')?.getAttribute('aria-owns')).toEqual(listboxId);\
+  });
+
   /* open/close tests */
   it('opens the popup on click', () => {
     const { getByRole } = render(
diff --git a/packages/react-components/react-combobox/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap b/packages/react-components/react-combobox/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap
index 62f751823dd848..a682e3698fe6e1 100644
--- a/packages/react-components/react-combobox/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap
+++ b/packages/react-components/react-combobox/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap
@@ -73,6 +73,7 @@ exports[`Combobox renders an open listbox 1`] = `
     </span>
     <div
       class="fui-Listbox fui-Combobox__listbox"
+      id="fluent-listbox10"
       role="listbox"
       style="position: fixed; left: 0px; top: 0px; margin: 0px; width: 0px;"
     >
diff --git a/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx b/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx
index 5f96757a5d0448..b75183962b59c7 100644
--- a/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx
+++ b/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx
@@ -44,7 +44,7 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLIn
     setValue,
     value,
   } = baseState;
-  const { disabled, freeform, multiselect } = props;
+  const { disabled, freeform, inlinePopup, multiselect } = props;
   const comboId = useId('combobox-');
 
   const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({
@@ -194,6 +194,7 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLIn
     root: resolveShorthand(props.root, {
       required: true,
       defaultProps: {
+        'aria-owns': !inlinePopup ? listboxSlot?.id : undefined,
         ...rootNativeProps,
       },
     }),
diff --git a/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.test.tsx b/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.test.tsx
index 61e514b0e04152..c439761fa67a57 100644
--- a/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.test.tsx
+++ b/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.test.tsx
@@ -68,6 +68,19 @@ describe('Dropdown', () => {
     expect(container.querySelector('[role=listbox]')).not.toBeNull();
   });
 
+  it('adds aria-owns pointing to the popup', () => {
+    const { getByRole, container } = render(
+      <Dropdown open className="root">
+        <Option>Red</Option>
+        <Option>Green</Option>
+        <Option>Blue</Option>
+      </Dropdown>,
+    );
+
+    const listboxId = getByRole('listbox').id;
+    expect(container.querySelector('.root')?.getAttribute('aria-owns')).toEqual(listboxId);
+  });
+
   /* open/close tests */
   it('opens the popup on click', () => {
     const { getByRole } = render(
diff --git a/packages/react-components/react-combobox/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/react-components/react-combobox/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index 7dcf6069bcc49f..74ee1175af7b74 100644
--- a/packages/react-components/react-combobox/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
+++ b/packages/react-components/react-combobox/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -40,7 +40,7 @@ exports[`Dropdown renders an open listbox 1`] = `
     class="fui-Dropdown"
   >
     <button
-      aria-activedescendant="fluent-option1"
+      aria-activedescendant="fluent-option11"
       aria-expanded="true"
       class="fui-Dropdown__button"
       role="combobox"
@@ -67,13 +67,14 @@ exports[`Dropdown renders an open listbox 1`] = `
     </button>
     <div
       class="fui-Listbox fui-Dropdown__listbox"
+      id="fluent-listbox10"
       role="listbox"
       style="position: fixed; left: 0px; top: 0px; margin: 0px; width: 0px;"
     >
       <div
         aria-selected="false"
         class="fui-Option"
-        id="fluent-option1"
+        id="fluent-option11"
         role="option"
       >
         <span
@@ -100,7 +101,7 @@ exports[`Dropdown renders an open listbox 1`] = `
       <div
         aria-selected="false"
         class="fui-Option"
-        id="fluent-option2"
+        id="fluent-option12"
         role="option"
       >
         <span
@@ -127,7 +128,7 @@ exports[`Dropdown renders an open listbox 1`] = `
       <div
         aria-selected="false"
         class="fui-Option"
-        id="fluent-option3"
+        id="fluent-option13"
         role="option"
       >
         <span
diff --git a/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx b/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx
index 143d8a31565f0e..4f1c8a3cf7e694 100644
--- a/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx
+++ b/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx
@@ -146,6 +146,7 @@ export const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLBu
     root: resolveShorthand(props.root, {
       required: true,
       defaultProps: {
+        'aria-owns': !props.inlinePopup ? listboxSlot?.id : undefined,
         children: props.children,
         ...rootNativeProps,
       },
diff --git a/packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts b/packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts
index 19d4f4d5d22c4a..4cd4cce103227b 100644
--- a/packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts
+++ b/packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { mergeCallbacks, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { mergeCallbacks, useId, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';
 import { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';
 import { Listbox } from '../components/Listbox/Listbox';
@@ -54,7 +54,9 @@ export function useTriggerListboxSlots(
   const triggerRef: typeof ref = React.useRef(null);
 
   // resolve listbox shorthand props
+  const listboxId = useId('fluent-listbox', listboxSlot?.id);
   const listbox: typeof listboxSlot = listboxSlot && {
+    id: listboxId,
     multiselect,
     tabIndex: undefined,
     ...listboxSlot,

From cbeba3f911f71b2682ea107abab6e4cca3f6a06f Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Fri, 6 Jan 2023 14:43:22 -0800
Subject: [PATCH 2/4] change file

---
 ...eact-combobox-9ad3f5bc-8c19-4f73-a4b3-1cd41e43e7b2.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-combobox-9ad3f5bc-8c19-4f73-a4b3-1cd41e43e7b2.json

diff --git a/change/@fluentui-react-combobox-9ad3f5bc-8c19-4f73-a4b3-1cd41e43e7b2.json b/change/@fluentui-react-combobox-9ad3f5bc-8c19-4f73-a4b3-1cd41e43e7b2.json
new file mode 100644
index 00000000000000..29b71f78696eb8
--- /dev/null
+++ b/change/@fluentui-react-combobox-9ad3f5bc-8c19-4f73-a4b3-1cd41e43e7b2.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: add aria-owns to combobox and dropdown\"",
+  "packageName": "@fluentui/react-combobox",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 8a6abaeac6c7cf27692421284769fa56c2dac60c Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Tue, 10 Jan 2023 17:03:15 -0800
Subject: [PATCH 3/4] fix typo

---
 .../react-combobox/src/components/Combobox/Combobox.test.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx b/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx
index e5ad059520970c..928b1c1310ce05 100644
--- a/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx
+++ b/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx
@@ -145,7 +145,7 @@ describe('Combobox', () => {
       </Combobox>,
     );
     const listboxId = getByRole('listbox').id;
-    expect(container.querySelector('.root')?.getAttribute('aria-owns')).toEqual(listboxId);\
+    expect(container.querySelector('.root')?.getAttribute('aria-owns')).toEqual(listboxId);
   });
 
   /* open/close tests */

From a31293d4b50bfbae8be38c4cd1e8bea8ba433cd0 Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Tue, 10 Jan 2023 17:26:18 -0800
Subject: [PATCH 4/4] update snapshot after rebase

---
 .../Combobox/__snapshots__/Combobox.test.tsx.snap      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-components/react-combobox/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap b/packages/react-components/react-combobox/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap
index a682e3698fe6e1..68106a0997cbb6 100644
--- a/packages/react-components/react-combobox/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap
+++ b/packages/react-components/react-combobox/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`Combobox renders an open listbox 1`] = `
     class="fui-Combobox"
   >
     <input
-      aria-activedescendant="fluent-option11"
+      aria-activedescendant="fluent-option21"
       aria-expanded="true"
       class="fui-Combobox__input"
       role="combobox"
@@ -73,14 +73,14 @@ exports[`Combobox renders an open listbox 1`] = `
     </span>
     <div
       class="fui-Listbox fui-Combobox__listbox"
-      id="fluent-listbox10"
+      id="fluent-listbox20"
       role="listbox"
       style="position: fixed; left: 0px; top: 0px; margin: 0px; width: 0px;"
     >
       <div
         aria-selected="false"
         class="fui-Option"
-        id="fluent-option11"
+        id="fluent-option21"
         role="option"
       >
         <span
@@ -107,7 +107,7 @@ exports[`Combobox renders an open listbox 1`] = `
       <div
         aria-selected="false"
         class="fui-Option"
-        id="fluent-option12"
+        id="fluent-option22"
         role="option"
       >
         <span
@@ -134,7 +134,7 @@ exports[`Combobox renders an open listbox 1`] = `
       <div
         aria-selected="false"
         class="fui-Option"
-        id="fluent-option13"
+        id="fluent-option23"
         role="option"
       >
         <span