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.

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

FocusTrapZone: Adding aria-hidden to bumper elements so that they are not read by screen readers #14376

Merged
merged 3 commits into from
Aug 7, 2020

Conversation

khmakoto
Copy link
Member

@khmakoto khmakoto commented Aug 6, 2020

Pull request checklist

Description of changes

This PR adds aria-hidden='true' to bumper elements in the FocusTrapZone component so they are not read by screen readers, as they are just there for functionality purposes and could confuse the users if read.

Focus areas to test

(optional)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 6, 2020

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 821256f:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@DustyTheBot
Copy link

DustyTheBot commented Aug 6, 2020

Warnings
⚠️ There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.

Generated by 🚫 dangerJS against 821256f

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Aug 6, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 862 859 5000
ButtonNext mount 554 569 5000
Checkbox mount 1446 1532 5000
CheckboxBase mount 1275 1307 5000
CheckboxNext mount 1524 1590 5000
ChoiceGroup mount 4678 4749 5000
ComboBox mount 876 857 1000
CommandBar mount 6947 6955 1000
ContextualMenu mount 11408 11492 1000
DefaultButton mount 1018 1053 5000
DetailsRow mount 3554 3389 5000
DetailsRowFast mount 3489 3409 5000
DetailsRowNoStyles mount 3267 3298 5000
Dialog mount 1460 1423 1000
DocumentCardTitle mount 1666 1722 1000
Dropdown mount 2422 2572 5000
FocusZone mount 1670 1719 5000
IconButton mount 1718 1660 5000
Label mount 332 317 5000
Link mount 432 416 5000
LinkNext mount 464 462 5000
MenuButton mount 1408 1431 5000
Nav mount 3132 3172 1000
Panel mount 1382 1374 1000
Persona mount 800 823 1000
Pivot mount 1310 1326 1000
PivotNext mount 1301 1326 1000
PrimaryButton mount 1162 1202 5000
SearchBox mount 1205 1241 5000
SearchBoxNext mount 1252 1323 5000
Slider mount 1417 1419 5000
SliderNext mount 1945 1904 5000
SpinButton mount 4690 4973 5000
SpinButtonNext mount 4777 4923 5000
Spinner mount 373 403 5000
SplitButton mount 3003 2988 5000
Stack mount 511 517 5000
StackWithIntrinsicChildren mount 1999 1890 5000
StackWithTextChildren mount 4899 4826 5000
TagPicker mount 2615 2538 5000
Text mount 397 409 5000
TextField mount 1299 1321 5000
ThemeProvider mount 2822 2656 5000
ThemeProvider virtual-rerender 497 491 5000
Toggle mount 769 779 5000
ToggleNext mount 833 846 5000
button mount 111 112 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.45 0.48 0.94:1 2000 891
🦄 Button.Fluent 0.11 0.18 0.61:1 5000 528
🔧 Checkbox.Fluent 0.59 0.32 1.84:1 1000 588
🎯 Dialog.Fluent 0.15 0.21 0.71:1 5000 738
🔧 Dropdown.Fluent 2.69 0.45 5.98:1 1000 2692
🔧 Icon.Fluent 0.14 0.05 2.8:1 5000 697
🎯 Image.Fluent 0.07 0.1 0.7:1 5000 362
🔧 Slider.Fluent 1.47 0.33 4.45:1 1000 1465
🔧 Text.Fluent 0.07 0.02 3.5:1 5000 359
🦄 Tooltip.Fluent 0.1 14.76 0.01:1 5000 514

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
HeaderMinimalPerf.default 367 307 1.2:1
AttachmentMinimalPerf.default 176 154 1.14:1
RadioGroupMinimalPerf.default 419 381 1.1:1
Text.Fluent 359 327 1.1:1
CardMinimalPerf.default 576 528 1.09:1
DividerMinimalPerf.default 364 335 1.09:1
FlexMinimalPerf.default 279 255 1.09:1
Avatar.Fluent 891 824 1.08:1
TreeWith60ListItems.default 206 193 1.07:1
ButtonMinimalPerf.default 167 158 1.06:1
CarouselMinimalPerf.default 488 460 1.06:1
ChatWithPopoverPerf.default 477 451 1.06:1
TableMinimalPerf.default 380 358 1.06:1
TreeMinimalPerf.default 878 840 1.05:1
ChatDuplicateMessagesPerf.default 431 414 1.04:1
CheckboxMinimalPerf.default 2733 2621 1.04:1
ListMinimalPerf.default 477 460 1.04:1
SplitButtonMinimalPerf.default 3711 3554 1.04:1
AvatarMinimalPerf.default 451 438 1.03:1
DropdownManyItemsPerf.default 765 743 1.03:1
GridMinimalPerf.default 325 316 1.03:1
HierarchicalTreeMinimalPerf.default 409 397 1.03:1
PopupMinimalPerf.default 621 604 1.03:1
PortalMinimalPerf.default 111 108 1.03:1
TableManyItemsPerf.default 2341 2263 1.03:1
InputMinimalPerf.default 1227 1198 1.02:1
MenuButtonMinimalPerf.default 1451 1416 1.02:1
ReactionMinimalPerf.default 367 361 1.02:1
CustomToolbarPrototype.default 3509 3453 1.02:1
TooltipMinimalPerf.default 767 753 1.02:1
VideoMinimalPerf.default 601 590 1.02:1
Dialog.Fluent 738 727 1.02:1
Tooltip.Fluent 514 503 1.02:1
AlertMinimalPerf.default 299 295 1.01:1
AttachmentSlotsPerf.default 1104 1097 1.01:1
DropdownMinimalPerf.default 2824 2808 1.01:1
HeaderSlotsPerf.default 768 761 1.01:1
LayoutMinimalPerf.default 388 385 1.01:1
LoaderMinimalPerf.default 694 688 1.01:1
Image.Fluent 362 360 1.01:1
Slider.Fluent 1465 1452 1.01:1
AnimationMinimalPerf.default 355 355 1:1
EmbedMinimalPerf.default 1859 1860 1:1
SegmentMinimalPerf.default 329 330 1:1
SliderMinimalPerf.default 1488 1488 1:1
TextMinimalPerf.default 306 307 1:1
ToolbarMinimalPerf.default 913 909 1:1
ButtonSlotsPerf.default 578 586 0.99:1
ListCommonPerf.default 949 961 0.99:1
ListWith60ListItems.default 992 1003 0.99:1
ChatMinimalPerf.default 591 601 0.98:1
ImageMinimalPerf.default 365 372 0.98:1
ListNestedPerf.default 861 879 0.98:1
ProviderMergeThemesPerf.default 1701 1729 0.98:1
IconMinimalPerf.default 633 645 0.98:1
Button.Fluent 528 538 0.98:1
Checkbox.Fluent 588 601 0.98:1
Dropdown.Fluent 2692 2742 0.98:1
Icon.Fluent 697 710 0.98:1
ProviderMinimalPerf.default 827 849 0.97:1
StatusMinimalPerf.default 649 667 0.97:1
TextAreaMinimalPerf.default 456 472 0.97:1
BoxMinimalPerf.default 321 334 0.96:1
ItemLayoutMinimalPerf.default 1192 1238 0.96:1
MenuMinimalPerf.default 853 886 0.96:1
LabelMinimalPerf.default 415 439 0.95:1
FormMinimalPerf.default 376 401 0.94:1
RefMinimalPerf.default 185 197 0.94:1
DialogMinimalPerf.default 744 796 0.93:1
AccordionMinimalPerf.default 132 148 0.89:1

