From 1bbb08a57b8274f3cb3689256bf194e7596325ad Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Tue, 7 May 2019 16:54:16 -0700 Subject: [PATCH 1/7] Propage aria-label and aria-labelledby to options list --- .../src/components/Dropdown/Dropdown.base.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) 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 ef6a0cbbe6c2b..1347387897b12 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 @@ -474,7 +474,7 @@ export class DropdownBase extends React.Component {onRenderList(props, this._onRenderList)} From bf2fbc51e02ab9c9a9eb114c3ce9b5ad7f97ffdc Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Tue, 7 May 2019 16:57:41 -0700 Subject: [PATCH 2/7] Add rush change --- .../anihan-dropdown-aria-label_2019-05-07-23-57.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/anihan-dropdown-aria-label_2019-05-07-23-57.json diff --git a/common/changes/office-ui-fabric-react/anihan-dropdown-aria-label_2019-05-07-23-57.json b/common/changes/office-ui-fabric-react/anihan-dropdown-aria-label_2019-05-07-23-57.json new file mode 100644 index 0000000000000..bcc3c848e9a45 --- /dev/null +++ b/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": "anihan@microsoft.com" +} \ No newline at end of file From aa0791066a18500486891a04c45f151be3cb00c9 Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Thu, 9 May 2019 16:17:39 -0700 Subject: [PATCH 3/7] Properly override native props --- .../src/components/FocusZone/FocusZone.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx index bf49c1f9c2aec..9f717065c33a1 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx @@ -215,6 +215,8 @@ export class FocusZone extends React.Component implements I return ( 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} From 74584e118486ace207b0bf427c6d181e8bdd817c Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Tue, 14 May 2019 18:41:29 -0700 Subject: [PATCH 4/7] Add snapshots --- .../components/FocusZone/FocusZone.test.tsx | 13 ++++++++ .../__snapshots__/FocusZone.test.tsx.snap | 33 +++++++++++++++++++ 2 files changed, 46 insertions(+) create mode 100644 packages/office-ui-fabric-react/src/components/FocusZone/__snapshots__/FocusZone.test.tsx.snap diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx index d83289747a4c4..261c628ac356c 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx +++ b/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 Persona correctly with no props', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders Persona correctly with aria-describedby and aria-labelledby', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + it('can use arrows vertically', () => { const component = ReactTestUtils.renderIntoDocument(
diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/__snapshots__/FocusZone.test.tsx.snap b/packages/office-ui-fabric-react/src/components/FocusZone/__snapshots__/FocusZone.test.tsx.snap new file mode 100644 index 0000000000000..c1365de293638 --- /dev/null +++ b/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 Persona correctly with aria-describedby and aria-labelledby 1`] = ` +
+`; + +exports[`FocusZone renders Persona correctly with no props 1`] = ` +
+`; From 78305509c6f80f5de60e8827f9d0ca97b31c59a8 Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Tue, 14 May 2019 19:26:51 -0700 Subject: [PATCH 5/7] Deprecate aria-describedby and aria-labelledby --- .../etc/office-ui-fabric-react.api.md | 2 ++ .../DetailsList/DetailsRow.base.tsx | 2 +- .../src/components/Dropdown/Dropdown.base.tsx | 2 +- .../FocusZone/FocusZone.deprecated.test.tsx | 23 +++++++++++++++++++ .../components/FocusZone/FocusZone.test.tsx | 6 ++--- .../src/components/FocusZone/FocusZone.tsx | 4 +++- .../components/FocusZone/FocusZone.types.ts | 2 ++ .../FocusZone.deprecated.test.tsx.snap | 18 +++++++++++++++ .../__snapshots__/FocusZone.test.tsx.snap | 4 ++-- 9 files changed, 55 insertions(+), 8 deletions(-) create mode 100644 packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.deprecated.test.tsx create mode 100644 packages/office-ui-fabric-react/src/components/FocusZone/__snapshots__/FocusZone.deprecated.test.tsx.snap diff --git a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md index e249d7e81eb37..d01088cff7a3d 100644 --- a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md +++ b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md @@ -4391,7 +4391,9 @@ export interface IFocusZoneProps extends React.HTMLAttributes {onRenderList(props, this._onRenderList)} diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.deprecated.test.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.deprecated.test.tsx new file mode 100644 index 0000000000000..ba5d20a3b935c --- /dev/null +++ b/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(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx index 261c628ac356c..134738ce299c9 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx @@ -56,14 +56,14 @@ describe('FocusZone', () => { lastFocusedElement = undefined; }); - it('renders Persona correctly with no props', () => { + it('renders FocusZone correctly with no props', () => { const component = renderer.create(); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); - it('renders Persona correctly with aria-describedby and aria-labelledby', () => { - const component = renderer.create(); + it('renders FocusZone correctly with aria-describedby and aria-labelledby', () => { + const component = renderer.create(); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx index 9f717065c33a1..caa4e0bfb6cec 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx @@ -117,7 +117,9 @@ export class FocusZone extends React.Component implements I warnDeprecations('FocusZone', props, { rootProps: undefined, allowTabKey: 'handleTabKey', - elementType: 'as' + elementType: 'as', + ariaDescribedBy: 'aria-describedby', + ariaLabelledBy: 'aria-labelledby' }); } diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts index 991e2087f5ae8..8e5e5d8ba3a5a 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts @@ -84,11 +84,13 @@ export interface IFocusZoneProps extends React.HTMLAttributes +`; diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/__snapshots__/FocusZone.test.tsx.snap b/packages/office-ui-fabric-react/src/components/FocusZone/__snapshots__/FocusZone.test.tsx.snap index c1365de293638..bf376d8d0565d 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/__snapshots__/FocusZone.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/FocusZone/__snapshots__/FocusZone.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`FocusZone renders Persona correctly with aria-describedby and aria-labelledby 1`] = ` +exports[`FocusZone renders FocusZone correctly with aria-describedby and aria-labelledby 1`] = `
`; -exports[`FocusZone renders Persona correctly with no props 1`] = ` +exports[`FocusZone renders FocusZone correctly with no props 1`] = `
Date: Wed, 15 May 2019 14:33:19 -0700 Subject: [PATCH 6/7] Update packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts Co-Authored-By: Elizabeth Craig --- .../src/components/FocusZone/FocusZone.types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts index 8e5e5d8ba3a5a..277264c5d36b8 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts @@ -90,7 +90,7 @@ export interface IFocusZoneProps extends React.HTMLAttributes Date: Wed, 15 May 2019 14:33:28 -0700 Subject: [PATCH 7/7] Update packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts Co-Authored-By: Elizabeth Craig --- .../src/components/FocusZone/FocusZone.types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts index 277264c5d36b8..b49259fb18cd1 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts @@ -84,7 +84,7 @@ export interface IFocusZoneProps extends React.HTMLAttributes