Skip to content

Commit

Permalink
Fix duplicate-id accessibility issue in line chart (microsoft#26486)
Browse files Browse the repository at this point in the history 
* fix duplicate-id accessibility issue in line chart

* add change file
  • Loading branch information
@krkshitij @Hotell
krkshitij authored and Hotell committed Feb 9, 2023
1 parent 0e093d8 commit 39b4978
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 53 deletions.
7 changes: 7 additions & 0 deletions change/@fluentui-react-charting-2f20f310-a538-4c9b-b93c-be8158fe1c65.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Fix duplicate-id accessibility issue in line chart",
"packageName": "@fluentui/react-charting",
"email": "[email protected]",
"dependentChangeType": "patch"
}
22 changes: 11 additions & 11 deletions packages/react-charting/src/components/LineChart/LineChart.base.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -523,11 +523,11 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
const verticaLineHeight = containerHeight - this.margins.bottom! + 6;
if (this._points[i].data.length === 1) {
const { x: x1, y: y1, xAxisCalloutData, xAxisCalloutAccessibilityData } = this._points[i].data[0];
const circleId = `${this._circleId}${i}`;
const circleId = `${this._circleId}_${i}`;
pointsForLine.push(
<circle
id={`${this._circleId}${i}`}
key={`${this._circleId}${i}`}
id={circleId}
key={circleId}
r={activePoint === circleId ? 5.5 : 3.5}
cx={this._xAxisScale(x1)}
cy={this._yAxisScale(y1)}
Expand Down Expand Up @@ -569,8 +569,8 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
.y((d: any) => this._yAxisScale(d[1]))
.curve(d3curveLinear);

const lineId = `${this._lineId}${i}`;
const borderId = `${this._borderId}${i}`;
const lineId = `${this._lineId}_${i}`;
const borderId = `${this._borderId}_${i}`;
const strokeWidth =
this._points[i].lineOptions?.strokeWidth || this.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;

Expand Down Expand Up @@ -664,9 +664,9 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
const isInGap = gapResult.isInGap;
gapIndex = gapResult.gapIndex;

const lineId = `${this._lineId}${i}${j}`;
const borderId = `${this._borderId}${i}${j}`;
const circleId = `${this._circleId}${i}${j}`;
const lineId = `${this._lineId}_${i}_${j}`;
const borderId = `${this._borderId}_${i}_${j}`;
const circleId = `${this._circleId}_${i}_${j}`;
const { x: x1, y: y1, xAxisCalloutData, xAxisCalloutAccessibilityData } = this._points[i].data[j - 1];
const { x: x2, y: y2 } = this._points[i].data[j];
let path = this._getPath(
Expand Down Expand Up @@ -916,7 +916,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
: 0.1;
colorFillBars.push(
<rect
fill={colorFillBar.applyPattern ? `url(#${this._colorFillBarPatternId}${i})` : colorFillBar.color}
fill={colorFillBar.applyPattern ? `url(#${this._colorFillBarPatternId}_${i})` : colorFillBar.color}
fillOpacity={opacity}
x={this._xAxisScale(startX)}
y={this._yAxisScale(yMinMaxValues.endValue) - FILL_Y_PADDING}
Expand All @@ -938,10 +938,10 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
const stripePath = 'M-4,4 l8,-8 M0,16 l16,-16 M12,20 l8,-8';
return (
<pattern
id={`${this._colorFillBarPatternId}${id}`}
id={`${this._colorFillBarPatternId}_${id}`}
width={16}
height={16}
key={`${this._colorFillBarPatternId}${id}`}
key={`${this._colorFillBarPatternId}_${id}`}
patternUnits={'userSpaceOnUse'}
>
<path d={stripePath} stroke={color} strokeWidth={1.25} />
Expand Down
84 changes: 42 additions & 42 deletions packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,8 +111,8 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
/>
<g>
<line
id="lineID101"
key="lineID101"
id="lineID1_0_1"
key="lineID1_0_1"
onClick={[Function]}
onMouseMove={[Function]}
onMouseOut={[Function]}
Expand All @@ -134,8 +134,8 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
"
data-is-focusable={true}
fill="#ffffff"
id="circle001"
key="circle001"
id="circle0_0_1"
key="circle0_0_1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand All @@ -154,8 +154,8 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
"
data-is-focusable={true}
fill="red"
id="circle0011L"
key="circle0011L"
id="circle0_0_11L"
key="circle0_0_11L"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -364,7 +364,7 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
}
data-is-focusable={true}
hidden={false}
id="toolTipcircle001"
id="toolTipcircle0_0_1"
style={
Object {
"filter": "opacity(0)",
Expand Down Expand Up @@ -630,8 +630,8 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
/>
<g>
<line
id="lineID101"
key="lineID101"
id="lineID1_0_1"
key="lineID1_0_1"
onClick={[Function]}
onMouseMove={[Function]}
onMouseOut={[Function]}
Expand All @@ -653,8 +653,8 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
"
data-is-focusable={true}
fill="#ffffff"
id="circle001"
key="circle001"
id="circle0_0_1"
key="circle0_0_1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand All @@ -673,8 +673,8 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
"
data-is-focusable={true}
fill="red"
id="circle0011L"
key="circle0011L"
id="circle0_0_11L"
key="circle0_0_11L"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -883,7 +883,7 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
}
data-is-focusable={true}
hidden={false}
id="toolTipcircle001"
id="toolTipcircle0_0_1"
style={
Object {
"filter": "opacity(0)",
Expand Down Expand Up @@ -1047,8 +1047,8 @@ exports[`LineChart - mouse events Should render customized callout per stack on
/>
<g>
<line
id="lineID101"
key="lineID101"
id="lineID1_0_1"
key="lineID1_0_1"
onClick={[Function]}
onMouseMove={[Function]}
onMouseOut={[Function]}
Expand All @@ -1070,8 +1070,8 @@ exports[`LineChart - mouse events Should render customized callout per stack on
"
data-is-focusable={true}
fill="#ffffff"
id="circle001"
key="circle001"
id="circle0_0_1"
key="circle0_0_1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand All @@ -1090,8 +1090,8 @@ exports[`LineChart - mouse events Should render customized callout per stack on
"
data-is-focusable={true}
fill="red"
id="circle0011L"
key="circle0011L"
id="circle0_0_11L"
key="circle0_0_11L"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -1300,7 +1300,7 @@ exports[`LineChart - mouse events Should render customized callout per stack on
}
data-is-focusable={true}
hidden={false}
id="toolTipcircle001"
id="toolTipcircle0_0_1"
style={
Object {
"filter": "opacity(0)",
Expand Down Expand Up @@ -1464,7 +1464,7 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
/>
<g>
<line
id="lineID101"
id="lineID1_0_1"
onClick={[Function]}
onMouseMove={[Function]}
onMouseOut={[Function]}
Expand All @@ -1486,7 +1486,7 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
"
data-is-focusable={true}
fill="red"
id="circle001"
id="circle0_0_1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand All @@ -1505,7 +1505,7 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
"
data-is-focusable={true}
fill="red"
id="circle0011L"
id="circle0_0_11L"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -1796,7 +1796,7 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
/>
<g>
<line
id="lineID3301"
id="lineID33_0_1"
onClick={[Function]}
onMouseMove={[Function]}
onMouseOut={[Function]}
Expand All @@ -1818,7 +1818,7 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
"
data-is-focusable={true}
fill="red"
id="circle3201"
id="circle32_0_1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand All @@ -1837,7 +1837,7 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
"
data-is-focusable={true}
fill="red"
id="circle32011L"
id="circle32_0_11L"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -2108,7 +2108,7 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
/>
<g>
<line
id="lineID1201"
id="lineID12_0_1"
onClick={[Function]}
onMouseMove={[Function]}
onMouseOut={[Function]}
Expand All @@ -2130,7 +2130,7 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
"
data-is-focusable={true}
fill="red"
id="circle1101"
id="circle11_0_1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand All @@ -2149,7 +2149,7 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
"
data-is-focusable={true}
fill="red"
id="circle11011L"
id="circle11_0_11L"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -2281,7 +2281,7 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
/>
<g>
<line
id="lineID2201"
id="lineID22_0_1"
onClick={[Function]}
onMouseMove={[Function]}
onMouseOut={[Function]}
Expand All @@ -2303,7 +2303,7 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
"
data-is-focusable={true}
fill="red"
id="circle2101"
id="circle21_0_1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand All @@ -2322,7 +2322,7 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
"
data-is-focusable={true}
fill="red"
id="circle21011L"
id="circle21_0_11L"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -2613,7 +2613,7 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
/>
<g>
<line
id="lineID4401"
id="lineID44_0_1"
onClick={[Function]}
onMouseMove={[Function]}
onMouseOut={[Function]}
Expand All @@ -2635,7 +2635,7 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
"
data-is-focusable={true}
fill="red"
id="circle4301"
id="circle43_0_1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand All @@ -2654,7 +2654,7 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
"
data-is-focusable={true}
fill="red"
id="circle43011L"
id="circle43_0_11L"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -2945,7 +2945,7 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
/>
<g>
<line
id="lineID5501"
id="lineID55_0_1"
onClick={[Function]}
onMouseMove={[Function]}
onMouseOut={[Function]}
Expand All @@ -2967,7 +2967,7 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
"
data-is-focusable={true}
fill="red"
id="circle5401"
id="circle54_0_1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand All @@ -2986,7 +2986,7 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
"
data-is-focusable={true}
fill="red"
id="circle54011L"
id="circle54_0_11L"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -3277,7 +3277,7 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
/>
<g>
<line
id="lineID6601"
id="lineID66_0_1"
onClick={[Function]}
onMouseMove={[Function]}
onMouseOut={[Function]}
Expand All @@ -3299,7 +3299,7 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
"
data-is-focusable={true}
fill="red"
id="circle6501"
id="circle65_0_1"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand All @@ -3318,7 +3318,7 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
"
data-is-focusable={true}
fill="red"
id="circle65011L"
id="circle65_0_11L"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
Expand Down

0 comments on commit 39b4978

Please sign in to comment.