Dropdown: propagate aria-label and aria-labelledby to options list

common/changes/office-ui-fabric-react/anihan-dropdown-aria-label_2019-05-07-23-57.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Fix aria-label in Dropdown options list",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md

@@ -4391,7 +4391,9 @@ export interface IFocusZoneProps extends React.HTMLAttributes<HTMLElement | Focu
     allowFocusRoot?: boolean;
     // @deprecated
     allowTabKey?: boolean;
+    // @deprecated
     ariaDescribedBy?: string;
+    // @deprecated
     ariaLabelledBy?: string;
     as?: React.ReactType;
     checkForNoWrap?: boolean;

packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.base.tsx

@@ -257,7 +257,7 @@ export class DetailsRowBase extends BaseComponent<IDetailsRowBaseProps, IDetails
         componentRef={this._focusZone}
         role="row"
         aria-label={ariaLabel}
-        ariaDescribedBy={ariaDescribedBy}
+        aria-describedby={ariaDescribedBy}
         className={this._classNames.root}
         data-is-focusable={true}
         data-selection-index={itemIndex}

packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.base.tsx

@@ -474,7 +474,7 @@ export class DropdownBase extends React.Component<IDropdownInternalProps, IDropd
 
   /** Wrap item list in a FocusZone */
   private _renderFocusableList(props: IDropdownProps): JSX.Element {
-    const { onRenderList = this._onRenderList, label } = props;
+    const { onRenderList = this._onRenderList, label, ariaLabel } = props;
     const id = this._id;
 
     return (
@@ -490,7 +490,8 @@ export class DropdownBase extends React.Component<IDropdownInternalProps, IDropd
           direction={FocusZoneDirection.vertical}
           id={id + '-list'}
           className={this._classNames.dropdownItems}
-          aria-labelledby={label ? id + '-label' : undefined}
+          aria-label={ariaLabel}
+          aria-labelledby={label && !ariaLabel ? id + '-label' : undefined}
           role="listbox"
         >
           {onRenderList(props, this._onRenderList)}

packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.deprecated.test.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import * as renderer from 'react-test-renderer';
+import { setWarningCallback } from '@uifabric/utilities';
+import { FocusZone } from './FocusZone';
+
+describe('FocusZone', () => {
+  beforeAll(() => {
+    // Prevent warn deprecations from failing test
+    setWarningCallback(() => {
+      /* no-op */
+    });
+  });
+
+  afterAll(() => {
+    setWarningCallback();
+  });
+
+  it('renders FocusZone correctly with ariaDescribedby and ariaLabelledby', () => {
+    const component = renderer.create(<FocusZone ariaDescribedBy="customDescribedBy" ariaLabelledBy="customLabelledBy" />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import * as renderer from 'react-test-renderer';
 import * as ReactTestUtils from 'react-dom/test-utils';
 import { setRTL, KeyCodes } from '../../Utilities';
 import { FocusZone } from './FocusZone';
@@ -55,6 +56,18 @@ describe('FocusZone', () => {
     lastFocusedElement = undefined;
   });
 
+  it('renders FocusZone correctly with no props', () => {
+    const component = renderer.create(<FocusZone />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders FocusZone correctly with aria-describedby and aria-labelledby', () => {
+    const component = renderer.create(<FocusZone aria-describedby="customDescribedBy" aria-labelledby="customLabelledBy" />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
   it('can use arrows vertically', () => {
     const component = ReactTestUtils.renderIntoDocument(
       <div {...{ onFocusCapture: _onFocus }}>

packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx

@@ -117,7 +117,9 @@ export class FocusZone extends React.Component<IFocusZoneProps, {}> implements I
       warnDeprecations('FocusZone', props, {
         rootProps: undefined,
         allowTabKey: 'handleTabKey',
-        elementType: 'as'
+        elementType: 'as',
+        ariaDescribedBy: 'aria-describedby',
+        ariaLabelledBy: 'aria-labelledby'
       });
     }
 
@@ -215,6 +217,8 @@ export class FocusZone extends React.Component<IFocusZoneProps, {}> implements I
     return (
       <Tag
         role="presentation"
+        aria-labelledby={ariaLabelledBy}
+        aria-describedby={ariaDescribedBy}
         {...divProps}
         {
           // root props has been deprecated and should get removed.
@@ -228,8 +232,6 @@ export class FocusZone extends React.Component<IFocusZoneProps, {}> implements I
         className={css(getRootClass(), className)}
         ref={this._root}
         data-focuszone-id={this._id}
-        aria-labelledby={ariaLabelledBy}
-        aria-describedby={ariaDescribedBy}
         onKeyDown={this._onKeyDown}
         onFocus={this._onFocus}
         onMouseDownCapture={this._onMouseDown}

packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts

@@ -84,11 +84,13 @@ export interface IFocusZoneProps extends React.HTMLAttributes<HTMLElement | Focu
 
   /**
    * Sets the aria-labelledby attribute.
+   * @deprecated Directly use the 'aria-labelledby' attribute instead
    */
   ariaLabelledBy?: string;
 
   /**
    * Sets the aria-describedby attribute.
+   * @deprecated Directly use the 'aria-describedby' attribute instead
    */
   ariaDescribedBy?: string;
 

packages/office-ui-fabric-react/src/components/FocusZone/__snapshots__/FocusZone.deprecated.test.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FocusZone renders FocusZone correctly with ariaDescribedby and ariaLabelledby 1`] = `
+<div
+  aria-describedby="customDescribedBy"
+  aria-labelledby="customLabelledBy"
+  className=
+      ms-FocusZone
+      &:focus {
+        outline: none;
+      }
+  data-focuszone-id="FocusZone0"
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onMouseDownCapture={[Function]}
+  role="presentation"
+/>
+`;

packages/office-ui-fabric-react/src/components/FocusZone/__snapshots__/FocusZone.test.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FocusZone renders FocusZone correctly with aria-describedby and aria-labelledby 1`] = `
+<div
+  aria-describedby="customDescribedBy"
+  aria-labelledby="customLabelledBy"
+  className=
+      ms-FocusZone
+      &:focus {
+        outline: none;
+      }
+  data-focuszone-id="FocusZone1"
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onMouseDownCapture={[Function]}
+  role="presentation"
+/>
+`;
+
+exports[`FocusZone renders FocusZone correctly with no props 1`] = `
+<div
+  className=
+      ms-FocusZone
+      &:focus {
+        outline: none;
+      }
+  data-focuszone-id="FocusZone0"
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onMouseDownCapture={[Function]}
+  role="presentation"
+/>
+`;