diff --git a/change/@fluentui-react-cc684d1e-b561-490a-a648-47ece08bdc45.json b/change/@fluentui-react-cc684d1e-b561-490a-a648-47ece08bdc45.json new file mode 100644 index 00000000000000..0428d3008cbf51 --- /dev/null +++ b/change/@fluentui-react-cc684d1e-b561-490a-a648-47ece08bdc45.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: the BasePicker with List Below variant now sets aria-describedby pointing to selected values", + "packageName": "@fluentui/react", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react/src/components/pickers/BasePicker.tsx b/packages/react/src/components/pickers/BasePicker.tsx index 0856a157715087..201c5989c18e79 100644 --- a/packages/react/src/components/pickers/BasePicker.tsx +++ b/packages/react/src/components/pickers/BasePicker.tsx @@ -1113,6 +1113,9 @@ export class BasePickerListBelow> extends BaseP
{this.renderCustomAlert(classNames.screenReaderText)} +
> extends BaseP aria-expanded={suggestionsVisible} aria-haspopup="listbox" aria-label={comboLabel} + aria-describedby={this.state.items.length > 0 ? this._ariaMap.selectedItems : undefined} role="combobox" id={inputProps?.id ? inputProps.id : this._ariaMap.combobox} disabled={disabled} @@ -1141,7 +1145,7 @@ export class BasePickerListBelow> extends BaseP id={this._ariaMap.selectedItems} className="ms-BasePicker-selectedItems" // just a className hook without any styles applied to it. role={selectionRole} - aria-label={selectionAriaLabel || comboLabel} + aria-labelledby={`${this._ariaMap.selectedItems}-label`} > {this.renderItems()}