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" +} diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx index 03eb5041dd6f8..42a842b9ce4f4 100644 --- a/packages/react/src/components/ComboBox/ComboBox.tsx +++ b/packages/react/src/components/ComboBox/ComboBox.tsx @@ -1487,9 +1487,14 @@ class ComboBoxInternal extends React.Component { 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 +1502,10 @@ class ComboBoxInternal extends React.Component onRenderOption(item, this._onRenderOptionContent); - const getOptionComponent = () => { return !this.props.multiSelect ? ( ) : ( {item.text}; }; + /* + * 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 ( + + ); + }; + /** * Click handler for the menu items * to select the item and also close the menu 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..c81a7cb193598 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`] = ` } > @@ -1854,6 +1857,7 @@ exports[`ComboBox Renders correctly when opened in multi-select mode 1`] = ` } > diff --git a/packages/react/src/components/Dropdown/Dropdown.base.tsx b/packages/react/src/components/Dropdown/Dropdown.base.tsx index dc043a9bd0633..b8f387f623b59 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 0; @@ -796,6 +796,10 @@ class DropdownInternal extends React.Component ) : ( ); }; @@ -863,10 +868,22 @@ class DropdownInternal extends React.Component{item.text}; }; - /** Render custom label for drop down item */ + /* + * 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 ( + + ); + }; + + /** Render custom label for multiselect checkbox items */ private _onRenderItemLabel = (item: IDropdownOption): JSX.Element | null => { - const { onRenderOption = this._onRenderOption } = this.props; - return onRenderOption(item, this._onRenderOption); + const { onRenderOption = this._onRenderMultiselectOption } = this.props; + return onRenderOption(item, this._onRenderMultiselectOption); }; private _onPositioned = (positions?: ICalloutPositionedInfo): void => { 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..94d2ec91a1b40 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`] = ` } > @@ -714,6 +717,7 @@ exports[`Dropdown multi-select Renders correctly when open 1`] = ` title="test" >