Dropdown component honors ariaLabel prop (#7292)

* don't define labelledBy aria attribute when we are providing an ariaLabel * update snapshots to reflect no ariaLabelledBy attribute when ariaLabel is provided * add change file
microsoft · Dec 5, 2018 · d7f56b2 · d7f56b2
1 parent 7f58d3b
commit d7f56b2
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 4 deletions.
diff --git a/common/changes/office-ui-fabric-react/cowuertz-dropdown_aria_label_fix_2018-12-03-22-30.json b/common/changes/office-ui-fabric-react/cowuertz-dropdown_aria_label_fix_2018-12-03-22-30.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "The Dropdown component will now only include an aria-labelled-by attribute when there is no provided ariaLabel prop. This means that the component will honor provided ariaLabels and create markup such that screen readers will read the aria label and not the regular label.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}
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
@@ -226,7 +226,7 @@ export class DropdownBase extends BaseComponent<IDropdownInternalProps, IDropdow
               aria-expanded={isOpen ? 'true' : 'false'}
               role={ariaAttrs.role}
               aria-label={ariaLabel}
-              aria-labelledby={label ? id + '-label' : undefined}
+              aria-labelledby={label && !ariaLabel ? id + '-label' : undefined}
               aria-describedby={mergeAriaAttributeValues(optionId, keytipAttributes['aria-describedby'])}
               aria-activedescendant={ariaAttrs.ariaActiveDescendant}
               aria-disabled={disabled}

diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Dropdown.Basic.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Dropdown.Basic.Example.tsx.shot
@@ -44,7 +44,6 @@ exports[`Component Examples renders Dropdown.Basic.Example.tsx correctly 1`] = `
       aria-describedby="Basicdrop1-option"
       aria-expanded="false"
       aria-label="Basic dropdown example"
-      aria-labelledby="Basicdrop1-label"
       className=
           ms-Dropdown
           {

diff --git a/...ages/office-ui-fabric-react/src/components/__snapshots__/Dropdown.Custom.Example.tsx.shot b/...ages/office-ui-fabric-react/src/components/__snapshots__/Dropdown.Custom.Example.tsx.shot
@@ -44,7 +44,6 @@ exports[`Component Examples renders Dropdown.Custom.Example.tsx correctly 1`] =
       aria-describedby="Customdrop1-option"
       aria-expanded="false"
       aria-label="Custom dropdown example"
-      aria-labelledby="Customdrop1-label"
       className=
           ms-Dropdown
           {

diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Dropdown.Error.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Dropdown.Error.Example.tsx.shot
@@ -44,7 +44,6 @@ exports[`Component Examples renders Dropdown.Error.Example.tsx correctly 1`] = `
       aria-describedby="Errormessagedrop1-option"
       aria-expanded="false"
       aria-label="Error message dropdown example"
-      aria-labelledby="Errormessagedrop1-label"
       className=
           ms-Dropdown
           {