From 977d06fa8826d491854b6f2a81335daa20418789 Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Mon, 30 Jan 2023 15:41:48 -0800
Subject: [PATCH 1/9] fix: checkbox/label pattern with role override results in
 duplicate input and label announcements

---
 .../react/src/components/Dropdown/Dropdown.base.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/Dropdown/Dropdown.base.tsx b/packages/react/src/components/Dropdown/Dropdown.base.tsx
index dc043a9bd0633..20662f48e492e 100644
--- a/packages/react/src/components/Dropdown/Dropdown.base.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.base.tsx
@@ -346,7 +346,7 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
       isRenderingPlaceholder: !selectedOptions.length,
       panelClassName: panelProps ? panelProps.className : undefined,
       calloutClassName: calloutProps ? calloutProps.className : undefined,
-      calloutRenderEdge: calloutRenderEdge,
+      calloutRenderEdge,
     });
 
     const hasErrorMessage: boolean = !!errorMessage && errorMessage.length > 0;
@@ -847,13 +847,14 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
         label={item.text}
         title={title}
         // eslint-disable-next-line react/jsx-no-bind
-        onRenderLabel={this._onRenderItemLabel.bind(this, item)}
+        onRenderLabel={this._onRenderItemLabel.bind(this, item, this._listId + item.index + '-label')}
         className={css(itemClassName, 'is-multi-select')}
         checked={isItemSelected}
         styles={multiSelectItemStyles}
         ariaPositionInSet={!item.hidden ? this._sizePosCache.positionInSet(item.index) : undefined}
         ariaSetSize={!item.hidden ? this._sizePosCache.optionSetSize : undefined}
         ariaLabel={item.ariaLabel}
+        ariaLabelledBy={item.ariaLabel ? undefined : this._listId + item.index + '-label'}
       />
     );
   };
@@ -864,9 +865,13 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
   };
 
   /** Render custom label for drop down item */
