Skip to content

react-image: removed conditional aria-hidden#19688

Merged
tringakrasniqi merged 4 commits intomicrosoft:masterfrom
tringakrasniqi:image-a11y-fix
Sep 17, 2021
Merged

react-image: removed conditional aria-hidden#19688
tringakrasniqi merged 4 commits intomicrosoft:masterfrom
tringakrasniqi:image-a11y-fix

Conversation

@tringakrasniqi
Copy link
Copy Markdown
Contributor

@tringakrasniqi tringakrasniqi commented Sep 8, 2021

Pull request checklist

- [ ] Addresses an existing issue: Fixes #0000

  • Include a change request file using $ yarn change

Description of changes

The previous implementation of the Image included the conditional adding of aria-hidden based on the presence of the alt or aria-label attributes. This is not considered a good practice, thus removing it.

Images are expected to have the alt attribute description, or to be added other aria attributes explicitly from the user to confirm that the particular image is decorative only.

@fabricteam
Copy link
Copy Markdown
Collaborator

fabricteam commented Sep 8, 2021

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
163.779 kB
46.685 kB
163.857 kB
46.723 kB
-78 B
-38 B
react-image
Image
9.726 kB
3.909 kB
9.804 kB
3.942 kB
-78 B
-33 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: FluentProvider & webLightTheme
35.75 kB
11.392 kB
🤖 This report was generated against 5435d6d320e9c6e83e07a9cf6676c3e29b3d491b

@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci Bot commented Sep 8, 2021

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 7fd10f0:

Sandbox Source
Fluent UI React Starter Configuration

@size-auditor
Copy link
Copy Markdown

size-auditor Bot commented Sep 8, 2021

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: d91adabc3da2d4667e5ccd5d120671b3b0c479e0 (build)

@tringakrasniqi tringakrasniqi changed the title Removed conditional adding of aria-hidden react-image: removed conditional aria-hidden Sep 8, 2021
@fabricteam
Copy link
Copy Markdown
Collaborator

fabricteam commented Sep 8, 2021

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 890 893 5000
BaseButton mount 914 933 5000
Breadcrumb mount 2631 2619 1000
ButtonNext mount 444 428 5000
Checkbox mount 1498 1531 5000
CheckboxBase mount 1310 1278 5000
ChoiceGroup mount 4736 4714 5000
ComboBox mount 982 980 1000
CommandBar mount 10309 10306 1000
ContextualMenu mount 6573 6529 1000
DefaultButton mount 1138 1132 5000
DetailsRow mount 3823 3704 5000
DetailsRowFast mount 3748 3715 5000
DetailsRowNoStyles mount 3544 3568 5000
Dialog mount 2371 2458 1000
DocumentCardTitle mount 142 159 1000
Dropdown mount 3219 3184 5000
FluentProviderNext mount 7384 7437 5000
FluentProviderWithTheme mount 341 347 10
FluentProviderWithTheme virtual-rerender 96 100 10
FluentProviderWithTheme virtual-rerender-with-unmount 476 517 10
FocusTrapZone mount 1823 1757 5000
FocusZone mount 1842 1794 5000
IconButton mount 1743 1726 5000
Label mount 347 342 5000
Layer mount 2961 3018 5000
Link mount 461 467 5000
MakeStyles mount 1854 1830 50000
MenuButton mount 1454 1480 5000
MessageBar mount 2014 1999 5000
Nav mount 3267 3252 1000
OverflowSet mount 1097 1124 5000
Panel mount 2373 2333 1000
Persona mount 854 819 1000
Pivot mount 1389 1401 1000
PrimaryButton mount 1275 1286 5000
Rating mount 7598 7612 5000
SearchBox mount 1317 1310 5000
Shimmer mount 2564 2537 5000
Slider mount 1955 1973 5000
SpinButton mount 4968 4961 5000
Spinner mount 415 435 5000
SplitButton mount 3128 3129 5000
Stack mount 489 495 5000
StackWithIntrinsicChildren mount 1548 1561 5000
StackWithTextChildren mount 4488 4460 5000
SwatchColorPicker mount 10166 10205 5000
Tabs mount 1417 1410 1000
TagPicker mount 2606 2609 5000
TeachingBubble mount 13239 13403 5000
Text mount 419 409 5000
TextField mount 1371 1384 5000
ThemeProvider mount 1198 1194 5000
ThemeProvider virtual-rerender 609 616 5000
ThemeProvider virtual-rerender-with-unmount 1863 1898 5000
Toggle mount 797 806 5000
buttonNative mount 110 117 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TreeWith60ListItems.default 193 170 1.14:1
ListNestedPerf.default 574 523 1.1:1
DropdownManyItemsPerf.default 708 660 1.07:1
ButtonSlotsPerf.default 558 525 1.06:1
BoxMinimalPerf.default 361 344 1.05:1
PopupMinimalPerf.default 609 578 1.05:1
ChatWithPopoverPerf.default 362 347 1.04:1
ListCommonPerf.default 631 608 1.04:1
SkeletonMinimalPerf.default 354 342 1.04:1
AlertMinimalPerf.default 274 267 1.03:1
HeaderMinimalPerf.default 361 351 1.03:1
MenuButtonMinimalPerf.default 1652 1601 1.03:1
ProviderMinimalPerf.default 1007 982 1.03:1
TooltipMinimalPerf.default 1024 994 1.03:1
CardMinimalPerf.default 548 537 1.02:1
ChatMinimalPerf.default 650 637 1.02:1
DividerMinimalPerf.default 365 359 1.02:1
FlexMinimalPerf.default 284 278 1.02:1
FormMinimalPerf.default 397 391 1.02:1
GridMinimalPerf.default 335 330 1.02:1
ListMinimalPerf.default 510 499 1.02:1
ListWith60ListItems.default 647 634 1.02:1
LoaderMinimalPerf.default 689 676 1.02:1
ReactionMinimalPerf.default 368 361 1.02:1
AnimationMinimalPerf.default 408 402 1.01:1
AvatarMinimalPerf.default 193 192 1.01:1
HeaderSlotsPerf.default 757 746 1.01:1
ImageMinimalPerf.default 368 365 1.01:1
ItemLayoutMinimalPerf.default 1213 1197 1.01:1
MenuMinimalPerf.default 827 821 1.01:1
SplitButtonMinimalPerf.default 4114 4069 1.01:1
StatusMinimalPerf.default 665 659 1.01:1
TableManyItemsPerf.default 1872 1859 1.01:1
TextAreaMinimalPerf.default 494 491 1.01:1
ButtonOverridesMissPerf.default 1705 1707 1:1
DialogMinimalPerf.default 741 742 1:1
DropdownMinimalPerf.default 3110 3095 1:1
EmbedMinimalPerf.default 4094 4087 1:1
InputMinimalPerf.default 1246 1247 1:1
ProviderMergeThemesPerf.default 1700 1707 1:1
RadioGroupMinimalPerf.default 430 428 1:1
RefMinimalPerf.default 234 233 1:1
TableMinimalPerf.default 394 394 1:1
SegmentMinimalPerf.default 338 343 0.99:1
SliderMinimalPerf.default 1548 1563 0.99:1
CustomToolbarPrototype.default 3855 3886 0.99:1
ToolbarMinimalPerf.default 924 933 0.99:1
AttachmentSlotsPerf.default 1055 1078 0.98:1
CarouselMinimalPerf.default 451 458 0.98:1
CheckboxMinimalPerf.default 2773 2817 0.98:1
DatepickerMinimalPerf.default 5491 5586 0.98:1
LabelMinimalPerf.default 382 389 0.98:1
RosterPerf.default 1148 1174 0.98:1
IconMinimalPerf.default 591 601 0.98:1
TextMinimalPerf.default 337 345 0.98:1
TreeMinimalPerf.default 787 804 0.98:1
AttachmentMinimalPerf.default 141 146 0.97:1
ChatDuplicateMessagesPerf.default 294 303 0.97:1
LayoutMinimalPerf.default 354 364 0.97:1
AccordionMinimalPerf.default 148 154 0.96:1
VideoMinimalPerf.default 601 636 0.94:1
ButtonMinimalPerf.default 159 173 0.92:1
PortalMinimalPerf.default 165 183 0.9:1

@tringakrasniqi tringakrasniqi mentioned this pull request Sep 9, 2021
32 tasks
@tringakrasniqi tringakrasniqi requested review from a team and theerebuss September 14, 2021 08:53
Comment thread change/@fluentui-react-image-94f41cca-af00-4429-981c-3b258ef16bf4.json Outdated
@tringakrasniqi tringakrasniqi merged commit 305bb56 into microsoft:master Sep 17, 2021
@tringakrasniqi tringakrasniqi deleted the image-a11y-fix branch September 17, 2021 10:10
mlp73 pushed a commit to mlp73/fluentui that referenced this pull request Jan 17, 2022
* Removed conditional adding of aria-hidden

* Change files

* Updated change file
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.

4 participants