fix: v8 ComboBox button is no longer aria-hidden by default by smhigley · Pull Request #26050 · microsoft/fluentui

smhigley · 2022-12-20T20:46:12Z

Previous Behavior

Previously, the chevron button had aria-hidden=true by default, since the input handles all keyboard interaction. Including the button in the accessibility tree effectively creates two form fields per combobox.

The issue is that Android Talkback does not allow the user to trigger a click or touch event in the input, making it impossible to expand the ComboBox with Talkback running. While this is a bug on their side, it is still a severe enough issue to make it worth changing our desktop screen reader behavior so that Talkback users are able to use the control.

New Behavior

The chevron button does not have aria-hidden by default. This can still be changed by authors using the already-existing isButtonAriaHidden prop.

Note -- this does not affect the tab order or the DOM.

Fixes 15717

size-auditor · 2022-12-20T20:58:05Z

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-TimePicker	226.281 kB	226.265 kB	-16 bytes
office-ui-fabric-react	fluentui-react-ComboBox	237.34 kB	237.324 kB	-16 bytes

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

Baseline commit: 0dced6be8495f5341e09d8e0c5af7d20d9869b48 (build)

fabricteam · 2022-12-20T21:01:34Z

📊 Bundle size report

_{🤖 This report was generated against 0dced6be8495f5341e09d8e0c5af7d20d9869b48}

codesandbox-ci · 2022-12-20T21:01:57Z

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 872874a:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

fabricteam · 2022-12-20T21:03:32Z

🕵 fluentuiv8 Open the Visual Regressions report to inspect the 5 screenshots

✅ There was 4 screenshots added, 0 screenshots removed, 1040 screenshots unchanged, 0 screenshots with different dimensions and 1 screenshots with visible difference.

unknown 5 screenshots

Image Name	Diff(in Pixels)	Image Type
Coachmark.Collapsed.default.chromium.png	159	Changed
Pivot - Overflow.Root.Narrow - Last tab selected.chromium.png	0	Added
Pivot - Overflow.Root.Narrow - Overflow menu.chromium.png	0	Added
Pivot - Overflow.Tabs - RTL.Narrow - Last tab selected.chromium.png	0	Added
Pivot - Overflow.Tabs - RTL.Narrow - Overflow menu.chromium.png	0	Added

fabricteam · 2022-12-20T21:16:47Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	1421	1414	5000
Breadcrumb	mount	3431	3499	1000
Checkbox	mount	3106	3101	5000
CheckboxBase	mount	2757	2768	5000
ChoiceGroup	mount	5230	5186	5000
ComboBox	mount	1464	1451	1000
CommandBar	mount	11215	11153	1000
ContextualMenu	mount	12592	12700	1000
DefaultButton	mount	1639	1633	5000
DetailsRow	mount	4226	4258	5000
DetailsRowFast	mount	4191	4200	5000
DetailsRowNoStyles	mount	4105	4032	5000
Dialog	mount	3656	3565	1000
DocumentCardTitle	mount	674	675	1000
Dropdown	mount	3742	3805	5000
FocusTrapZone	mount	2373	2322	5000
FocusZone	mount	2287	2261	5000
GroupedList	mount	2249	2469	2
GroupedList	virtual-rerender	1351	1317	2
GroupedList	virtual-rerender-with-unmount	1939	1984	2
GroupedListV2	mount	663	662	2
GroupedListV2	virtual-rerender	643	671	2
GroupedListV2	virtual-rerender-with-unmount	664	679	2
IconButton	mount	2225	2236	5000
Label	mount	852	856	5000
Layer	mount	5078	5050	5000
Link	mount	960	976	5000
MenuButton	mount	1961	1956	5000
MessageBar	mount	2688	2726	5000
Nav	mount	3859	3815	1000
OverflowSet	mount	1616	1574	5000
Panel	mount	2982	2923	1000
Persona	mount	1513	1535	1000
Pivot	mount	1928	1876	1000
PrimaryButton	mount	1741	1773	5000
Rating	mount	8162	8091	5000
SearchBox	mount	1777	1754	5000
Shimmer	mount	3330	3331	5000
Slider	mount	2469	2471	5000
SpinButton	mount	5503	5456	5000
Spinner	mount	928	946	5000
SplitButton	mount	3602	3592	5000
Stack	mount	969	962	5000
StackWithIntrinsicChildren	mount	2766	2778	5000
StackWithTextChildren	mount	5601	5675	5000
SwatchColorPicker	mount	12113	12207	5000
TagPicker	mount	3110	3113	5000
TeachingBubble	mount	101204	98959	5000
Text	mount	962	957	5000
TextField	mount	1885	1876	5000
ThemeProvider	mount	1820	1858	5000
ThemeProvider	virtual-rerender	1286	1280	5000
ThemeProvider	virtual-rerender-with-unmount	2531	2602	5000
Toggle	mount	1322	1289	5000
buttonNative	mount	661	656	5000

…t#26050)

smhigley added 2 commits December 19, 2022 01:47

fix: ComboBox button is not aria-hidden by default

2479bb5

change file

a3a7878

smhigley requested review from a team as code owners December 20, 2022 20:46

msft-fluent-ui-bot added the Component: Combobox label Dec 20, 2022

msft-fluent-ui-bot assigned bsunderhus Dec 20, 2022

github-actions bot added this to the October Project Cycle Q4 2022 milestone Dec 20, 2022

khmakoto approved these changes Dec 20, 2022

View reviewed changes

spmonahan approved these changes Dec 20, 2022

View reviewed changes

update experiments snapshot

872874a

smhigley mentioned this pull request Dec 22, 2022

fix: button semantics for Combobox chevron, and pointer styles #26075

Merged

smhigley merged commit 36af377 into microsoft:master Dec 22, 2022

q1b pushed a commit to q1b/fluentui that referenced this pull request Jan 24, 2023

fix: v8 ComboBox button is no longer aria-hidden by default (microsof…

0ecac26

…t#26050)

Hotell pushed a commit to Hotell/fluentui that referenced this pull request Feb 9, 2023

fix: v8 ComboBox button is no longer aria-hidden by default (microsof…

0ebcf6f

…t#26050)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: v8 ComboBox button is no longer aria-hidden by default#26050

fix: v8 ComboBox button is no longer aria-hidden by default#26050
smhigley merged 3 commits intomicrosoft:masterfrom
smhigley:button-hidden

smhigley commented Dec 20, 2022

Uh oh!

size-auditor bot commented Dec 20, 2022 •

edited

Loading

Uh oh!

fabricteam commented Dec 20, 2022 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Dec 20, 2022 •

edited

Loading

Uh oh!

fabricteam commented Dec 20, 2022 •

edited

Loading

Uh oh!

fabricteam commented Dec 20, 2022 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Conversation

smhigley commented Dec 20, 2022

Previous Behavior

New Behavior

Uh oh!

size-auditor bot commented Dec 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Dec 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

codesandbox-ci bot commented Dec 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Dec 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv8 Open the Visual Regressions report to inspect the 5 screenshots

Uh oh!

fabricteam commented Dec 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

size-auditor bot commented Dec 20, 2022 •

edited

Loading

fabricteam commented Dec 20, 2022 •

edited

Loading

codesandbox-ci bot commented Dec 20, 2022 •

edited

Loading

fabricteam commented Dec 20, 2022 •

edited

Loading

fabricteam commented Dec 20, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)