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

feat: use ariaNotify when available for AriaLiveAnnouncer #31251

Merged
merged 5 commits into from
May 2, 2024

Conversation

smhigley
Copy link
Contributor

@smhigley smhigley commented May 1, 2024

ariaNotify is a new live notification API in ARIA (ref: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Accessibility/AriaNotify/explainer.md). The Edge team has implemented this in canary builds of Edge and Chrome, behind a flag. The next step towards getting ariaNotify into the spec is to have real-world implementations to test against, which is why we agreed to test this out in Fluent & Fluent AI.

This won't change the behavior for people who haven't turned on the flag (so in practice, all our real-world customers) until ariaNotify is shipped as a stable feature. But it should allow us, Edge, and screen reader vendors to test how well this works as an API in practice.

@smhigley smhigley requested a review from a team as a code owner May 1, 2024 18:49
@github-actions github-actions bot added this to the April Project Cycle Q1 2024 milestone May 1, 2024
@fabricteam
Copy link
Collaborator

fabricteam commented May 1, 2024

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 634 616 5000
Button mount 297 314 5000
Field mount 1124 1124 5000
FluentProvider mount 709 695 5000
FluentProviderWithTheme mount 79 75 10
FluentProviderWithTheme virtual-rerender 34 34 10
FluentProviderWithTheme virtual-rerender-with-unmount 76 74 10
MakeStyles mount 850 864 50000
Persona mount 1754 1763 5000
SpinButton mount 1296 1361 5000
SwatchPicker mount 1495 1526 5000

@fabricteam
Copy link
Collaborator

fabricteam commented May 1, 2024

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.099 MB
266.966 kB
1.1 MB
267.122 kB
431 B
156 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)
100.94 kB
30.574 kB
react-alert
Alert
83.737 kB
23.475 kB
react-avatar
Avatar
50.175 kB
15.944 kB
react-avatar
AvatarGroup
19.702 kB
7.794 kB
react-avatar
AvatarGroupItem
64.829 kB
20.272 kB
react-breadcrumb
@fluentui/react-breadcrumb - package
116.817 kB
32.173 kB
react-button
Button
39.513 kB
11.17 kB
react-button
CompoundButton
46.874 kB
12.662 kB
react-button
MenuButton
44.292 kB
12.544 kB
react-button
SplitButton
52.306 kB
14.135 kB
react-button
ToggleButton
56.558 kB
13.068 kB
react-card
Card - All
103.992 kB
29.35 kB
react-card
Card
97.003 kB
27.61 kB
react-card
CardFooter
13.971 kB
5.626 kB
react-card
CardHeader
16.214 kB
6.386 kB
react-card
CardPreview
14.015 kB
5.752 kB
react-combobox
Combobox (including child components)
104.926 kB
33.812 kB
react-combobox
Dropdown (including child components)
106.398 kB
33.79 kB
react-components
react-components: Button, FluentProvider & webLightTheme
71.104 kB
20.52 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
221.287 kB
62.497 kB
react-components
react-components: FluentProvider & webLightTheme
43.591 kB
14.356 kB
react-datepicker-compat
DatePicker Compat
227.451 kB
63.531 kB
react-dialog
Dialog (including children components)
116.899 kB
36.102 kB
react-infobutton
InfoButton
139.885 kB
43.723 kB
react-infobutton
InfoLabel
143.7 kB
44.944 kB
react-menu
Menu (including children components)
153.846 kB
46.074 kB
react-menu
Menu (including selectable components)
156.532 kB
46.623 kB
react-message-bar
MessageBar (all components)
24.204 kB
8.983 kB
react-persona
Persona
57.066 kB
17.821 kB
react-popover
Popover
128.132 kB
40.174 kB
react-portal-compat
PortalCompatProvider
7.944 kB
2.588 kB
react-table
DataGrid
168.828 kB
46.848 kB
react-table
Table (Primitives only)
45.324 kB
14.116 kB
react-table
Table as DataGrid
137.912 kB
37.14 kB
react-table
Table (Selection only)
76.328 kB
20.545 kB
react-table
Table (Sort only)
74.971 kB
20.148 kB
react-tag-picker-preview
@fluentui/react-tag-picker-preview - package
188.273 kB
55.749 kB
react-tags
InteractionTag
15.299 kB
6.08 kB
react-tags
Tag
29.092 kB
9.418 kB
react-tags
TagGroup
82.044 kB
24.39 kB
react-timepicker-compat
TimePicker
106.944 kB
35.169 kB
react-toast
Toast (including Toaster)
98.667 kB
29.793 kB
🤖 This report was generated against effd6ffbcc5fd2deb7ccc40cd54d0b4f06a554fb

Copy link

codesandbox-ci bot commented May 1, 2024

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.

@fabricteam
Copy link
Collaborator

fabricteam commented May 1, 2024

🕵 fluentuiv9 No visual regressions between this PR and main

@smhigley smhigley merged commit 6eff065 into microsoft:master May 2, 2024
19 checks passed
@smhigley smhigley deleted the ariaNotify branch May 2, 2024 20:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants