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

smhigley · 2021-09-07T18:29:05Z

Pull request checklist

Addresses an existing issue: Fixes Multi Select Dropdown : On reset form or changing to initial values , NVDA/Narrator is reading the place holder text in multi select dropdown. #19513
Include a change request file using $ yarn change

Description of changes

Currently the Dropdown has an aria-live attribute on the text value at all times, which means that (depending on the screen reader), all dropdowns present on the page will be announced on page load, and also when the value is updated or cleared by a secondary button/action, the new value will be read out.

This change updates the live region attribute to only be present when the Dropdown has focus, to prevent both of those behaviors.

codesandbox-ci · 2021-09-07T18:35:00Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 50f9561:

Sandbox	Source
Fluent UI React Starter	Configuration

size-auditor · 2021-09-07T18:38:56Z

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-Dropdown	217.055 kB	217.086 kB	31 bytes

Over Tolerance (1024 B) Over Baseline Below Baseline New Removed 1 kB = 1000 B

Baseline commit: 9086aca21bc6a725e459a923186f23d31cd85cbd (build)

fabricteam · 2021-09-07T18:40:23Z

📊 Bundle size report

_{🤖 This report was generated against 9086aca21bc6a725e459a923186f23d31cd85cbd}

fabricteam · 2021-09-07T18:59:15Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	880	921	5000
BaseButton	mount	910	909	5000
Breadcrumb	mount	2606	2631	1000
ButtonNext	mount	450	434	5000
Checkbox	mount	1549	1564	5000
CheckboxBase	mount	1283	1285	5000
ChoiceGroup	mount	4715	4772	5000
ComboBox	mount	1020	982	1000
CommandBar	mount	10356	10450	1000
ContextualMenu	mount	6562	6659	1000
DefaultButton	mount	1144	1128	5000
DetailsRow	mount	3767	3751	5000
DetailsRowFast	mount	3785	3760	5000
DetailsRowNoStyles	mount	3638	3584	5000
Dialog	mount	2440	2479	1000
DocumentCardTitle	mount	159	146	1000
Dropdown	mount	3283	3262	5000
FluentProviderNext	mount	7684	7699	5000
FluentProviderWithTheme	mount	372	365	10
FluentProviderWithTheme	virtual-rerender	96	100	10
FluentProviderWithTheme	virtual-rerender-with-unmount	482	495	10
FocusTrapZone	mount	1788	1768	5000
FocusZone	mount	1899	1831	5000
IconButton	mount	1752	1749	5000
Label	mount	359	347	5000
Layer	mount	3018	3029	5000
Link	mount	459	483	5000
MakeStyles	mount	1859	1876	50000
MenuButton	mount	1429	1458	5000
MessageBar	mount	2097	2031	5000
Nav	mount	3285	3288	1000
OverflowSet	mount	1082	1125	5000
Panel	mount	2419	2363	1000
Persona	mount	834	862	1000
Pivot	mount	1446	1397	1000
PrimaryButton	mount	1293	1306	5000
Rating	mount	7625	7658	5000
SearchBox	mount	1332	1320	5000
Shimmer	mount	2556	2572	5000
Slider	mount	1979	1982	5000
SpinButton	mount	4955	5085	5000
Spinner	mount	417	447	5000
SplitButton	mount	3187	3202	5000
Stack	mount	496	495	5000
StackWithIntrinsicChildren	mount	1544	1537	5000
StackWithTextChildren	mount	4558	4520	5000
SwatchColorPicker	mount	10172	10232	5000
Tabs	mount	1400	1456	1000
TagPicker	mount	2582	2580	5000
TeachingBubble	mount	13265	13463	5000
Text	mount	418	418	5000
TextField	mount	1385	1370	5000
ThemeProvider	mount	1222	1207	5000
ThemeProvider	virtual-rerender	596	627	5000
ThemeProvider	virtual-rerender-with-unmount	1879	1850	5000
Toggle	mount	785	810	5000
buttonNative	mount	115	112	5000

