From ff937a44d7f5816532ff9894daac0d247cb778f5 Mon Sep 17 00:00:00 2001
From: Makoto Morimoto <humbertomakotomorimoto@gmail.com>
Date: Wed, 5 Aug 2020 15:49:05 -0700
Subject: [PATCH] Dropdown: Removing aria-required from multiselect scenarios
 since it's not allowed for role='button' (#14369)

#### Pull request checklist

- [x] Addresses an existing issue: Fixes #14355
- [x] Include a change request file using `$ yarn change`

#### Description of changes

We were placing `aria-required` on `Dropdowns`, but this clashed with the `role='button'` we were placing on multiselect `Dropdowns` and creating accessibility warnings. We're fixing this issue by setting `aria-required` only for single select `Dropdowns`.

#### Focus areas to test

(optional)
---
 ...t-2020-08-05-15-01-14-multiSelectDropdownRequired.json | 8 ++++++++
 .../src/components/Dropdown/Dropdown.base.tsx             | 3 ++-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 change/office-ui-fabric-react-2020-08-05-15-01-14-multiSelectDropdownRequired.json

diff --git a/change/office-ui-fabric-react-2020-08-05-15-01-14-multiSelectDropdownRequired.json b/change/office-ui-fabric-react-2020-08-05-15-01-14-multiSelectDropdownRequired.json
new file mode 100644
index 00000000000000..cd523da16ed31a
--- /dev/null
+++ b/change/office-ui-fabric-react-2020-08-05-15-01-14-multiSelectDropdownRequired.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Dropdown: Removing aria-required from multiselect scenarios since it's not allowed for role='button'.",
+  "packageName": "office-ui-fabric-react",
+  "email": "humbertomakotomorimoto@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-05T22:01:13.918Z"
+}
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.base.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.base.tsx
index a56f49e7fdb79e..a0d276c2a42f24 100644
--- a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.base.tsx
@@ -269,6 +269,7 @@ export class DropdownBase extends React.Component<IDropdownInternalProps, IDropd
         {
           role: 'listbox',
           childRole: 'option',
+          ariaRequired: required,
           ariaSetSize: this._sizePosCache.optionSetSize,
           ariaPosInSet: this._sizePosCache.positionInSet(selectedIndices[0]),
           ariaSelected: selectedIndices[0] === undefined ? undefined : true,
@@ -313,7 +314,7 @@ export class DropdownBase extends React.Component<IDropdownInternalProps, IDropd
                 hasErrorMessage ? this._id + '-errorMessage' : undefined,
               )}
               aria-activedescendant={ariaActiveDescendant}
-              aria-required={required}
+              aria-required={ariaAttrs.ariaRequired}
               aria-disabled={disabled}
               aria-owns={isOpen ? this._listId : undefined}
               {...divProps}