Skip to content

Conversation

@emmayjiang
Copy link
Contributor

@emmayjiang emmayjiang commented Jul 26, 2023

This PR adds AnnounceContext for use in FAI.

This context is a top-level screen reader notification utility that can be consumed by any component and used to fire on-demand screen reader announcements.

With something as complex as chat, and especially with loading messages and uploading files, we need a way to manage and queue custom screen reader notifications. Chat messages especially need the ability to have the screen reader notification text differ from the visual text on screen, since the visual text of a message often contains more information than is necessary in a notification.

We are hosting it in FUI instead of FAI because we eventually want it in FUI, and having the context be imported from there means we won’t have to change the import every place it’s used.

@emmayjiang emmayjiang requested review from a team as code owners July 26, 2023 19:13
@fabricteam
Copy link
Collaborator

fabricteam commented Jul 26, 2023

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
InfoButton mount 9 15 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 633 628 5000
Button mount 311 292 5000
Field mount 1072 1087 5000
FluentProvider mount 652 671 5000
FluentProviderWithTheme mount 83 95 10
FluentProviderWithTheme virtual-rerender 82 77 10
FluentProviderWithTheme virtual-rerender-with-unmount 90 88 10
InfoButton mount 9 15 5000 Possible regression
MakeStyles mount 841 866 50000
Persona mount 1683 1647 5000
SpinButton mount 1327 1336 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 26, 2023

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)
88.535 kB
26.796 kB
react-alert
Alert
84.992 kB
22.03 kB
react-avatar
Avatar
47.739 kB
14.521 kB
react-avatar
AvatarGroup
15.695 kB
6.314 kB
react-avatar
AvatarGroupItem
63.915 kB
19.001 kB
react-badge
Badge
23.604 kB
7.272 kB
react-badge
CounterBadge
24.506 kB
7.574 kB
react-badge
PresenceBadge
22.253 kB
7.891 kB
react-button
Button
39.193 kB
9.743 kB
react-button
CompoundButton
46.661 kB
11.257 kB
react-button
MenuButton
43.553 kB
10.979 kB
react-button
SplitButton
51.758 kB
12.571 kB
react-button
ToggleButton
57.629 kB
11.645 kB
react-card
Card - All
89.609 kB
25.358 kB
react-card
Card
84.027 kB
23.768 kB
react-card
CardFooter
9.24 kB
3.907 kB
react-card
CardHeader
11.652 kB
4.741 kB
react-card
CardPreview
10.048 kB
4.254 kB
react-checkbox
Checkbox
33.194 kB
10.708 kB
react-combobox
Combobox (including child components)
87.958 kB
28.359 kB
react-combobox
Dropdown (including child components)
86.382 kB
27.983 kB
react-components
react-components: Button, FluentProvider & webLightTheme
67.576 kB
18.225 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
206.083 kB
57.397 kB
react-components
react-components: FluentProvider & webLightTheme
36.409 kB
12.003 kB
react-datepicker-compat
DatePicker Compat
218.141 kB
58.186 kB
react-dialog
Dialog (including children components)
87.355 kB
26.401 kB
react-divider
Divider
17.49 kB
6.364 kB
react-field
Field
18.163 kB
6.945 kB
react-image
Image
11.561 kB
4.637 kB
react-infobutton
InfoButton
126.753 kB
39.348 kB
react-infobutton
InfoLabel
130.343 kB
40.471 kB
react-input
Input
24.202 kB
7.762 kB
react-label
Label
10.186 kB
4.253 kB
react-link
Link
12.782 kB
5.247 kB
react-menu
Menu (including children components)
134.132 kB
40.977 kB
react-menu
Menu (including selectable components)
136.896 kB
41.456 kB
react-persona
Persona
55.293 kB
16.535 kB
react-popover
Popover
115.312 kB
35.916 kB
react-portal
Portal
11.935 kB
4.421 kB
react-portal-compat
PortalCompatProvider
6.48 kB
2.203 kB
react-positioning
usePositioning
25.062 kB
9.087 kB
react-progress
ProgressBar
13.941 kB
5.498 kB
react-provider
FluentProvider
18.129 kB
6.73 kB
react-radio
Radio
27.017 kB
8.638 kB
react-radio
RadioGroup
11.352 kB
4.749 kB
react-select
Select
24.926 kB
8.702 kB
react-slider
Slider
34.846 kB
11.153 kB
react-spinbutton
SpinButton
33.723 kB
10.337 kB
react-spinner
Spinner
21.77 kB
7.134 kB
react-switch
Switch
29.472 kB
9.219 kB
react-table
DataGrid
158.433 kB
42.451 kB
react-table
Table (Primitives only)
43.95 kB
12.263 kB
react-table
Table as DataGrid
132.237 kB
33.887 kB
react-table
Table (Selection only)
77.612 kB
19.179 kB
react-table
Table (Sort only)
76.231 kB
18.783 kB
react-tags-preview
InteractionTag
34.171 kB
9.199 kB
react-tags-preview
Tag
25.962 kB
8.49 kB
react-tags-preview
TagGroup
69.398 kB
20.364 kB
react-text
Text - Default
12.574 kB
4.982 kB
react-text
Text - Wrappers
15.726 kB
5.302 kB
react-textarea
Textarea
27.677 kB
9.115 kB
react-toast
Toast (including Toaster)
78.557 kB
23.714 kB
react-tooltip
Tooltip
48.261 kB
16.86 kB
🤖 This report was generated against 58c60bce83efdf5811adb73c4f2f9b1950109fbf

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 26, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

Copy link
Member

@layershifter layershifter left a comment

Choose a reason for hiding this comment

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

Can you please fill PR description with an explainer of what it does, how will it be used and why it cannot be hosted in FAI?

@emmayjiang emmayjiang requested a review from layershifter July 27, 2023 16:55
@codesandbox-ci
Copy link

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 22bd5c5:

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

@size-auditor
Copy link

size-auditor bot commented Jul 31, 2023

Asset size changes

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

Baseline commit: 58c60bce83efdf5811adb73c4f2f9b1950109fbf (build)

@emmayjiang emmayjiang merged commit 937b241 into microsoft:master Jul 31, 2023
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 1, 2023
* master: (37 commits)
  release (microsoft#28696)
  Fixing re-render issue for all charts when empty (microsoft#28321)
  feat(FluentProvider): emit errors on duplicate IDs (microsoft#28670)
  applying package updates
  fix(react-positioning): autoSize causing position update to reach maximum (microsoft#28689)
  fix(react-tags-preview): fix InteractionTag hover styles (microsoft#28686)
  Accordion: export AccordionHeaderProvider (microsoft#28542)
  feat(react-shared-contexts): add AnnounceContext (microsoft#28654)
  Added VR tests for Breadcrumb (microsoft#28653)
  fix(react-menu): use outline for menuItem focus ring (microsoft#28685)
  [Bug]: Tree, vertical spacing of branches and children is inconsistent (microsoft#28681)
  feaTt(react-tree): adds openItems and checkedItems to tree callback data (microsoft#28669)
  applying package updates
  Add mountNode prop to combos (microsoft#28661)
  react-tags-preview: add more vr test (microsoft#28582)
  chore: migrate to nx 16.1.4 (microsoft#28583)
  applying package updates
  chore: improves internal headless signature (microsoft#28651)
  fix: remove margin from icon when ToolbarButton is vertical (microsoft#28658)
  applying package updates
  ...
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.

5 participants