Perf Analysis (`@fluentui/react-northstar`)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
AvatarMinimalPerf.default	191	195	0.98:1	analysis

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
PortalMinimalPerf.default	195	171	1.14:1
TreeWith60ListItems.default	189	173	1.09:1
HeaderMinimalPerf.default	373	346	1.08:1
ChatWithPopoverPerf.default	355	338	1.05:1
TextAreaMinimalPerf.default	504	480	1.05:1
ButtonMinimalPerf.default	170	163	1.04:1
LabelMinimalPerf.default	399	383	1.04:1
ListWith60ListItems.default	656	628	1.04:1
MenuMinimalPerf.default	856	821	1.04:1
ProviderMinimalPerf.default	970	935	1.04:1
IconMinimalPerf.default	619	594	1.04:1
VideoMinimalPerf.default	629	607	1.04:1
ChatDuplicateMessagesPerf.default	298	288	1.03:1
ListMinimalPerf.default	522	507	1.03:1
SliderMinimalPerf.default	1567	1528	1.03:1
StatusMinimalPerf.default	683	660	1.03:1
CheckboxMinimalPerf.default	2787	2735	1.02:1
GridMinimalPerf.default	334	328	1.02:1
LayoutMinimalPerf.default	357	350	1.02:1
LoaderMinimalPerf.default	706	692	1.02:1
ReactionMinimalPerf.default	373	365	1.02:1
ToolbarMinimalPerf.default	938	922	1.02:1
AttachmentSlotsPerf.default	1086	1071	1.01:1
BoxMinimalPerf.default	352	347	1.01:1
ButtonOverridesMissPerf.default	1665	1654	1.01:1
CarouselMinimalPerf.default	467	461	1.01:1
DialogMinimalPerf.default	759	753	1.01:1
DividerMinimalPerf.default	353	348	1.01:1
DropdownMinimalPerf.default	3091	3072	1.01:1
EmbedMinimalPerf.default	4108	4059	1.01:1
MenuButtonMinimalPerf.default	1646	1630	1.01:1
PopupMinimalPerf.default	601	595	1.01:1
SegmentMinimalPerf.default	345	340	1.01:1
TreeMinimalPerf.default	792	781	1.01:1
AccordionMinimalPerf.default	148	148	1:1
AnimationMinimalPerf.default	405	407	1:1
ButtonSlotsPerf.default	537	537	1:1
ChatMinimalPerf.default	640	641	1:1
DatepickerMinimalPerf.default	5363	5378	1:1
FormMinimalPerf.default	405	407	1:1
ListNestedPerf.default	547	546	1:1
RefMinimalPerf.default	231	232	1:1
SplitButtonMinimalPerf.default	4125	4127	1:1
TableManyItemsPerf.default	1912	1916	1:1
CustomToolbarPrototype.default	3835	3830	1:1
AlertMinimalPerf.default	268	270	0.99:1
AttachmentMinimalPerf.default	158	160	0.99:1
CardMinimalPerf.default	543	548	0.99:1
DropdownManyItemsPerf.default	664	668	0.99:1
HeaderSlotsPerf.default	752	762	0.99:1
InputMinimalPerf.default	1239	1253	0.99:1
RosterPerf.default	1134	1149	0.99:1
TooltipMinimalPerf.default	1014	1022	0.99:1
FlexMinimalPerf.default	286	291	0.98:1
ItemLayoutMinimalPerf.default	1195	1219	0.98:1
ListCommonPerf.default	621	634	0.98:1
ProviderMergeThemesPerf.default	1655	1691	0.98:1
SkeletonMinimalPerf.default	361	367	0.98:1
TableMinimalPerf.default	403	411	0.98:1
TextMinimalPerf.default	339	346	0.98:1
ImageMinimalPerf.default	365	379	0.96:1
RadioGroupMinimalPerf.default	421	452	0.93:1

packages/react/src/components/Dropdown/Dropdown.base.tsx

khmakoto · 2021-09-09T00:30:46Z

packages/react/src/components/Dropdown/Dropdown.test.tsx

+    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');
+    });


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

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" 😅)

msft-fluent-ui-bot · 2021-09-10T07:41:40Z

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

* dropdown updates * Update packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.base.tsx Co-authored-by: Makoto Morimoto <[email protected]> * add change file * fix line length Co-authored-by: Makoto Morimoto <[email protected]>

smhigley added 3 commits September 7, 2021 10:56

only set live region on Dropdown when focused

3dc0b0b

update snapshots

4d05f2c

Change files

1c48b43

smhigley requested a review from a team September 7, 2021 18:29

msft-fluent-ui-bot added the Component: Dropdown label Sep 7, 2021

msft-fluent-ui-bot assigned GeoffCoxMSFT Sep 7, 2021

msft-fluent-ui-bot added Area: Accessibility Area: Narrator Area: NVDA NVDA screen reader labels Sep 7, 2021

GeoffCoxMSFT reviewed Sep 8, 2021

View reviewed changes

packages/react/src/components/Dropdown/Dropdown.base.tsx Show resolved Hide resolved

added a test for aria-live on focus

50f9561

GeoffCoxMSFT approved these changes Sep 9, 2021

View reviewed changes

khmakoto approved these changes Sep 9, 2021

View reviewed changes

smhigley merged commit 86c831d into microsoft:master Sep 9, 2021

msft-fluent-ui-bot mentioned this pull request Sep 10, 2021

Multi Select Dropdown : On reset form or changing to initial values , NVDA/Narrator is reading the place holder text in multi select dropdown. #19513

Closed

micahgodbolt mentioned this pull request Jun 7, 2022

Cherry-pick #19667 to 7.0 #23425

Merged

smhigley mentioned this pull request Oct 27, 2022

aria-live attribute on Dropdown doesn't apply to child span #19346

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

smhigley commented Sep 7, 2021

codesandbox-ci bot commented Sep 7, 2021 •

edited

Loading

size-auditor bot commented Sep 7, 2021 •

edited

Loading

fabricteam commented Sep 7, 2021 •

edited

Loading

fabricteam commented Sep 7, 2021 •

edited

Loading

khmakoto Sep 9, 2021

smhigley Sep 9, 2021

msft-fluent-ui-bot commented Sep 10, 2021

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

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

Conversation

smhigley commented Sep 7, 2021

Pull request checklist

Description of changes

codesandbox-ci bot commented Sep 7, 2021 • edited Loading

size-auditor bot commented Sep 7, 2021 • edited Loading

Asset size changes

fabricteam commented Sep 7, 2021 • edited Loading

📊 Bundle size report

fabricteam commented Sep 7, 2021 • edited Loading

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Potential regressions comparing to master

khmakoto Sep 9, 2021

Choose a reason for hiding this comment

smhigley Sep 9, 2021

Choose a reason for hiding this comment

msft-fluent-ui-bot commented Sep 10, 2021

codesandbox-ci bot commented Sep 7, 2021 •

edited

Loading

size-auditor bot commented Sep 7, 2021 •

edited

Loading

fabricteam commented Sep 7, 2021 •

edited

Loading

fabricteam commented Sep 7, 2021 •

edited

Loading

Perf Analysis (`@fluentui/react`)

Perf Analysis (`@fluentui/react-northstar`)