-  private _onRenderItemLabel = (item: IDropdownOption): JSX.Element | null => {
+  private _onRenderItemLabel = (item: IDropdownOption, id: string): JSX.Element | null => {
     const { onRenderOption = this._onRenderOption } = this.props;
-    return onRenderOption(item, this._onRenderOption);
+    return (
+      <div id={id} aria-hidden="true">
+        {onRenderOption(item, this._onRenderOption)}
+      </div>
+    );
   };
 
   private _onPositioned = (positions?: ICalloutPositionedInfo): void => {

From 72f507fffe551e78f0cf47b6a90ac7cbcfbc861a Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Mon, 30 Jan 2023 15:46:10 -0800
Subject: [PATCH 2/9] fix combobox checkbox/label pattern

---
 packages/react/src/components/ComboBox/ComboBox.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
index 03eb5041dd6f8..c2d163d1faa83 100644
--- a/packages/react/src/components/ComboBox/ComboBox.tsx
+++ b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -1489,7 +1489,7 @@ class ComboBoxInternal extends React.Component<IComboBoxInternalProps, IComboBox
 
   private _renderOption = (item: IComboBoxOption): JSX.Element => {
     const { onRenderOption = this._onRenderOptionContent } = this.props;
-    const id = this._id;
+    const id = item.id ?? this._id + '-list' + item.index;
     const isSelected: boolean = this._isOptionSelected(item.index);
     const isChecked: boolean = this._isOptionChecked(item.index);
     const isIndeterminate: boolean = this._isOptionIndeterminate(item.index);
@@ -1497,12 +1497,16 @@ class ComboBoxInternal extends React.Component<IComboBoxInternalProps, IComboBox
     const optionClassNames = getComboBoxOptionClassNames(this._getCurrentOptionStyles(item));
     const title = item.title;
 
-    const onRenderCheckboxLabel = () => onRenderOption(item, this._onRenderOptionContent);
+    const onRenderCheckboxLabel = () => (
+      <div id={id + '-label'} aria-hidden="true">
+        onRenderOption(item, this._onRenderOptionContent)
+      </div>
+    );
 
     const getOptionComponent = () => {
       return !this.props.multiSelect ? (
         <CommandButton
-          id={item.id ?? id + '-list' + item.index}
+          id={id}
           key={item.key}
           data-index={item.index}
           styles={optionStyles}
@@ -1529,8 +1533,9 @@ class ComboBoxInternal extends React.Component<IComboBoxInternalProps, IComboBox
         </CommandButton>
       ) : (
         <Checkbox
-          id={item.id ?? id + '-list' + item.index}
+          id={id}
           ariaLabel={item.ariaLabel}
+          ariaLabelledBy={item.ariaLabel ? undefined : id + '-label'}
           key={item.key}
           styles={optionStyles}
           className={'ms-ComboBox-option'}

From 62703ee0f40f587df83ff723331dd96460d63064 Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Mon, 30 Jan 2023 15:47:18 -0800
Subject: [PATCH 3/9] change file

---
 ...luentui-react-89173b86-4f03-440a-93e8-23c4c3569f3b.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-89173b86-4f03-440a-93e8-23c4c3569f3b.json

diff --git a/change/@fluentui-react-89173b86-4f03-440a-93e8-23c4c3569f3b.json b/change/@fluentui-react-89173b86-4f03-440a-93e8-23c4c3569f3b.json
new file mode 100644
index 0000000000000..931347c628e03
--- /dev/null
+++ b/change/@fluentui-react-89173b86-4f03-440a-93e8-23c4c3569f3b.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Combobox/Dropdown multiselect checkbox+label pattern with role=option results in duplicate text",
+  "packageName": "@fluentui/react",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 4591967b65b937ce0cd60d954d0f9ce81a39e905 Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Tue, 31 Jan 2023 09:41:35 -0800
Subject: [PATCH 4/9] update with suggestions

---
 packages/react/src/components/ComboBox/ComboBox.tsx  |  2 +-
 .../react/src/components/Dropdown/Dropdown.base.tsx  | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
index c2d163d1faa83..87dce504ad815 100644
--- a/packages/react/src/components/ComboBox/ComboBox.tsx
+++ b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -1499,7 +1499,7 @@ class ComboBoxInternal extends React.Component<IComboBoxInternalProps, IComboBox
 
     const onRenderCheckboxLabel = () => (
       <div id={id + '-label'} aria-hidden="true">
-        onRenderOption(item, this._onRenderOptionContent)
+        {onRenderOption(item, this._onRenderOptionContent)}
       </div>
     );
 
diff --git a/packages/react/src/components/Dropdown/Dropdown.base.tsx b/packages/react/src/components/Dropdown/Dropdown.base.tsx
index 20662f48e492e..c3d8cbbf4dbbc 100644
--- a/packages/react/src/components/Dropdown/Dropdown.base.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.base.tsx
@@ -796,6 +796,10 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
 
     const { title } = item;
 
+    // define the id and label id (for multiselect checkboxes)
+    const id = this._listId + item.index;
+    const labelId = id + '-label';
+
     const multiSelectItemStyles = this._classNames.subComponentStyles
       ? (this._classNames.subComponentStyles.multiSelectItem as IStyleFunctionOrObject<
           ICheckboxStyleProps,
@@ -805,7 +809,7 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
 
     return !this.props.multiSelect ? (
       <CommandButton
-        id={this._listId + item.index}
+        id={id}
         key={item.key}
         data-index={item.index}
         data-is-focusable={!item.disabled}
@@ -829,7 +833,7 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
       </CommandButton>
     ) : (
       <Checkbox
-        id={this._listId + item.index}
+        id={id}
         key={item.key}
         disabled={item.disabled}
         onChange={this._onItemClick(item)}
@@ -847,14 +851,14 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
         label={item.text}
         title={title}
         // eslint-disable-next-line react/jsx-no-bind
-        onRenderLabel={this._onRenderItemLabel.bind(this, item, this._listId + item.index + '-label')}
+        onRenderLabel={this._onRenderItemLabel.bind(this, item, labelId)}
         className={css(itemClassName, 'is-multi-select')}
         checked={isItemSelected}
         styles={multiSelectItemStyles}
         ariaPositionInSet={!item.hidden ? this._sizePosCache.positionInSet(item.index) : undefined}
         ariaSetSize={!item.hidden ? this._sizePosCache.optionSetSize : undefined}
         ariaLabel={item.ariaLabel}
-        ariaLabelledBy={item.ariaLabel ? undefined : this._listId + item.index + '-label'}
+        ariaLabelledBy={item.ariaLabel ? undefined : labelId}
       />
     );
   };

From 5b428d82e5795876ef23b66361150220f3e62822 Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Tue, 31 Jan 2023 14:57:44 -0800
Subject: [PATCH 5/9] update snapshots

---
 .../__snapshots__/ComboBox.test.tsx.snap      | 72 +++++++++-------
 .../__snapshots__/Dropdown.test.tsx.snap      | 84 +++++++++++--------
 2 files changed, 90 insertions(+), 66 deletions(-)

diff --git a/packages/react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap b/packages/react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
index 802b78a6b8d3f..acd5e81edaf79 100644
--- a/packages/react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
+++ b/packages/react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
@@ -1641,6 +1641,7 @@ exports[`ComboBox Renders correctly when opened in multi-select mode 1`] = `
                           }
                     >
                       <input
+                        aria-labelledby="ComboBox0-list1-label"
                         aria-selected="false"
                         class=
 
@@ -1741,22 +1742,27 @@ exports[`ComboBox Renders correctly when opened in multi-select mode 1`] = `
                             
                           </i>
                         </div>
-                        <span
-                          class=
-                              ms-ComboBox-optionText
-                              {
-                                display: inline-block;
-                                max-width: 100%;
-                                min-width: 0px;
-                                overflow-wrap: break-word;
-                                overflow: hidden;
-                                text-overflow: ellipsis;
-                                white-space: nowrap;
-                                word-wrap: break-word;
-                              }
+                        <div
+                          aria-hidden="true"
+                          id="ComboBox0-list1-label"
                         >
-                          Option 1
-                        </span>
+                          <span
+                            class=
+                                ms-ComboBox-optionText
+                                {
+                                  display: inline-block;
+                                  max-width: 100%;
+                                  min-width: 0px;
+                                  overflow-wrap: break-word;
+                                  overflow: hidden;
+                                  text-overflow: ellipsis;
+                                  white-space: nowrap;
+                                  word-wrap: break-word;
+                                }
+                          >
+                            Option 1
+                          </span>
+                        </div>
                       </label>
                     </div>
                     <div
@@ -1854,6 +1860,7 @@ exports[`ComboBox Renders correctly when opened in multi-select mode 1`] = `
                         }
                   >
                     <input
+                      aria-labelledby="ComboBox0-list3-label"
                       aria-selected="true"
                       checked=""
                       class=
@@ -1958,22 +1965,27 @@ exports[`ComboBox Renders correctly when opened in multi-select mode 1`] = `
                           
                         </i>
                       </div>
-                      <span
-                        class=
-                            ms-ComboBox-optionText
-                            {
-                              display: inline-block;
-                              max-width: 100%;
-                              min-width: 0px;
-                              overflow-wrap: break-word;
-                              overflow: hidden;
-                              text-overflow: ellipsis;
-                              white-space: nowrap;
-                              word-wrap: break-word;
-                            }
+                      <div
+                        aria-hidden="true"
+                        id="ComboBox0-list3-label"
                       >
-                        Option 2
-                      </span>
+                        <span
+                          class=
+                              ms-ComboBox-optionText
+                              {
+                                display: inline-block;
+                                max-width: 100%;
+                                min-width: 0px;
+                                overflow-wrap: break-word;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                white-space: nowrap;
+                                word-wrap: break-word;
+                              }
+                        >
+                          Option 2
+                        </span>
+                      </div>
                     </label>
                   </div>
                 </div>
diff --git a/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index be458943aaa5e..908835e44e576 100644
--- a/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
+++ b/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -468,6 +468,7 @@ exports[`Dropdown multi-select Renders correctly when open 1`] = `
                           }
                     >
                       <input
+                        aria-labelledby="Dropdown0-list1-label"
                         aria-posinset="1"
                         aria-selected="true"
                         aria-setsize="2"
@@ -581,25 +582,30 @@ exports[`Dropdown multi-select Renders correctly when open 1`] = `
                             
                           </i>
                         </div>
-                        <span
-                          class=
-                              ms-Dropdown-optionText
-                              {
-                                margin-bottom: 1px;
-                                margin-left: 1px;
-                                margin-right: 1px;
-                                margin-top: 1px;
-                                max-width: 100%;
-                                min-width: 0px;
-                                overflow-wrap: break-word;
-                                overflow: hidden;
-                                text-overflow: ellipsis;
-                                white-space: nowrap;
-                                word-wrap: break-word;
-                              }
+                        <div
+                          aria-hidden="true"
+                          id="Dropdown0-list1-label"
                         >
-                          1
-                        </span>
+                          <span
+                            class=
+                                ms-Dropdown-optionText
+                                {
+                                  margin-bottom: 1px;
+                                  margin-left: 1px;
+                                  margin-right: 1px;
+                                  margin-top: 1px;
+                                  max-width: 100%;
+                                  min-width: 0px;
+                                  overflow-wrap: break-word;
+                                  overflow: hidden;
+                                  text-overflow: ellipsis;
+                                  white-space: nowrap;
+                                  word-wrap: break-word;
+                                }
+                          >
+                            1
+                          </span>
+                        </div>
                       </label>
                     </div>
                     <div
@@ -714,6 +720,7 @@ exports[`Dropdown multi-select Renders correctly when open 1`] = `
                     title="test"
                   >
                     <input
+                      aria-labelledby="Dropdown0-list3-label"
                       aria-posinset="2"
                       aria-selected="false"
                       aria-setsize="2"
@@ -824,25 +831,30 @@ exports[`Dropdown multi-select Renders correctly when open 1`] = `
                           
                         </i>
                       </div>
-                      <span
-                        class=
-                            ms-Dropdown-optionText
-                            {
-                              margin-bottom: 1px;
-                              margin-left: 1px;
-                              margin-right: 1px;
-                              margin-top: 1px;
-                              max-width: 100%;
-                              min-width: 0px;
-                              overflow-wrap: break-word;
-                              overflow: hidden;
-                              text-overflow: ellipsis;
-                              white-space: nowrap;
-                              word-wrap: break-word;
-                            }
+                      <div
+                        aria-hidden="true"
+                        id="Dropdown0-list3-label"
                       >
-                        2
-                      </span>
+                        <span
+                          class=
+                              ms-Dropdown-optionText
+                              {
+                                margin-bottom: 1px;
+                                margin-left: 1px;
+                                margin-right: 1px;
+                                margin-top: 1px;
+                                max-width: 100%;
+                                min-width: 0px;
+                                overflow-wrap: break-word;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                white-space: nowrap;
+                                word-wrap: break-word;
+                              }
+                        >
+                          2
+                        </span>
+                      </div>
                     </label>
                   </div>
                 </div>

From b293b73c5520426a35b7f2e761ca523919eca2e5 Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Tue, 31 Jan 2023 17:32:03 -0800
Subject: [PATCH 6/9] update implementation to not add extra element

---
 .../src/components/ComboBox/ComboBox.tsx      | 26 ++++++++++++++-----
 .../src/components/Dropdown/Dropdown.base.tsx | 22 +++++++++++-----
 2 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
index 87dce504ad815..890c7378665ad 100644
--- a/packages/react/src/components/ComboBox/ComboBox.tsx
+++ b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -1487,6 +1487,11 @@ class ComboBoxInternal extends React.Component<IComboBoxInternalProps, IComboBox
     );
   }
 
+  private _renderCheckboxLabel(item: IComboBoxOption): JSX.Element {
+    const { onRenderOption = this._onRenderMultiselectOptionContent } = this.props;
+    return onRenderOption(item, this._onRenderMultiselectOptionContent);
+  }
+
   private _renderOption = (item: IComboBoxOption): JSX.Element => {
     const { onRenderOption = this._onRenderOptionContent } = this.props;
     const id = item.id ?? this._id + '-list' + item.index;
@@ -1497,12 +1502,6 @@ class ComboBoxInternal extends React.Component<IComboBoxInternalProps, IComboBox
     const optionClassNames = getComboBoxOptionClassNames(this._getCurrentOptionStyles(item));
     const title = item.title;
 
-    const onRenderCheckboxLabel = () => (
-      <div id={id + '-label'} aria-hidden="true">
-        {onRenderOption(item, this._onRenderOptionContent)}
-      </div>
-    );
-
     const getOptionComponent = () => {
       return !this.props.multiSelect ? (
         <CommandButton
@@ -1546,7 +1545,7 @@ class ComboBoxInternal extends React.Component<IComboBoxInternalProps, IComboBox
           title={title}
           disabled={item.disabled}
           // eslint-disable-next-line react/jsx-no-bind
-          onRenderLabel={onRenderCheckboxLabel}
+          onRenderLabel={this._renderCheckboxLabel.bind(this, { ...item, id: id + '-label' })}
           inputProps={{
             // aria-selected should only be applied to checked items, not hovered items
             'aria-selected': isChecked ? 'true' : 'false',
@@ -1755,6 +1754,19 @@ class ComboBoxInternal extends React.Component<IComboBoxInternalProps, IComboBox
     return <span className={optionClassNames.optionText}>{item.text}</span>;
   };
 
+  /*
+   * Render content of a multiselect item label.
+   * Text within the label is aria-hidden, to prevent duplicate input/label exposure
+   */
+  private _onRenderMultiselectOptionContent = (item: IComboBoxOption): JSX.Element => {
+    const optionClassNames = getComboBoxOptionClassNames(this._getCurrentOptionStyles(item));
+    return (
+      <span id={item.id} aria-hidden="true" className={optionClassNames.optionText}>
+        {item.text}
+      </span>
+    );
+  };
+
   /**
    * Click handler for the menu items
    * to select the item and also close the menu
diff --git a/packages/react/src/components/Dropdown/Dropdown.base.tsx b/packages/react/src/components/Dropdown/Dropdown.base.tsx
index c3d8cbbf4dbbc..efcdabaf5ac3d 100644
--- a/packages/react/src/components/Dropdown/Dropdown.base.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.base.tsx
@@ -851,7 +851,7 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
         label={item.text}
         title={title}
         // eslint-disable-next-line react/jsx-no-bind
-        onRenderLabel={this._onRenderItemLabel.bind(this, item, labelId)}
+        onRenderLabel={this._onRenderItemLabel.bind(this, { ...item, id: labelId })}
         className={css(itemClassName, 'is-multi-select')}
         checked={isItemSelected}
         styles={multiSelectItemStyles}
@@ -868,16 +868,24 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
     return <span className={this._classNames.dropdownOptionText}>{item.text}</span>;
   };
 
-  /** Render custom label for drop down item */
-  private _onRenderItemLabel = (item: IDropdownOption, id: string): JSX.Element | null => {
-    const { onRenderOption = this._onRenderOption } = this.props;
+  /*
+   * Render content of a multiselect item label.
+   * Text within the label is aria-hidden, to prevent duplicate input/label exposure
+   */
+  private _onRenderMultiselectOption = (item: IDropdownOption): JSX.Element => {
     return (
-      <div id={id} aria-hidden="true">
-        {onRenderOption(item, this._onRenderOption)}
-      </div>
+      <span id={item.id} aria-hidden="true" className={this._classNames.dropdownOptionText}>
+        {item.text}
+      </span>
     );
   };
 
+  /** Render custom label for multiselect checkbox items */
+  private _onRenderItemLabel = (item: IDropdownOption, id: string): JSX.Element | null => {
+    const { onRenderOption = this._onRenderMultiselectOption } = this.props;
+    return onRenderOption(item, this._onRenderMultiselectOption);
+  };
+
   private _onPositioned = (positions?: ICalloutPositionedInfo): void => {
     if (this._focusZone.current) {
       // Focusing an element can trigger a reflow. Making this wait until there is an animation

From eb6b96c8577d1a62c1fc9857879ae10b8ac120e9 Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Tue, 31 Jan 2023 19:14:43 -0800
Subject: [PATCH 7/9] update snapshots

---
 .../src/components/ComboBox/ComboBox.tsx      |  2 +-
 .../__snapshots__/ComboBox.test.tsx.snap      | 66 +++++++---------
 .../__snapshots__/Dropdown.test.tsx.snap      | 78 +++++++++----------
 3 files changed, 67 insertions(+), 79 deletions(-)

diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
index 890c7378665ad..42a842b9ce4f4 100644
--- a/packages/react/src/components/ComboBox/ComboBox.tsx
+++ b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -1487,7 +1487,7 @@ class ComboBoxInternal extends React.Component<IComboBoxInternalProps, IComboBox
     );
   }
 
-  private _renderCheckboxLabel(item: IComboBoxOption): JSX.Element {
+  private _renderCheckboxLabel(item: IComboBoxOption): JSX.Element | null {
     const { onRenderOption = this._onRenderMultiselectOptionContent } = this.props;
     return onRenderOption(item, this._onRenderMultiselectOptionContent);
   }
diff --git a/packages/react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap b/packages/react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
index acd5e81edaf79..c81a7cb193598 100644
--- a/packages/react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
+++ b/packages/react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
@@ -1742,27 +1742,24 @@ exports[`ComboBox Renders correctly when opened in multi-select mode 1`] = `
                             
                           </i>
                         </div>
-                        <div
+                        <span
                           aria-hidden="true"
+                          class=
+                              ms-ComboBox-optionText
+                              {
+                                display: inline-block;
+                                max-width: 100%;
+                                min-width: 0px;
+                                overflow-wrap: break-word;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                white-space: nowrap;
+                                word-wrap: break-word;
+                              }
                           id="ComboBox0-list1-label"
                         >
-                          <span
-                            class=
-                                ms-ComboBox-optionText
-                                {
-                                  display: inline-block;
-                                  max-width: 100%;
-                                  min-width: 0px;
-                                  overflow-wrap: break-word;
-                                  overflow: hidden;
-                                  text-overflow: ellipsis;
-                                  white-space: nowrap;
-                                  word-wrap: break-word;
-                                }
-                          >
-                            Option 1
-                          </span>
-                        </div>
+                          Option 1
+                        </span>
                       </label>
                     </div>
                     <div
@@ -1965,27 +1962,24 @@ exports[`ComboBox Renders correctly when opened in multi-select mode 1`] = `
                           
                         </i>
                       </div>
-                      <div
+                      <span
                         aria-hidden="true"
+                        class=
+                            ms-ComboBox-optionText
+                            {
+                              display: inline-block;
+                              max-width: 100%;
+                              min-width: 0px;
+                              overflow-wrap: break-word;
+                              overflow: hidden;
+                              text-overflow: ellipsis;
+                              white-space: nowrap;
+                              word-wrap: break-word;
+                            }
                         id="ComboBox0-list3-label"
                       >
-                        <span
-                          class=
-                              ms-ComboBox-optionText
-                              {
-                                display: inline-block;
-                                max-width: 100%;
-                                min-width: 0px;
-                                overflow-wrap: break-word;
-                                overflow: hidden;
-                                text-overflow: ellipsis;
-                                white-space: nowrap;
-                                word-wrap: break-word;
-                              }
-                        >
-                          Option 2
-                        </span>
-                      </div>
+                        Option 2
+                      </span>
                     </label>
                   </div>
                 </div>
diff --git a/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index 908835e44e576..94d2ec91a1b40 100644
--- a/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
+++ b/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -582,30 +582,27 @@ exports[`Dropdown multi-select Renders correctly when open 1`] = `
                             
                           </i>
                         </div>
-                        <div
+                        <span
                           aria-hidden="true"
+                          class=
+                              ms-Dropdown-optionText
+                              {
+                                margin-bottom: 1px;
+                                margin-left: 1px;
+                                margin-right: 1px;
+                                margin-top: 1px;
+                                max-width: 100%;
+                                min-width: 0px;
+                                overflow-wrap: break-word;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                white-space: nowrap;
+                                word-wrap: break-word;
+                              }
                           id="Dropdown0-list1-label"
                         >
-                          <span
-                            class=
-                                ms-Dropdown-optionText
-                                {
-                                  margin-bottom: 1px;
-                                  margin-left: 1px;
-                                  margin-right: 1px;
-                                  margin-top: 1px;
-                                  max-width: 100%;
-                                  min-width: 0px;
-                                  overflow-wrap: break-word;
-                                  overflow: hidden;
-                                  text-overflow: ellipsis;
-                                  white-space: nowrap;
-                                  word-wrap: break-word;
-                                }
-                          >
-                            1
-                          </span>
-                        </div>
+                          1
+                        </span>
                       </label>
                     </div>
                     <div
@@ -831,30 +828,27 @@ exports[`Dropdown multi-select Renders correctly when open 1`] = `
                           
                         </i>
                       </div>
-                      <div
+                      <span
                         aria-hidden="true"
+                        class=
+                            ms-Dropdown-optionText
+                            {
+                              margin-bottom: 1px;
+                              margin-left: 1px;
+                              margin-right: 1px;
+                              margin-top: 1px;
+                              max-width: 100%;
+                              min-width: 0px;
+                              overflow-wrap: break-word;
+                              overflow: hidden;
+                              text-overflow: ellipsis;
+                              white-space: nowrap;
+                              word-wrap: break-word;
+                            }
                         id="Dropdown0-list3-label"
                       >
-                        <span
-                          class=
-                              ms-Dropdown-optionText
-                              {
-                                margin-bottom: 1px;
-                                margin-left: 1px;
-                                margin-right: 1px;
-                                margin-top: 1px;
-                                max-width: 100%;
-                                min-width: 0px;
-                                overflow-wrap: break-word;
-                                overflow: hidden;
-                                text-overflow: ellipsis;
-                                white-space: nowrap;
-                                word-wrap: break-word;
-                              }
-                        >
-                          2
-                        </span>
-                      </div>
+                        2
+                      </span>
                     </label>
                   </div>
                 </div>

From 75b1899fe6ea0fafbc493a3446b47994d349bda9 Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Tue, 31 Jan 2023 19:53:44 -0800
Subject: [PATCH 8/9] default dropdown to using item.id

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

diff --git a/packages/react/src/components/Dropdown/Dropdown.base.tsx b/packages/react/src/components/Dropdown/Dropdown.base.tsx
index efcdabaf5ac3d..84e08ce47fcd3 100644
--- a/packages/react/src/components/Dropdown/Dropdown.base.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.base.tsx
@@ -798,7 +798,7 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
 
     // define the id and label id (for multiselect checkboxes)
     const id = this._listId + item.index;
-    const labelId = id + '-label';
+    const labelId = item.id ?? id + '-label';
 
     const multiSelectItemStyles = this._classNames.subComponentStyles
       ? (this._classNames.subComponentStyles.multiSelectItem as IStyleFunctionOrObject<

From 6a794f5a1b8cc73e8d5ee091896cf047ebfdf484 Mon Sep 17 00:00:00 2001
From: Sarah Higley <smhigley@users.noreply.github.com>
Date: Wed, 1 Feb 2023 15:39:39 -0800
Subject: [PATCH 9/9] Apply suggestions from code review

Co-authored-by: Ben Howell <48106640+behowell@users.noreply.github.com>
---
 packages/react/src/components/Dropdown/Dropdown.base.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Dropdown/Dropdown.base.tsx b/packages/react/src/components/Dropdown/Dropdown.base.tsx
index 84e08ce47fcd3..b8f387f623b59 100644
--- a/packages/react/src/components/Dropdown/Dropdown.base.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.base.tsx
@@ -798,7 +798,7 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
 
     // define the id and label id (for multiselect checkboxes)
     const id = this._listId + item.index;
-    const labelId = item.id ?? id + '-label';
+    const labelId = item.id ?? (id + '-label');
 
     const multiSelectItemStyles = this._classNames.subComponentStyles
       ? (this._classNames.subComponentStyles.multiSelectItem as IStyleFunctionOrObject<
@@ -881,7 +881,7 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
   };
 
   /** Render custom label for multiselect checkbox items */
-  private _onRenderItemLabel = (item: IDropdownOption, id: string): JSX.Element | null => {
+  private _onRenderItemLabel = (item: IDropdownOption): JSX.Element | null => {
     const { onRenderOption = this._onRenderMultiselectOption } = this.props;
     return onRenderOption(item, this._onRenderMultiselectOption);
   };