@size-auditor
Copy link

size-auditor bot commented Aug 6, 2020

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react office-ui-fabric-react-HoverCard 95.43 kB 95.447 kB ExceedsBaseline     17 bytes
office-ui-fabric-react office-ui-fabric-react-Callout 82.7 kB 82.717 kB ExceedsBaseline     17 bytes
office-ui-fabric-react fluentui-react-next-Panel 191.099 kB 191.116 kB ExceedsBaseline     17 bytes
office-ui-fabric-react office-ui-fabric-react-FocusTrapZone 14.403 kB 14.42 kB ExceedsBaseline     17 bytes
office-ui-fabric-react office-ui-fabric-react-Dropdown 222.897 kB 222.914 kB ExceedsBaseline     17 bytes
office-ui-fabric-react office-ui-fabric-react-Modal 91.647 kB 91.664 kB ExceedsBaseline     17 bytes
office-ui-fabric-react fluentui-react-next-HoverCard 95.43 kB 95.447 kB ExceedsBaseline     17 bytes
office-ui-fabric-react office-ui-fabric-react-Panel 191.099 kB 191.116 kB ExceedsBaseline     17 bytes
office-ui-fabric-react office-ui-fabric-react-Dialog 199.64 kB 199.657 kB ExceedsBaseline     17 bytes
office-ui-fabric-react office-ui-fabric-react-DatePicker 201.008 kB 201.025 kB ExceedsBaseline     17 bytes
office-ui-fabric-react fluentui-react-next-FocusTrapZone 13.65 kB 13.667 kB ExceedsBaseline     17 bytes
office-ui-fabric-react fluentui-react-next-Modal 90.517 kB 90.534 kB ExceedsBaseline     17 bytes
office-ui-fabric-react office-ui-fabric-react-Coachmark 91.867 kB 91.884 kB ExceedsBaseline     17 bytes
office-ui-fabric-react fluentui-react-next-Dialog 199.599 kB 199.616 kB ExceedsBaseline     17 bytes
office-ui-fabric-react fluentui-react-next-DatePicker 173.97 kB 173.987 kB ExceedsBaseline     17 bytes
office-ui-fabric-react fluentui-react-next-Dropdown 222.897 kB 222.914 kB ExceedsBaseline     17 bytes
office-ui-fabric-react fluentui-react-next-Callout 78.372 kB 78.389 kB ExceedsBaseline     17 bytes
office-ui-fabric-react fluentui-react-next-Coachmark 88.059 kB 88.076 kB ExceedsBaseline     17 bytes
office-ui-fabric-react fluentui-react-next-TeachingBubble 195.848 kB 195.865 kB ExceedsBaseline     17 bytes
office-ui-fabric-react office-ui-fabric-react-TeachingBubble 195.848 kB 195.865 kB ExceedsBaseline     17 bytes

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: aea3a8be1e98123cf840bc245274b84621635f4c (build)

Copy link
Contributor

@phkuo phkuo left a comment

Choose a reason for hiding this comment

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

Thanks @khmakoto

@msft-github-bot
Copy link
Contributor

Hello @khmakoto!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-github-bot) and give me an instruction to get started! Learn more here.

@msft-github-bot msft-github-bot merged commit e4928eb into microsoft:master Aug 7, 2020
@khmakoto khmakoto deleted the focusTrapZoneAriaHidden branch August 7, 2020 18:10
@msft-github-bot
Copy link
Contributor

🎉office-ui-fabric-react@v7.126.3 has been released which incorporates this pull request.:tada:

Handy links:

tmaster628 pushed a commit to tmaster628/fluentui that referenced this pull request Aug 12, 2020
… not read by screen readers (microsoft#14376)

#### Pull request checklist

- [x] Addresses an existing issue: Fixes microsoft#14241
- [x] Include a change request file using `$ yarn change`

#### Description of changes

This PR adds `aria-hidden='true'` to bumper elements in the `FocusTrapZone` component so they are not read by screen readers, as they are just there for functionality purposes and could confuse the users if read.

#### Focus areas to test

(optional)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

FocusTrapZone's trapping elements need to be hidden
4 participants