Accessibility change for Vertical Bar Chart

[scharde]

Pull request checklist

• Addresses an existing issue: Fixes #0000
• Include a change request file using $ yarn change

Description of changes

Changes are related to Vertical Bar Chart accessibility

1. Accessibility Data prop added for the Chart Data Callout. Accessibility Data props contain ariaLabel, ariaLabelledBy, and ariaDescribedBy props.
2. If the user is sending any custom accessibility data, then that will be used. else only visible data will be used by the narrator.
3. Custom Accessibility example is added.

Before Change

1. For Rectangle

2. For Stack

After Change

1. For Rectangle

2. For Stack

Focus areas to test

(optional)

[codesandbox-ci]

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

Sandbox	Source
Fluent UI React Starter	Configuration

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against a9cb101a5bae361fc515895150a4465fe439b7fc}

[size-auditor]

Asset size changes

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

Baseline commit: a9cb101a5bae361fc515895150a4465fe439b7fc (build)

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	905	913	5000
BaseButton	mount	1068	1036	5000
Breadcrumb	mount	2818	2857	1000
ButtonNext	mount	571	591	5000
Checkbox	mount	1717	1749	5000
CheckboxBase	mount	1450	1484	5000
ChoiceGroup	mount	5414	5370	5000
ComboBox	mount	1076	1131	1000
CommandBar	mount	10991	10968	1000
ContextualMenu	mount	6713	6899	1000
DefaultButton	mount	1228	1257	5000
DetailsRow	mount	4184	4062	5000
DetailsRowFast	mount	4108	4251	5000
DetailsRowNoStyles	mount	3957	3821	5000
Dialog	mount	2298	2378	1000
DocumentCardTitle	mount	172	155	1000
Dropdown	mount	3708	3691	5000
FluentProviderNext	mount	7509	7551	5000
FocusTrapZone	mount	1893	1976	5000
FocusZone	mount	1957	1923	5000
IconButton	mount	1988	1985	5000
Label	mount	375	376	5000
Layer	mount	1971	2003	5000
Link	mount	537	501	5000
MakeStyles	mount	1929	1930	50000
MenuButton	mount	1705	1671	5000
MessageBar	mount	2190	2233	5000
Nav	mount	3649	4061	1000
OverflowSet	mount	1158	1153	5000
Panel	mount	2284	2227	1000
Persona	mount	953	957	1000
Pivot	mount	1563	1586	1000
PrimaryButton	mount	1498	1508	5000
Rating	mount	8617	8873	5000
SearchBox	mount	1510	1473	5000
Shimmer	mount	2875	2891	5000
Slider	mount	2256	2214	5000
SpinButton	mount	5554	5456	5000
Spinner	mount	456	447	5000
SplitButton	mount	3589	3562	5000
Stack	mount	560	554	5000
StackWithIntrinsicChildren	mount	1796	1783	5000
StackWithTextChildren	mount	5251	5287	5000
SwatchColorPicker	mount	11504	11424	5000
Tabs	mount	1555	1599	1000
TagPicker	mount	2769	2661	5000
TeachingBubble	mount	12974	12690	5000
Text	mount	464	455	5000
TextField	mount	1591	1479	5000
ThemeProvider	mount	1305	1272	5000
ThemeProvider	virtual-rerender	660	648	5000
Toggle	mount	867	882	5000
buttonNative	mount	121	120	5000

Perf Analysis (@fluentui/react-northstar)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
AccordionMinimalPerf.default	165	174	0.95:1	analysis

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ButtonMinimalPerf.default	234	192	1.22:1
ChatMinimalPerf.default	834	703	1.19:1
IconMinimalPerf.default	730	676	1.08:1
AvatarMinimalPerf.default	244	228	1.07:1
BoxMinimalPerf.default	417	393	1.06:1
AttachmentMinimalPerf.default	183	174	1.05:1
CarouselMinimalPerf.default	539	514	1.05:1
ChatDuplicateMessagesPerf.default	347	330	1.05:1
ImageMinimalPerf.default	450	430	1.05:1
HeaderMinimalPerf.default	440	424	1.04:1
ListWith60ListItems.default	760	734	1.04:1
ReactionMinimalPerf.default	455	436	1.04:1
SliderMinimalPerf.default	1787	1724	1.04:1
VideoMinimalPerf.default	731	705	1.04:1
CardMinimalPerf.default	640	619	1.03:1
HeaderSlotsPerf.default	921	895	1.03:1
LoaderMinimalPerf.default	784	763	1.03:1
SegmentMinimalPerf.default	419	405	1.03:1
SkeletonMinimalPerf.default	414	403	1.03:1
DropdownManyItemsPerf.default	796	778	1.02:1
FormMinimalPerf.default	505	495	1.02:1
ListNestedPerf.default	670	658	1.02:1
RadioGroupMinimalPerf.default	520	512	1.02:1
ToolbarMinimalPerf.default	1047	1029	1.02:1
DialogMinimalPerf.default	845	836	1.01:1
DividerMinimalPerf.default	422	419	1.01:1
DropdownMinimalPerf.default	3400	3355	1.01:1
ItemLayoutMinimalPerf.default	1432	1414	1.01:1
TextMinimalPerf.default	389	386	1.01:1
TextAreaMinimalPerf.default	584	580	1.01:1
TooltipMinimalPerf.default	1171	1160	1.01:1
AlertMinimalPerf.default	312	313	1:1
AttachmentSlotsPerf.default	1209	1211	1:1
CheckboxMinimalPerf.default	3027	3018	1:1
DatepickerMinimalPerf.default	6096	6101	1:1
EmbedMinimalPerf.default	4551	4555	1:1
GridMinimalPerf.default	406	407	1:1
InputMinimalPerf.default	1428	1423	1:1
MenuButtonMinimalPerf.default	1886	1891	1:1
RosterPerf.default	1320	1319	1:1
ProviderMinimalPerf.default	1153	1151	1:1
SplitButtonMinimalPerf.default	4256	4274	1:1
StatusMinimalPerf.default	757	754	1:1
TableManyItemsPerf.default	2186	2185	1:1
CustomToolbarPrototype.default	4251	4251	1:1
ButtonOverridesMissPerf.default	1907	1924	0.99:1
ButtonSlotsPerf.default	621	626	0.99:1
ChatWithPopoverPerf.default	412	415	0.99:1
FlexMinimalPerf.default	308	311	0.99:1
LayoutMinimalPerf.default	410	415	0.99:1
ListCommonPerf.default	721	731	0.99:1
MenuMinimalPerf.default	961	968	0.99:1
RefMinimalPerf.default	261	264	0.99:1
TreeWith60ListItems.default	199	201	0.99:1
LabelMinimalPerf.default	434	442	0.98:1
PortalMinimalPerf.default	187	190	0.98:1
ProviderMergeThemesPerf.default	1799	1830	0.98:1
TreeMinimalPerf.default	876	893	0.98:1
ListMinimalPerf.default	583	601	0.97:1
AnimationMinimalPerf.default	438	455	0.96:1
TableMinimalPerf.default	433	454	0.95:1
PopupMinimalPerf.default	634	692	0.92:1

[msft-fluent-ui-bot]

🎉@fluentui/react-charting@v5.3.20 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release