Fix Tooltip to better support iOS VoiceOver#22216
Merged
spmonahan merged 3 commits intomicrosoft:masterfrom Mar 29, 2022
Merged
Fix Tooltip to better support iOS VoiceOver#22216spmonahan merged 3 commits intomicrosoft:masterfrom
spmonahan merged 3 commits intomicrosoft:masterfrom
Conversation
spmonahan
commented
Mar 25, 2022
| {content} | ||
| </div> | ||
| )} | ||
| <div id={tooltipId} role="none" style={hiddenContentStyle as React.CSSProperties}> |
Contributor
Author
There was a problem hiding this comment.
I tried marking this element aria-hidden="true" to avoid the issue where this can be focused by a virtual cursor and read twice. This worked for me in VO and Narrator but NVDA would not read the tooltips in this case.
|
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 6059f28:
|
Collaborator
📊 Bundle size report🤖 This report was generated against 3cbec72c2eec58b2ea6ef88ac4741aeb56bf7c87 |
smhigley
reviewed
Mar 25, 2022
Collaborator
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 800 | 789 | 5000 | |
| Breadcrumb | mount | 2271 | 2153 | 1000 | |
| Checkbox | mount | 1213 | 1276 | 5000 | |
| CheckboxBase | mount | 1102 | 1022 | 5000 | |
| ChoiceGroup | mount | 4074 | 4059 | 5000 | |
| ComboBox | mount | 845 | 895 | 1000 | |
| CommandBar | mount | 8999 | 9227 | 1000 | |
| ContextualMenu | mount | 10235 | 10305 | 1000 | |
| DefaultButton | mount | 985 | 984 | 5000 | |
| DetailsRow | mount | 3324 | 3260 | 5000 | |
| DetailsRowFast | mount | 3271 | 3272 | 5000 | |
| DetailsRowNoStyles | mount | 3108 | 3132 | 5000 | |
| Dialog | mount | 1954 | 1929 | 1000 | |
| DocumentCardTitle | mount | 135 | 143 | 1000 | |
| Dropdown | mount | 2855 | 2892 | 5000 | |
| FocusTrapZone | mount | 1611 | 1579 | 5000 | |
| FocusZone | mount | 1606 | 1607 | 5000 | |
| IconButton | mount | 1531 | 1526 | 5000 | |
| Label | mount | 292 | 298 | 5000 | |
| Layer | mount | 2546 | 2549 | 5000 | |
| Link | mount | 408 | 411 | 5000 | |
| MenuButton | mount | 1298 | 1278 | 5000 | |
| MessageBar | mount | 1849 | 1817 | 5000 | |
| Nav | mount | 2906 | 2858 | 1000 | |
| OverflowSet | mount | 955 | 967 | 5000 | |
| Panel | mount | 1836 | 1859 | 1000 | |
| Persona | mount | 724 | 889 | 1000 | |
| Pivot | mount | 1251 | 1225 | 1000 | |
| PrimaryButton | mount | 1161 | 1122 | 5000 | |
| Rating | mount | 6678 | 6648 | 5000 | |
| SearchBox | mount | 1138 | 1112 | 5000 | |
| Shimmer | mount | 2215 | 2159 | 5000 | |
| Slider | mount | 1675 | 1662 | 5000 | |
| SpinButton | mount | 4335 | 4365 | 5000 | |
| Spinner | mount | 378 | 377 | 5000 | |
| SplitButton | mount | 2752 | 2763 | 5000 | |
| Stack | mount | 441 | 440 | 5000 | |
| StackWithIntrinsicChildren | mount | 2027 | 1985 | 5000 | |
| StackWithTextChildren | mount | 4531 | 4548 | 5000 | |
| SwatchColorPicker | mount | 10171 | 10097 | 5000 | |
| TagPicker | mount | 2327 | 2317 | 5000 | |
| TeachingBubble | mount | 86492 | 87120 | 5000 | |
| Text | mount | 366 | 373 | 5000 | |
| TextField | mount | 1171 | 1211 | 5000 | |
| ThemeProvider | mount | 1011 | 1031 | 5000 | |
| ThemeProvider | virtual-rerender | 554 | 571 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1628 | 1605 | 5000 | |
| Toggle | mount | 685 | 701 | 5000 | |
| buttonNative | mount | 120 | 115 | 5000 |
d6c0b67 to
7455fc9
Compare
smhigley
approved these changes
Mar 28, 2022
Previously TooltipHost would dynamically render a visually hidden <div> with the provided id to link the div with the element the tooltip described. When the tooltip was activated the div would be removed from the DOM and the tip rendered with the same provided id. This prevented VoiceOver on iOS and iPadOS from correctly reading the tooltip. This change permanently renders the hidden <div> with the provided ID. The visual tooltip is now rendered with the provide ID plus a suffix of "--tooltip". This change allows iOS and iPadOS VO to properly read the tooltip.
7455fc9 to
a3f3c42
Compare
Asset size changes
Baseline commit: 3cbec72c2eec58b2ea6ef88ac4741aeb56bf7c87 (build) |
Needed to be updated due to changes in Tooltip/TooltipHost.
spmonahan
added a commit
to spmonahan/fluentui
that referenced
this pull request
Mar 31, 2022
Cherry picks changes from microsoft#22216 to the 7.0 branch.
spmonahan
added a commit
that referenced
this pull request
Apr 4, 2022
* Cherry Pick: Fix Tooltip to better support iOS VoiceOver to 7.0 Cherry picks changes from #22216 to the 7.0 branch. * Change files * Update API snapshot. * Update tests in experiments * Change files
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Current Behavior
TooltipHost dynamically renders a visually hidden
This prevents VoiceOver on iOS and iPadOS from correctly reading the tooltip.
New Behavior
This change permanently renders the hidden
It does create some redundancy when using screen readers (tested with NVDA, Narrator and VO) in that the hidden element can be focused with the virtual cursor so the tooltip content may be read twice. See the updated tests for examples of where this happens.