From 4c9893c6194cdce6887169f503168a9612e6a92d Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Tue, 30 Apr 2024 14:56:22 +0530 Subject: [PATCH 01/16] Bug Fix 8856966, 8853539 --- .../HorizontalBarChart/HorizontalBarChart.base.tsx | 6 +++++- .../StackedBarChart/StackedBarChart.Basic.Example.tsx | 1 - .../StackedBarChart.CustomAccessibility.Example.tsx | 7 +------ 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx index e3e3e071a93ed..2b706ba7214e8 100644 --- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx +++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx @@ -422,10 +422,14 @@ export class HorizontalBarChartBase extends React.Component { const legend = point.xAxisCalloutData || point.legend; + const benchMark = point.data; const yValue = point.yAxisCalloutData || (point.horizontalBarChartdata ? `${point.horizontalBarChartdata.x}/${point.horizontalBarChartdata.y}` : 0); - return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`; + return ( + point.callOutAccessibilityData?.ariaLabel || + (legend ? `${legend}, ` : '') + `${yValue}.` + (benchMark ? 'with benchmark at ' + `${benchMark}, ` : '') + ); }; private _isChartEmpty(): boolean { diff --git a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx index 73a73367b0609..56e105e2800f5 100644 --- a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx @@ -39,7 +39,6 @@ export class StackedBarChartBasicExample extends React.Component<{}, {}> { data={data1} href={'https://developer.microsoft.com/en-us/'} ignoreFixStyle={true} - hideTooltip={true} /> ); diff --git a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.CustomAccessibility.Example.tsx index 49f4afbf4fcf6..382ac349408ce 100644 --- a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.CustomAccessibility.Example.tsx +++ b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.CustomAccessibility.Example.tsx @@ -35,12 +35,7 @@ export class StackedBarChartCustomAccessibilityExample extends React.Component<{ <>
- + ); } From 5cbd785393503976eb2563a087afb30eb999509a Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Thu, 2 May 2024 12:15:10 +0530 Subject: [PATCH 02/16] accessibility issue fix --- ...-c9360080-1be3-4b4a-a94d-755c32596050.json | 7 ++++++ .../VerticalStackedBarChart.base.tsx | 10 ++++---- .../StackedBarChart.Basic.Example.tsx | 25 ++++++++++++++++++- 3 files changed, 36 insertions(+), 6 deletions(-) create mode 100644 change/@fluentui-react-charting-c9360080-1be3-4b4a-a94d-755c32596050.json diff --git a/change/@fluentui-react-charting-c9360080-1be3-4b4a-a94d-755c32596050.json b/change/@fluentui-react-charting-c9360080-1be3-4b4a-a94d-755c32596050.json new file mode 100644 index 0000000000000..89caf81581b33 --- /dev/null +++ b/change/@fluentui-react-charting-c9360080-1be3-4b4a-a94d-755c32596050.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Accessibility issue fix", + "packageName": "@fluentui/react-charting", + "email": "132879294+v-baambati@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx index 61cb20df56ece..b3b366c9cafe6 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx @@ -1029,16 +1029,16 @@ export class VerticalStackedBarChartBase extends React.Component< return `${legend}, ${yValue}.`; }) .join(' '); - return ( - singleChartData.stackCallOutAccessibilityData?.ariaLabel || - `${xValue}. ${pointValues}` + (lineValues ? ` ${lineValues}` : '') - ); + + const ariaLabel = singleChartData.stackCallOutAccessibilityData?.ariaLabel; + return (ariaLabel ? ` ${ariaLabel}. ` : '') + `${xValue}. ${pointValues}` + (lineValues ? ` ${lineValues}` : ''); } /** if shouldFocusWholeStack is false */ const xValue = singleChartData.xAxisCalloutData || point.xAxisCalloutData || singleChartData.xAxisPoint; const legend = point.legend; const yValue = point.yAxisCalloutData || point.data; - return point.callOutAccessibilityData?.ariaLabel || `${xValue}. ${legend}, ${yValue}.`; + const ariaLabel = point.callOutAccessibilityData?.ariaLabel; + return (ariaLabel ? ` ${ariaLabel}. ` : '') + `${xValue}. ${legend}, ${yValue}.`; }; private _getDomainMargins = (containerWidth: number): IMargins => { diff --git a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx index 56e105e2800f5..6dd72f1e17d04 100644 --- a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx @@ -1,8 +1,19 @@ import * as React from 'react'; import { StackedBarChart, IChartProps, IChartDataPoint } from '@fluentui/react-charting'; import { DefaultPalette } from '@fluentui/react/lib/Styling'; +import { Checkbox } from '@fluentui/react'; -export class StackedBarChartBasicExample extends React.Component<{}, {}> { +interface IStackedBarState { + hideTooltip: boolean; +} + +export class StackedBarChartBasicExample extends React.Component<{}, IStackedBarState> { + constructor(props = {}) { + super(props); + this.state = { + hideTooltip: false, + }; + } public render(): JSX.Element { const points: IChartDataPoint[] = [ { @@ -27,11 +38,18 @@ export class StackedBarChartBasicExample extends React.Component<{}, {}> { return ( <> +
{ data={data1} href={'https://developer.microsoft.com/en-us/'} ignoreFixStyle={true} + hideTooltip={this.state.hideTooltip} /> ); } + + private _onHideTooltipChange = (ev: React.FormEvent, checked: boolean): void => { + this.setState({ hideTooltip: checked }); + }; } From b119145e3856e6d10f1db54ac6692f006747628e Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Thu, 2 May 2024 12:42:47 +0530 Subject: [PATCH 03/16] added hide tooltip feature in stacked bar chart example --- ...edBarChart.CustomAccessibility.Example.tsx | 38 +++++++++++++++++-- 1 file changed, 35 insertions(+), 3 deletions(-) diff --git a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.CustomAccessibility.Example.tsx index 382ac349408ce..24cb6603b56c0 100644 --- a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.CustomAccessibility.Example.tsx +++ b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.CustomAccessibility.Example.tsx @@ -1,8 +1,20 @@ import * as React from 'react'; import { StackedBarChart, IChartProps, IChartDataPoint } from '@fluentui/react-charting'; import { DefaultPalette } from '@fluentui/react/lib/Styling'; +import { Checkbox } from '@fluentui/react/lib/Checkbox'; + +interface IStackedBarState { + hideTooltip: boolean; +} + +export class StackedBarChartCustomAccessibilityExample extends React.Component<{}, IStackedBarState> { + constructor(props = {}) { + super(props); + this.state = { + hideTooltip: false, + }; + } -export class StackedBarChartCustomAccessibilityExample extends React.Component<{}, {}> { public render(): JSX.Element { const points: IChartDataPoint[] = [ { @@ -33,10 +45,30 @@ export class StackedBarChartCustomAccessibilityExample extends React.Component<{ return ( <> - + +
- + ); } + + private _onHideTooltipChange = (ev: React.FormEvent, checked: boolean): void => { + this.setState({ hideTooltip: checked }); + }; } From 9d4f8434acc961633e52e054e7867cb4b3e328f6 Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Thu, 2 May 2024 14:36:54 +0530 Subject: [PATCH 04/16] updated change file data --- ...i-react-charting-c9360080-1be3-4b4a-a94d-755c32596050.json | 2 +- .../VerticalStackedBarChart/VerticalStackedBarChart.base.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/change/@fluentui-react-charting-c9360080-1be3-4b4a-a94d-755c32596050.json b/change/@fluentui-react-charting-c9360080-1be3-4b4a-a94d-755c32596050.json index 89caf81581b33..d4e3b32aea116 100644 --- a/change/@fluentui-react-charting-c9360080-1be3-4b4a-a94d-755c32596050.json +++ b/change/@fluentui-react-charting-c9360080-1be3-4b4a-a94d-755c32596050.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "Accessibility issue fix", + "comment": "Accessibility issue fixes: Added bench mark data and tooltip value in aria label", "packageName": "@fluentui/react-charting", "email": "132879294+v-baambati@users.noreply.github.com", "dependentChangeType": "patch" diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx index b3b366c9cafe6..202593523c98d 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx @@ -1031,14 +1031,14 @@ export class VerticalStackedBarChartBase extends React.Component< .join(' '); const ariaLabel = singleChartData.stackCallOutAccessibilityData?.ariaLabel; - return (ariaLabel ? ` ${ariaLabel}. ` : '') + `${xValue}. ${pointValues}` + (lineValues ? ` ${lineValues}` : ''); + return (ariaLabel ? `${ariaLabel}. ` : '') + `${xValue}. ${pointValues}` + (lineValues ? ` ${lineValues}` : ''); } /** if shouldFocusWholeStack is false */ const xValue = singleChartData.xAxisCalloutData || point.xAxisCalloutData || singleChartData.xAxisPoint; const legend = point.legend; const yValue = point.yAxisCalloutData || point.data; const ariaLabel = point.callOutAccessibilityData?.ariaLabel; - return (ariaLabel ? ` ${ariaLabel}. ` : '') + `${xValue}. ${legend}, ${yValue}.`; + return (ariaLabel ? `${ariaLabel}. ` : '') + `${xValue}. ${legend}, ${yValue}.`; }; private _getDomainMargins = (containerWidth: number): IMargins => { From 8e86cb1d599027b7372472f649312bfb35252820 Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Thu, 2 May 2024 15:25:06 +0530 Subject: [PATCH 05/16] added hide tooltip feature in stacked bar chart example --- ...tui-react-charting-c9360080-1be3-4b4a-a94d-755c32596050.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/change/@fluentui-react-charting-c9360080-1be3-4b4a-a94d-755c32596050.json b/change/@fluentui-react-charting-c9360080-1be3-4b4a-a94d-755c32596050.json index d4e3b32aea116..bd98cf971e0de 100644 --- a/change/@fluentui-react-charting-c9360080-1be3-4b4a-a94d-755c32596050.json +++ b/change/@fluentui-react-charting-c9360080-1be3-4b4a-a94d-755c32596050.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "Accessibility issue fixes: Added bench mark data and tooltip value in aria label", + "comment": "Accessibility issue fixes: Added bench mark data and tooltip data to aria label in HorizontalBarChart and VerticalStackedBarChart", "packageName": "@fluentui/react-charting", "email": "132879294+v-baambati@users.noreply.github.com", "dependentChangeType": "patch" From ab34ea2a71263979da86cfb7be662b4a5f5fff4d Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Mon, 6 May 2024 13:38:23 +0530 Subject: [PATCH 06/16] removed base class changes --- .../VerticalStackedBarChart.base.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx index 7c4886bf1ae44..3d38a65c69e97 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx @@ -1048,16 +1048,16 @@ export class VerticalStackedBarChartBase extends React.Component< return `${legend}, ${yValue}.`; }) .join(' '); - - const ariaLabel = singleChartData.stackCallOutAccessibilityData?.ariaLabel; - return (ariaLabel ? `${ariaLabel}. ` : '') + `${xValue}. ${pointValues}` + (lineValues ? ` ${lineValues}` : ''); + return ( + singleChartData.stackCallOutAccessibilityData?.ariaLabel || + `${xValue}. ${pointValues}` + (lineValues ? ` ${lineValues}` : '') + ); } /** if shouldFocusWholeStack is false */ const xValue = singleChartData.xAxisCalloutData || point.xAxisCalloutData || singleChartData.xAxisPoint; const legend = point.legend; const yValue = point.yAxisCalloutData || point.data; - const ariaLabel = point.callOutAccessibilityData?.ariaLabel; - return (ariaLabel ? `${ariaLabel}. ` : '') + `${xValue}. ${legend}, ${yValue}.`; + return point.callOutAccessibilityData?.ariaLabel || `${xValue}. ${legend}, ${yValue}.`; }; private _getDomainMargins = (containerWidth: number): IMargins => { From ee99bbd8d6f32964cef755db34d48057ccde3c82 Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Mon, 6 May 2024 14:00:35 +0530 Subject: [PATCH 07/16] updated aria label value for custom accessibility --- ...edBarChart.CustomAccessibility.Example.tsx | 33 ++++++++++++------- 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx index 673c99392a063..043fc9b859a4c 100644 --- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx @@ -49,7 +49,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com color: DefaultPalette.blue, xAxisCalloutData: '2020/04/30', yAxisCalloutData: '61%', - callOutAccessibilityData: { ariaLabel: 'Bar series 1-1 of 4, 2020/04/30 40%' }, + callOutAccessibilityData: { ariaLabel: 'Bar series 1-1 of 4, 2020/04/30 Metadata1 61%' }, }, { legend: 'Metadata2', @@ -57,7 +57,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com color: DefaultPalette.blueMid, xAxisCalloutData: '2020/04/30', yAxisCalloutData: '8%', - callOutAccessibilityData: { ariaLabel: 'Bar series 1-2 of 4, 2020/04/30 5%' }, + callOutAccessibilityData: { ariaLabel: 'Bar series 1-2 of 4, 2020/04/30 Metadata2 8%' }, }, { legend: 'Metadata3', @@ -65,7 +65,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com color: DefaultPalette.blueLight, xAxisCalloutData: '2020/04/30', yAxisCalloutData: '31%', - callOutAccessibilityData: { ariaLabel: 'Bar series 1-3 of 4, 2020/04/30 20%' }, + callOutAccessibilityData: { ariaLabel: 'Bar series 1-3 of 4, 2020/04/30 Metadata3 31%' }, }, ]; @@ -76,7 +76,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com color: DefaultPalette.blue, xAxisCalloutData: '2020/04/30', yAxisCalloutData: '33%', - callOutAccessibilityData: { ariaLabel: 'Bar series 2-1 of 4, 2020/04/30 30%' }, + callOutAccessibilityData: { ariaLabel: 'Bar series 2-1 of 4, 2020/04/30 Metadata1 33%' }, }, { legend: 'Metadata2', @@ -84,7 +84,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com color: DefaultPalette.blueMid, xAxisCalloutData: '2020/04/30', yAxisCalloutData: '22%', - callOutAccessibilityData: { ariaLabel: 'Bar series 2-2 of 4, 2020/04/30 20%' }, + callOutAccessibilityData: { ariaLabel: 'Bar series 2-2 of 4, 2020/04/30 Metadata2 22%' }, }, { legend: 'Metadata3', @@ -92,7 +92,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com color: DefaultPalette.blueLight, xAxisCalloutData: '2020/04/30', yAxisCalloutData: '45%', - callOutAccessibilityData: { ariaLabel: 'Bar series 2-3 of 4, 2020/04/30 40%' }, + callOutAccessibilityData: { ariaLabel: 'Bar series 2-3 of 4, 2020/04/30 Metadata3 45%' }, }, ]; @@ -103,7 +103,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com color: DefaultPalette.blue, xAxisCalloutData: '2020/04/30', yAxisCalloutData: '43%', - callOutAccessibilityData: { ariaLabel: 'Bar series 3-1 of 4, 2020/04/30 44%' }, + callOutAccessibilityData: { ariaLabel: 'Bar series 3-1 of 4, 2020/04/30 Metadata1 43%' }, }, { legend: 'Metadata2', @@ -111,7 +111,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com color: DefaultPalette.blueMid, xAxisCalloutData: '2020/04/30', yAxisCalloutData: '27%', - callOutAccessibilityData: { ariaLabel: 'Bar series 3-2 of 4, 2020/04/30 28%' }, + callOutAccessibilityData: { ariaLabel: 'Bar series 3-2 of 4, 2020/04/30 Metadata2 27%' }, }, { legend: 'Metadata3', @@ -119,7 +119,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com color: DefaultPalette.blueLight, xAxisCalloutData: '2020/04/30', yAxisCalloutData: '30%', - callOutAccessibilityData: { ariaLabel: 'Bar series 3-3 of 4, 2020/04/30 30%' }, + callOutAccessibilityData: { ariaLabel: 'Bar series 3-3 of 4, 2020/04/30 Metadata3 30%' }, }, ]; @@ -134,7 +134,10 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com { y: 10, legend: 'Recommended Builds', color: DefaultPalette.redDark }, ], }), - stackCallOutAccessibilityData: { ariaLabel: 'Bar stack series 1 of 6' }, + stackCallOutAccessibilityData: { + ariaLabel: + 'Bar stack series 1 of 6, 0 MetaDate1 61% MetaData2 8% MetaDate3 31% Recommended Builds 10 Supported Builds 42', + }, }, { chartData: secondChartPoints, @@ -142,7 +145,10 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com ...(showLine && { lineData: [{ y: 33, legend: 'Supported Builds', color: DefaultPalette.magentaLight }], }), - stackCallOutAccessibilityData: { ariaLabel: 'Bar stack series 2 of 6' }, + stackCallOutAccessibilityData: { + ariaLabel: + 'Bar stack series 2 of 6, 0 MetaDate1 61% MetaData2 8% MetaDate3 31% Recommended Builds 10 Supported Builds 42', + }, }, { chartData: thirdChartPoints, @@ -153,7 +159,10 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com { y: 20, legend: 'Recommended Builds', color: DefaultPalette.redDark }, ], }), - stackCallOutAccessibilityData: { ariaLabel: 'Bar stack series 3 of 6' }, + stackCallOutAccessibilityData: { + ariaLabel: + 'Bar stack series 3 of 6, 40 MetaDate1 43% MetaData 27% MetaDate3 30% Recommended Builds 20 Supported Builds 60', + }, }, ]; From 6034e218db288221707984f7c94a3d4549d904b9 Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Mon, 6 May 2024 14:23:02 +0530 Subject: [PATCH 08/16] custom callout issue fix in donut chart --- .../DonutChart/DonutChart.CustomCallout.Example.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/react-examples/src/react-charting/DonutChart/DonutChart.CustomCallout.Example.tsx b/packages/react-examples/src/react-charting/DonutChart/DonutChart.CustomCallout.Example.tsx index 299c343afbcf7..57fab1161f09f 100644 --- a/packages/react-examples/src/react-charting/DonutChart/DonutChart.CustomCallout.Example.tsx +++ b/packages/react-examples/src/react-charting/DonutChart/DonutChart.CustomCallout.Example.tsx @@ -16,12 +16,19 @@ export class DonutChartCustomCalloutExample extends React.Component Date: Tue, 7 May 2024 11:37:04 +0530 Subject: [PATCH 09/16] resolved build errors --- ...rticalStackedBarChart.CustomAccessibility.Example.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx index 043fc9b859a4c..331bfab6e23da 100644 --- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx @@ -136,7 +136,8 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com }), stackCallOutAccessibilityData: { ariaLabel: - 'Bar stack series 1 of 6, 0 MetaDate1 61% MetaData2 8% MetaDate3 31% Recommended Builds 10 Supported Builds 42', + 'Bar stack series 1 of 6, 0 MetaDate1 61% MetaData2 8% MetaDate3 31% ' + + 'Recommended Builds 10 Supported Builds 42', }, }, { @@ -147,7 +148,8 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com }), stackCallOutAccessibilityData: { ariaLabel: - 'Bar stack series 2 of 6, 0 MetaDate1 61% MetaData2 8% MetaDate3 31% Recommended Builds 10 Supported Builds 42', + 'Bar stack series 2 of 6, 0 MetaDate1 61% MetaData2 8% MetaDate3 31% ' + + 'Recommended Builds 10 Supported Builds 42', }, }, { @@ -161,7 +163,8 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com }), stackCallOutAccessibilityData: { ariaLabel: - 'Bar stack series 3 of 6, 40 MetaDate1 43% MetaData 27% MetaDate3 30% Recommended Builds 20 Supported Builds 60', + 'Bar stack series 3 of 6, 40 MetaDate1 43% MetaData 27% MetaDate3 30% ' + + 'Recommended Builds 20 Supported Builds 60', }, }, ]; From 194eea9c573fd21c64aacb857cadce7b40649de6 Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Tue, 7 May 2024 16:02:25 +0530 Subject: [PATCH 10/16] resolved PR comments --- ...erticalStackedBarChart.CustomAccessibility.Example.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx index 331bfab6e23da..721df221482c6 100644 --- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx @@ -136,7 +136,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com }), stackCallOutAccessibilityData: { ariaLabel: - 'Bar stack series 1 of 6, 0 MetaDate1 61% MetaData2 8% MetaDate3 31% ' + + 'Bar stack series 1 of 3, 0 MetaDate1 61% MetaData2 8% MetaDate3 31% ' + 'Recommended Builds 10 Supported Builds 42', }, }, @@ -147,9 +147,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com lineData: [{ y: 33, legend: 'Supported Builds', color: DefaultPalette.magentaLight }], }), stackCallOutAccessibilityData: { - ariaLabel: - 'Bar stack series 2 of 6, 0 MetaDate1 61% MetaData2 8% MetaDate3 31% ' + - 'Recommended Builds 10 Supported Builds 42', + ariaLabel: 'Bar stack series 2 of 3, 20 MetaDate1 33% MetaData2 22% MetaDate3 45% ' + 'Supported Builds 33', }, }, { @@ -163,7 +161,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com }), stackCallOutAccessibilityData: { ariaLabel: - 'Bar stack series 3 of 6, 40 MetaDate1 43% MetaData 27% MetaDate3 30% ' + + 'Bar stack series 3 of 3, 40 MetaDate1 43% MetaData 27% MetaDate3 30% ' + 'Recommended Builds 20 Supported Builds 60', }, }, From 50b8bd3273e6ab95215ca503f047e4cb37ea6d19 Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Wed, 8 May 2024 09:35:43 +0530 Subject: [PATCH 11/16] enables focus for events in line chart with keyboard --- .../src/components/LineChart/eventAnnotation/LabelLink.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-charting/src/components/LineChart/eventAnnotation/LabelLink.tsx b/packages/react-charting/src/components/LineChart/eventAnnotation/LabelLink.tsx index 48808c25fc431..9f6a04faab4a0 100644 --- a/packages/react-charting/src/components/LineChart/eventAnnotation/LabelLink.tsx +++ b/packages/react-charting/src/components/LineChart/eventAnnotation/LabelLink.tsx @@ -71,7 +71,7 @@ export const LabelLink: React.FunctionComponent = props => { return ( <> - + Date: Wed, 8 May 2024 13:58:57 +0530 Subject: [PATCH 12/16] added chnage file --- ...eact-charting-d3660b0d-d2af-403a-bc19-a05978feeee9.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-charting-d3660b0d-d2af-403a-bc19-a05978feeee9.json diff --git a/change/@fluentui-react-charting-d3660b0d-d2af-403a-bc19-a05978feeee9.json b/change/@fluentui-react-charting-d3660b0d-d2af-403a-bc19-a05978feeee9.json new file mode 100644 index 0000000000000..488506b36fe69 --- /dev/null +++ b/change/@fluentui-react-charting-d3660b0d-d2af-403a-bc19-a05978feeee9.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Enabled focus for events in line chart with keyboard", + "packageName": "@fluentui/react-charting", + "email": "132879294+v-baambati@users.noreply.github.com", + "dependentChangeType": "patch" +} From c7b5b996f3a77fa3af4a254af565fd14b4b0fb5b Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Wed, 8 May 2024 20:09:50 +0530 Subject: [PATCH 13/16] resolved callout subtext accessibility issue --- .../src/components/CommonComponents/CartesianChart.styles.ts | 2 +- .../src/components/GaugeChart/GaugeChart.styles.ts | 2 +- .../src/utilities/ChartHoverCard/ChartHoverCard.styles.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.styles.ts b/packages/react-charting/src/components/CommonComponents/CartesianChart.styles.ts index 731d3818f5800..b2f76f6fb2d47 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.styles.ts +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.styles.ts @@ -128,7 +128,7 @@ export const getStyles = (props: ICartesianChartStyleProps): ICartesianChartStyl { ...fonts.small, lineHeight: '16px', - opacity: '0.8', + opacity: '0.85', color: theme.semanticColors.bodySubtext, }, ], diff --git a/packages/react-charting/src/components/GaugeChart/GaugeChart.styles.ts b/packages/react-charting/src/components/GaugeChart/GaugeChart.styles.ts index 06ff3cea68d8a..f59d7d96a7aad 100644 --- a/packages/react-charting/src/components/GaugeChart/GaugeChart.styles.ts +++ b/packages/react-charting/src/components/GaugeChart/GaugeChart.styles.ts @@ -76,7 +76,7 @@ export const getStyles = (props: IGaugeChartStyleProps): IGaugeChartStyles => { { ...theme.fonts.small, lineHeight: '16px', - opacity: '0.8', + opacity: '0.85', color: theme.semanticColors.bodySubtext, }, ], diff --git a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts index b503c7baa5422..6d119b163869d 100644 --- a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts +++ b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts @@ -22,7 +22,7 @@ export const getChartHoverCardStyles = (props: IChartHoverCardStyleProps): IChar theme.fonts.small, { lineHeight: '16px', - opacity: '0.8', + opacity: '0.85', color: theme.semanticColors.bodySubtext, }, ], From 65365057a4d509a3ae2aa01b7ffece70a023a89b Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Thu, 16 May 2024 12:49:24 +0530 Subject: [PATCH 14/16] updated snapshots for accessibility bug fix --- .../components/AreaChart/__snapshots__/AreaChart.test.tsx.snap | 2 +- .../DonutChart/__snapshots__/DonutChart.test.tsx.snap | 2 +- .../DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap | 2 +- .../GaugeChart/__snapshots__/GaugeChart.test.tsx.snap | 2 +- .../__snapshots__/GroupedVerticalBarChart.test.tsx.snap | 2 +- .../__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap | 2 +- .../__snapshots__/HorizontalBarChart.test.tsx.snap | 2 +- .../__snapshots__/MultiStackedBarChart.test.tsx.snap | 2 +- .../StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap index 2e5c2a9aadd46..84f7bfb3652d6 100644 --- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap +++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap @@ -480,7 +480,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1 font-size: 12px; font-weight: 400; line-height: 16px; - opacity: 0.8; + opacity: 0.85; } data-is-focusable={false} role="text" diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap index e01fd5ad1500e..95fc8516e288c 100644 --- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap +++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap @@ -230,7 +230,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover font-size: 12px; font-weight: 400; line-height: 16px; - opacity: 0.8; + opacity: 0.85; } > diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap index 333908a963314..c59d9a12bc160 100644 --- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap @@ -203,7 +203,7 @@ exports[`Donut chart interactions Should hide callout on mouse leave 1`] = ` font-size: 12px; font-weight: 400; line-height: 16px; - opacity: 0.8; + opacity: 0.85; } > diff --git a/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap b/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap index f893f8fbca31a..3a03ef8c802b4 100644 --- a/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap +++ b/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap @@ -606,7 +606,7 @@ exports[`GaugeChart interaction and accessibility tests should show a callout wh font-size: 12px; font-weight: 400; line-height: 16px; - opacity: 0.8; + opacity: 0.85; } data-is-focusable="false" role="text" diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap index c8595a5187b91..4e188595fd0c1 100644 --- a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap @@ -744,7 +744,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly font-size: 12px; font-weight: 400; line-height: 16px; - opacity: 0.8; + opacity: 0.85; } > diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap index 54effa57a7df0..c7c58da49605d 100644 --- a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap +++ b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap @@ -4420,7 +4420,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly font-size: 12px; font-weight: 400; line-height: 16px; - opacity: 0.8; + opacity: 0.85; } > diff --git a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap index ff53fbc0a1c01..4d04d5041cd17 100644 --- a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap @@ -438,7 +438,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo font-size: 12px; font-weight: 400; line-height: 16px; - opacity: 0.8; + opacity: 0.85; } > diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap index 617a28e654a1a..4218ec682ec85 100644 --- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap @@ -603,7 +603,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on font-size: 12px; font-weight: 400; line-height: 16px; - opacity: 0.8; + opacity: 0.85; } > diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap index ccd7a1a1f6ddc..68417c103c1ba 100644 --- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap +++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap @@ -304,7 +304,7 @@ exports[`StackedBarChart - mouse events Should render callout correctly on mouse font-size: 12px; font-weight: 400; line-height: 16px; - opacity: 0.8; + opacity: 0.85; } > From 33a8837561cdc0447324fdd9d0a817d4aca369e8 Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Fri, 17 May 2024 12:49:01 +0530 Subject: [PATCH 15/16] removed line chart event related changes --- .../src/components/LineChart/eventAnnotation/LabelLink.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-charting/src/components/LineChart/eventAnnotation/LabelLink.tsx b/packages/react-charting/src/components/LineChart/eventAnnotation/LabelLink.tsx index 9f6a04faab4a0..48808c25fc431 100644 --- a/packages/react-charting/src/components/LineChart/eventAnnotation/LabelLink.tsx +++ b/packages/react-charting/src/components/LineChart/eventAnnotation/LabelLink.tsx @@ -71,7 +71,7 @@ export const LabelLink: React.FunctionComponent = props => { return ( <> - + Date: Fri, 17 May 2024 12:52:52 +0530 Subject: [PATCH 16/16] updated change file desc --- ...tui-react-charting-d3660b0d-d2af-403a-bc19-a05978feeee9.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/change/@fluentui-react-charting-d3660b0d-d2af-403a-bc19-a05978feeee9.json b/change/@fluentui-react-charting-d3660b0d-d2af-403a-bc19-a05978feeee9.json index 488506b36fe69..e723bc0d0be7e 100644 --- a/change/@fluentui-react-charting-d3660b0d-d2af-403a-bc19-a05978feeee9.json +++ b/change/@fluentui-react-charting-d3660b0d-d2af-403a-bc19-a05978feeee9.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "Enabled focus for events in line chart with keyboard", + "comment": "Updated opacity value for cards title", "packageName": "@fluentui/react-charting", "email": "132879294+v-baambati@users.noreply.github.com", "dependentChangeType": "patch"