From a8a325cc96f16035c168685991d61cd86e660eaf Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Wed, 14 Jun 2023 14:00:17 +0530 Subject: [PATCH 1/2] disable focus on non-interactive elements --- .../HorizontalBarChart.base.tsx | 8 +- .../MultiStackedBarChart.base.tsx | 6 +- .../StackedBarChart/StackedBarChart.base.tsx | 6 +- .../MultiStackedBarChart.test.tsx.snap | 38 +++---- .../StackedBarChart.test.tsx.snap | 24 ++--- .../components/TreeChart/TreeChart.base.tsx | 2 - .../__snapshots__/TreeChart.test.tsx.snap | 100 ------------------ 7 files changed, 40 insertions(+), 144 deletions(-) diff --git a/packages/charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx b/packages/charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx index 53a719402396a..3a7c4e2ef8024 100644 --- a/packages/charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx +++ b/packages/charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx @@ -94,7 +94,7 @@ export class HorizontalBarChartBase extends React.Component {points!.chartTitle} @@ -220,9 +220,7 @@ export class HorizontalBarChartBase extends React.Component { return this.props.barChartCustomData ? ( -
- {this.props.barChartCustomData(data)} -
+
{this.props.barChartCustomData(data)}
) : ( this._getDefaultTextData(data) ); @@ -235,7 +233,7 @@ export class HorizontalBarChartBase extends React.Component
{data!.chartTitle && ( -
+
{data!.chartTitle}
)} {showRatio && ( -
+
{getChartData()} {!hideDenominator && /{convertToLocaleString(total, culture)}}
)} {showNumber && ( -
+
{getChartData()}
)} diff --git a/packages/charting/src/components/StackedBarChart/StackedBarChart.base.tsx b/packages/charting/src/components/StackedBarChart/StackedBarChart.base.tsx index b14de3b0da231..747b5bb9d469d 100644 --- a/packages/charting/src/components/StackedBarChart/StackedBarChart.base.tsx +++ b/packages/charting/src/components/StackedBarChart/StackedBarChart.base.tsx @@ -107,12 +107,12 @@ export class StackedBarChartBase extends React.Component
{data!.chartTitle && ( -
+
{data!.chartTitle}
)} {showRatio && ( -
+
{getChartData()} {!this.props.hideDenominator && ( @@ -122,7 +122,7 @@ export class StackedBarChartBase extends React.Component )} {showNumber && ( -
+
{getChartData()}
)} diff --git a/packages/charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap b/packages/charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap index 71be591343bc9..46b2701da5c80 100644 --- a/packages/charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap +++ b/packages/charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap @@ -53,7 +53,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr } >
@@ -61,7 +61,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
@@ -197,7 +197,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr } >
@@ -205,7 +205,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
@@ -441,7 +441,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly } >
@@ -449,7 +449,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
@@ -581,7 +581,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly } >
@@ -589,7 +589,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
@@ -821,7 +821,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`] } >
@@ -829,7 +829,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
@@ -965,7 +965,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`] } >
@@ -973,7 +973,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
@@ -1131,7 +1131,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] = } >
@@ -1263,7 +1263,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] = } >
@@ -1271,7 +1271,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
@@ -1686,7 +1686,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`] } >
@@ -1694,7 +1694,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
@@ -1830,7 +1830,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`] } >
@@ -1838,7 +1838,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
diff --git a/packages/charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap b/packages/charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap index 6c95a7722aec3..7a01b049c8869 100644 --- a/packages/charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap +++ b/packages/charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap @@ -42,7 +42,7 @@ exports[`StackedBarChart snapShot testing renders StackedBarChart correctly 1`] } >
@@ -50,7 +50,7 @@ exports[`StackedBarChart snapShot testing renders StackedBarChart correctly 1`]
@@ -226,7 +226,7 @@ exports[`StackedBarChart snapShot testing renders enabledLegendsWrapLines correc
@@ -402,7 +402,7 @@ exports[`StackedBarChart snapShot testing renders hideDenominator correctly 1`]
@@ -564,7 +564,7 @@ exports[`StackedBarChart snapShot testing renders hideLegend correctly 1`] = `
@@ -878,7 +878,7 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = ` } >
@@ -886,7 +886,7 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = `
diff --git a/packages/charting/src/components/TreeChart/TreeChart.base.tsx b/packages/charting/src/components/TreeChart/TreeChart.base.tsx index 6f48ce53b6bf4..399906ccf2f46 100644 --- a/packages/charting/src/components/TreeChart/TreeChart.base.tsx +++ b/packages/charting/src/components/TreeChart/TreeChart.base.tsx @@ -95,9 +95,7 @@ class StandardTree { height={rectangleHeight} x={xCoordinate} y={yCoordinate} - tabIndex={0} role={'text'} - data-is-focusable={true} aria-label={ariaLabel} className={this.styleClassNames.rectNode} stroke={fillColor} diff --git a/packages/charting/src/components/TreeChart/__snapshots__/TreeChart.test.tsx.snap b/packages/charting/src/components/TreeChart/__snapshots__/TreeChart.test.tsx.snap index d61c93dadc05e..13aedc15389ac 100644 --- a/packages/charting/src/components/TreeChart/__snapshots__/TreeChart.test.tsx.snap +++ b/packages/charting/src/components/TreeChart/__snapshots__/TreeChart.test.tsx.snap @@ -47,11 +47,9 @@ subText subtext Root Node" rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#0099BC" - tabIndex={0} width={225} x={602.5} y={10} @@ -106,11 +104,9 @@ subText subtext Parent info parentId: 0 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#4F6BED" - tabIndex={0} width={225} x={208.75} y={130} @@ -165,11 +161,9 @@ subText sub Parent info parentId: 1 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#4F6BED" - tabIndex={0} width={102.5} x={208.75} y={260} @@ -224,11 +218,9 @@ subText undefined Parent info parentId: 1 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#4F6BED" - tabIndex={0} width={102.5} x={331.25} y={260} @@ -267,11 +259,9 @@ subText The subtext is as follows: sub Parent info parentId: 1 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#4F6BED" - tabIndex={0} width={102.5} x={208.75} y={345.2173913043478} @@ -326,11 +316,9 @@ subText sub Parent info parentId: 1 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#4F6BED" - tabIndex={0} width={102.5} x={331.25} y={345.2173913043478} @@ -385,11 +373,9 @@ subText undefined Parent info parentId: 0 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#881798" - tabIndex={0} width={225} x={471.25} y={130} @@ -428,11 +414,9 @@ subText sub Parent info parentId: 6 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#881798" - tabIndex={0} width={102.5} x={471.25} y={260} @@ -487,11 +471,9 @@ subText sub Parent info parentId: 6 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#881798" - tabIndex={0} width={102.5} x={593.75} y={260} @@ -546,11 +528,9 @@ subText The subtext is as follows: subtext Parent info parentId: 0 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#AE8C00" - tabIndex={0} width={225} x={733.75} y={130} @@ -605,11 +585,9 @@ subText sub Parent info parentId: 9 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#AE8C00" - tabIndex={0} width={102.5} x={733.75} y={260} @@ -664,11 +642,9 @@ subText sub Parent info parentId: 9 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#AE8C00" - tabIndex={0} width={102.5} x={856.25} y={260} @@ -723,11 +699,9 @@ subText sub Parent info parentId: 9 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#AE8C00" - tabIndex={0} width={102.5} x={733.75} y={345.2173913043478} @@ -782,11 +756,9 @@ subText subtext Parent info parentId: 0 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#FF00FF" - tabIndex={0} width={225} x={996.25} y={130} @@ -841,11 +813,9 @@ subText sub Parent info parentId: 13 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#FF00FF" - tabIndex={0} width={225} x={996.25} y={260} @@ -995,11 +965,9 @@ subText subtext Root Node" rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#0099BC" - tabIndex={0} width={225} x={602.5} y={10} @@ -1054,11 +1022,9 @@ subText subtext Parent info parentId: 0 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#4F6BED" - tabIndex={0} width={225} x={208.75} y={130} @@ -1113,11 +1079,9 @@ subText sub Parent info parentId: 1 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#4F6BED" - tabIndex={0} width={225} x={208.75} y={260} @@ -1172,11 +1136,9 @@ subText undefined Parent info parentId: 1 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#4F6BED" - tabIndex={0} width={225} x={208.75} y={345.2173913043478} @@ -1215,11 +1177,9 @@ subText The subtext is as follows: sub Parent info parentId: 1 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#4F6BED" - tabIndex={0} width={225} x={208.75} y={430.4347826086956} @@ -1274,11 +1234,9 @@ subText sub Parent info parentId: 1 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#4F6BED" - tabIndex={0} width={225} x={208.75} y={515.6521739130435} @@ -1333,11 +1291,9 @@ subText undefined Parent info parentId: 0 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#881798" - tabIndex={0} width={225} x={471.25} y={130} @@ -1376,11 +1332,9 @@ subText sub Parent info parentId: 6 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#881798" - tabIndex={0} width={225} x={471.25} y={260} @@ -1435,11 +1389,9 @@ subText sub Parent info parentId: 6 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#881798" - tabIndex={0} width={225} x={471.25} y={345.2173913043478} @@ -1494,11 +1446,9 @@ subText The subtext is as follows: subtext Parent info parentId: 0 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#AE8C00" - tabIndex={0} width={225} x={733.75} y={130} @@ -1553,11 +1503,9 @@ subText sub Parent info parentId: 9 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#AE8C00" - tabIndex={0} width={225} x={733.75} y={260} @@ -1612,11 +1560,9 @@ subText sub Parent info parentId: 9 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#AE8C00" - tabIndex={0} width={225} x={733.75} y={345.2173913043478} @@ -1671,11 +1617,9 @@ subText sub Parent info parentId: 9 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#AE8C00" - tabIndex={0} width={225} x={733.75} y={430.4347826086956} @@ -1730,11 +1674,9 @@ subText subtext Parent info parentId: 0 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#FF00FF" - tabIndex={0} width={225} x={996.25} y={130} @@ -1789,11 +1731,9 @@ subText sub Parent info parentId: 13 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#FF00FF" - tabIndex={0} width={225} x={996.25} y={260} @@ -1943,11 +1883,9 @@ subText subtext Root Node" rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#0099BC" - tabIndex={0} width={225} x={602.5} y={10} @@ -2002,11 +1940,9 @@ subText subtext Parent info parentId: 0 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#4F6BED" - tabIndex={0} width={225} x={208.75} y={130} @@ -2061,11 +1997,9 @@ subText sub Parent info parentId: 1 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#4F6BED" - tabIndex={0} width={102.5} x={208.75} y={260} @@ -2120,11 +2054,9 @@ subText undefined Parent info parentId: 1 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#4F6BED" - tabIndex={0} width={102.5} x={331.25} y={260} @@ -2163,11 +2095,9 @@ subText The subtext is as follows: sub Parent info parentId: 1 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#4F6BED" - tabIndex={0} width={102.5} x={208.75} y={345.2173913043478} @@ -2222,11 +2152,9 @@ subText sub Parent info parentId: 1 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#4F6BED" - tabIndex={0} width={102.5} x={331.25} y={345.2173913043478} @@ -2281,11 +2209,9 @@ subText undefined Parent info parentId: 0 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#881798" - tabIndex={0} width={225} x={471.25} y={130} @@ -2324,11 +2250,9 @@ subText sub Parent info parentId: 6 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#881798" - tabIndex={0} width={225} x={471.25} y={260} @@ -2383,11 +2307,9 @@ subText sub Parent info parentId: 6 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#881798" - tabIndex={0} width={225} x={471.25} y={345.2173913043478} @@ -2442,11 +2364,9 @@ subText The subtext is as follows: subtext Parent info parentId: 0 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#AE8C00" - tabIndex={0} width={225} x={733.75} y={130} @@ -2501,11 +2421,9 @@ subText sub Parent info parentId: 9 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#AE8C00" - tabIndex={0} width={102.5} x={733.75} y={260} @@ -2560,11 +2478,9 @@ subText sub Parent info parentId: 9 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#AE8C00" - tabIndex={0} width={102.5} x={856.25} y={260} @@ -2619,11 +2535,9 @@ subText sub Parent info parentId: 9 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#AE8C00" - tabIndex={0} width={102.5} x={733.75} y={345.2173913043478} @@ -2678,11 +2592,9 @@ subText subtext Parent info parentId: 0 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#FF00FF" - tabIndex={0} width={225} x={996.25} y={130} @@ -2737,11 +2649,9 @@ subText sub Parent info parentId: 13 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#FF00FF" - tabIndex={0} width={225} x={996.25} y={260} @@ -2891,11 +2801,9 @@ subText subtext Root Node" rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#0099BC" - tabIndex={0} width={225} x={602.5} y={10} @@ -2950,11 +2858,9 @@ subText Subtext val is subtext Parent info parentId: 0 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#4F6BED" - tabIndex={0} width={225} x={208.75} y={130} @@ -3009,11 +2915,9 @@ subText Subtext val is subtext Parent info parentId: 0 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#881798" - tabIndex={0} width={225} x={471.25} y={130} @@ -3068,11 +2972,9 @@ subText Subtext val is subtext Parent info parentId: 0 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#AE8C00" - tabIndex={0} width={225} x={733.75} y={130} @@ -3127,11 +3029,9 @@ subText Subtext val is subtext Parent info parentId: 0 rx: 2px; stroke-width: 2px; } - data-is-focusable={true} height={65.21739130434783} role="text" stroke="#FF00FF" - tabIndex={0} width={225} x={996.25} y={130} From 6429e9bd526410e1717fe0e97a6cd0132f30c2ab Mon Sep 17 00:00:00 2001 From: Kumar Kshitij Date: Wed, 14 Jun 2023 14:01:32 +0530 Subject: [PATCH 2/2] Change files --- ...bric-charting-8aaeb60e-7c1d-4c6f-841e-49cadfe4b3a6.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@uifabric-charting-8aaeb60e-7c1d-4c6f-841e-49cadfe4b3a6.json diff --git a/change/@uifabric-charting-8aaeb60e-7c1d-4c6f-841e-49cadfe4b3a6.json b/change/@uifabric-charting-8aaeb60e-7c1d-4c6f-841e-49cadfe4b3a6.json new file mode 100644 index 0000000000000..c762bfdd6b0a4 --- /dev/null +++ b/change/@uifabric-charting-8aaeb60e-7c1d-4c6f-841e-49cadfe4b3a6.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Disable focus on non-interactive elements", + "packageName": "@uifabric/charting", + "email": "kumarkshitij@microsoft.com", + "dependentChangeType": "patch" +}