Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Dropdown): add aria-live only when focused #19667

Merged
merged 4 commits into from
Sep 9, 2021
Merged

fix(Dropdown): add aria-live only when focused #19667

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3dc0b0b
only set live region on Dropdown when focused
smhigley Sep 7, 2021
4d05f2c
update snapshots
smhigley Sep 7, 2021
1c48b43
Change files
smhigley Sep 7, 2021
50f9561
added a test for aria-live on focus
smhigley Sep 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-87609c16-e599-49cf-91e0-2ac09923a565.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Fix Dropdown to only add ARIA live region when focused",
"packageName": "@fluentui/react",
"email": "[email protected]",
"dependentChangeType": "patch"
}
2 changes: 0 additions & 2 deletions packages/react-examples/src/react/__snapshots__/ChoiceGroup.Custom.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,9 +279,7 @@ exports[`Component Examples renders ChoiceGroup.Custom.Example.tsx correctly 1`]
tabIndex={-1}
>
<span
aria-atomic={true}
aria-invalid={false}
aria-live="polite"
className=
ms-Dropdown-title
{
Expand Down
2 changes: 0 additions & 2 deletions ...es/react-examples/src/react/__snapshots__/DetailsList.CustomGroupHeaders.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,9 +139,7 @@ Array [
tabIndex={0}
>
<span
aria-atomic={true}
aria-invalid={false}
aria-live="polite"
className=
ms-Dropdown-title
{
Expand Down
6 changes: 0 additions & 6 deletions packages/react-examples/src/react/__snapshots__/Dropdown.Basic.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,9 +158,7 @@ exports[`Component Examples renders Dropdown.Basic.Example.tsx correctly 1`] = `
tabIndex={0}
>
<span
aria-atomic={true}
aria-invalid={false}
aria-live="polite"
className=
ms-Dropdown-title
ms-Dropdown-titleIsPlaceHolder
Expand Down Expand Up @@ -349,9 +347,7 @@ exports[`Component Examples renders Dropdown.Basic.Example.tsx correctly 1`] = `
tabIndex={-1}
>
<span
aria-atomic={true}
aria-invalid={false}
aria-live="polite"
className=
ms-Dropdown-title
{
Expand Down Expand Up @@ -567,9 +563,7 @@ exports[`Component Examples renders Dropdown.Basic.Example.tsx correctly 1`] = `
tabIndex={0}
>
<span
aria-atomic={true}
aria-invalid={false}
aria-live="polite"
className=
ms-Dropdown-title
{
Expand Down
2 changes: 0 additions & 2 deletions packages/react-examples/src/react/__snapshots__/Dropdown.Controlled.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,9 +138,7 @@ exports[`Component Examples renders Dropdown.Controlled.Example.tsx correctly 1`
tabIndex={0}
>
<span
aria-atomic={true}
aria-invalid={false}
aria-live="polite"
className=
ms-Dropdown-title
ms-Dropdown-titleIsPlaceHolder
Expand Down
2 changes: 0 additions & 2 deletions packages/react-examples/src/react/__snapshots__/Dropdown.ControlledMulti.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,9 +138,7 @@ exports[`Component Examples renders Dropdown.ControlledMulti.Example.tsx correct
tabIndex={0}
>
<span
aria-atomic={true}
aria-invalid={false}
aria-live="polite"
className=
ms-Dropdown-title
ms-Dropdown-titleIsPlaceHolder
Expand Down
4 changes: 0 additions & 4 deletions packages/react-examples/src/react/__snapshots__/Dropdown.Custom.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,9 +158,7 @@ exports[`Component Examples renders Dropdown.Custom.Example.tsx correctly 1`] =
tabIndex={0}
>
<span
aria-atomic={true}
aria-invalid={false}
aria-live="polite"
className=
ms-Dropdown-title
ms-Dropdown-titleIsPlaceHolder
Expand Down Expand Up @@ -540,9 +538,7 @@ exports[`Component Examples renders Dropdown.Custom.Example.tsx correctly 1`] =
tabIndex={0}
>
<span
aria-atomic={true}
aria-invalid={false}
aria-live="polite"
className=
ms-Dropdown-title
ms-Dropdown-titleIsPlaceHolder
Expand Down
2 changes: 0 additions & 2 deletions packages/react-examples/src/react/__snapshots__/Dropdown.Error.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,9 +334,7 @@ exports[`Component Examples renders Dropdown.Error.Example.tsx correctly 1`] = `
tabIndex={0}
>
<span
aria-atomic={true}
aria-invalid={false}
aria-live="polite"
className=
ms-Dropdown-title
ms-Dropdown-titleIsPlaceHolder
Expand Down
4 changes: 0 additions & 4 deletions packages/react-examples/src/react/__snapshots__/Dropdown.Required.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,9 +188,7 @@ exports[`Component Examples renders Dropdown.Required.Example.tsx correctly 1`]
tabIndex={0}
>
<span
aria-atomic={true}
aria-invalid={false}
aria-live="polite"
className=
ms-Dropdown-title
ms-Dropdown-titleIsPlaceHolder
Expand Down Expand Up @@ -512,9 +510,7 @@ exports[`Component Examples renders Dropdown.Required.Example.tsx correctly 1`]
tabIndex={0}
>
<span
aria-atomic={true}
aria-invalid={false}
aria-live="polite"
className=
ms-Dropdown-title
ms-Dropdown-titleIsPlaceHolder
Expand Down
2 changes: 0 additions & 2 deletions packages/react-examples/src/react/__snapshots__/Facepile.Basic.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1049,9 +1049,7 @@ exports[`Component Examples renders Facepile.Basic.Example.tsx correctly 1`] = `
tabIndex={0}
>
<span
aria-atomic={true}
aria-invalid={false}
aria-live="polite"
className=
ms-Dropdown-title
{
Expand Down
2 changes: 0 additions & 2 deletions packages/react-examples/src/react/__snapshots__/Facepile.Overflow.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1152,9 +1152,7 @@ exports[`Component Examples renders Facepile.Overflow.Example.tsx correctly 1`]
tabIndex={0}
>
<span
aria-atomic={true}
aria-invalid={false}
aria-live="polite"
className=
ms-Dropdown-title
{
Expand Down
2 changes: 0 additions & 2 deletions packages/react-examples/src/react/__snapshots__/ResizeGroup.OverflowSet.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4115,9 +4115,7 @@ exports[`Component Examples renders ResizeGroup.OverflowSet.Example.tsx correctl
tabIndex={0}
>
<span
aria-atomic={true}
aria-invalid={false}
aria-live="polite"
className=
ms-Dropdown-title
{
Expand Down
6 changes: 3 additions & 3 deletions packages/react/src/components/Dropdown/Dropdown.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,7 +309,7 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
onRenderLabel = this._onRenderLabel,
hoisted: { selectedIndices },
} = props;
const { isOpen, calloutRenderEdge } = this.state;
const { isOpen, calloutRenderEdge, hasFocus } = this.state;
// eslint-disable-next-line deprecation/deprecation
const onRenderPlaceholder = props.onRenderPlaceholder || props.onRenderPlaceHolder || this._getPlaceholder;

Expand Down Expand Up @@ -381,8 +381,8 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
<span
id={this._optionId}
className={this._classNames.title}
aria-live="polite"
aria-atomic={true}
aria-live={hasFocus ? 'polite' : undefined}
GeoffCoxMSFT marked this conversation as resolved.
Show resolved Hide resolved
aria-atomic={hasFocus ? true : undefined}
aria-invalid={hasErrorMessage}
>
{
Expand Down
12 changes: 12 additions & 0 deletions packages/react/src/components/Dropdown/Dropdown.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,18 @@ describe('Dropdown', () => {
expect(titleElement.text()).toEqual('1');
});

it('Renders live region attributes only when focused', () => {
wrapper = mount(<Dropdown label="testgroup" options={DEFAULT_OPTIONS} />);
let titleElement = wrapper.find('.ms-Dropdown-title');

expect(titleElement.props()['aria-live']).toBeUndefined();

wrapper.find('.ms-Dropdown').simulate('focus');
titleElement = wrapper.find('.ms-Dropdown-title');

expect(titleElement.props()['aria-live']).toEqual('polite');
});
Comment on lines +150 to +160
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you want to maybe check for aria-atomic here as well so that that attribute is also covered by tests?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I considered it, but in the end aria-atomic doesn't actually matter so I didn't want to test for it in case we decide to change it. (By "doesn't matter", I mean "literally has no effect, because it has 0 support" 😅)


it('does not change the selected item in when defaultSelectedKey changes', () => {
wrapper = mount(<Dropdown label="testgroup" defaultSelectedKey="1" options={DEFAULT_OPTIONS} />);
const titleElement = wrapper.find('.ms-Dropdown-title');
Expand Down
8 changes: 0 additions & 8 deletions packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,9 +106,7 @@ exports[`Dropdown multi-select Renders correctly 1`] = `
tabIndex={0}
>
<span
aria-atomic={true}
aria-invalid={false}
aria-live="polite"
className=
ms-Dropdown-title
ms-Dropdown-titleIsPlaceHolder
Expand Down Expand Up @@ -281,9 +279,7 @@ exports[`Dropdown multi-select Renders correctly when open 1`] = `
tabindex="0"
>
<span
aria-atomic="true"
aria-invalid="false"
aria-live="polite"
class=
ms-Dropdown-title
{
Expand Down Expand Up @@ -1125,9 +1121,7 @@ exports[`Dropdown single-select Renders correctly 1`] = `
tabIndex={0}
>
<span
aria-atomic={true}
aria-invalid={false}
aria-live="polite"
className=
ms-Dropdown-title
ms-Dropdown-titleIsPlaceHolder
Expand Down Expand Up @@ -1300,9 +1294,7 @@ exports[`Dropdown single-select Renders correctly when open 1`] = `
tabindex="0"
>
<span
aria-atomic="true"
aria-invalid="false"
aria-live="polite"
class=
ms-Dropdown-title
{
Expand Down