Skip to content

Commit f38d165

Browse files
johnyesitjohnyesit
authored
Add aria-label attribute to fix the svg-img-alt-related 508 issues (cBioPortal#5203)
1 parent d689cfa commit f38d165

File tree

3 files changed

+81
-47
lines changed

3 files changed

+81
-47
lines changed

‎src/pages/groupComparison/OverlapVenn.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,7 @@ export default class Venn extends React.Component<IVennProps, {}> {
139139
>
140140
<svg
141141
id={this.props.svgId || ''}
142+
aria-label={this.props.svgId || 'Overlap Venn'}
142143
xmlns="http://www.w3.org/2000/svg"
143144
width={this.chartWidth}
144145
height={this.chartHeight}

‎src/pages/resultsView/cancerSummary/CancerSummaryChart.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -787,6 +787,7 @@ export class CancerSummaryChart extends React.Component<
787787
height: this.svgHeight,
788788
pointerEvents: 'all',
789789
}}
790+
aria-label="Cancer Summary Chart"
790791
height={this.svgHeight}
791792
width={this.svgWidth}
792793
role="img"

‎src/shared/components/plots/BoxScatterPlot.tsx‎

Lines changed: 79 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,12 @@ export interface IBoxScatterPlotProps<D extends IBaseBoxScatterPlotPoint> {
7575
highlight?: (d: D) => boolean;
7676
size?:
7777
| number
78-
| ((d: D, active: boolean, isHighlighted?: boolean, isHovered?: boolean) => number);
78+
| ((
79+
d: D,
80+
active: boolean,
81+
isHighlighted?: boolean,
82+
isHovered?: boolean
83+
) => number);
7984
fill?: string | ((d: D) => string);
8085
stroke?: string | ((d: D) => string);
8186
fillOpacity?: number | ((d: D) => number);
@@ -192,7 +197,7 @@ export default class BoxScatterPlot<
192197
super(props);
193198
makeObservable(this);
194199
}
195-
200+
196201
@bind
197202
private containerRef(container: HTMLDivElement) {
198203
this.container = container;
@@ -604,23 +609,23 @@ export default class BoxScatterPlot<
604609
return d.y + jitter;
605610
}
606611
}
607-
612+
608613
@action.bound
609-
setSamplesInLineHover(data: any, hovered: boolean) {
614+
setSamplesInLineHover(data: any, hovered: boolean) {
610615
if (hovered) {
611616
this.samplesInLineHover = data.map(
612-
(dataEntries: any) => dataEntries.sampleId
617+
(dataEntries: any) => dataEntries.sampleId
613618
);
614619
} else {
615-
this.samplesInLineHover = [];
620+
this.samplesInLineHover = [];
616621
}
617622
console.log(this.samplesInLineHover);
618623
}
619624

620625
@computed get lineHovered() {
621-
const lineSamples = this.samplesInLineHover;
622-
return (d: any) => {
623-
return _.some(lineSamples, sampleId => sampleId === d.sampleId);
626+
const lineSamples = this.samplesInLineHover;
627+
return (d: any) => {
628+
return _.some(lineSamples, sampleId => sampleId === d.sampleId);
624629
};
625630
}
626631

@@ -897,17 +902,17 @@ export default class BoxScatterPlot<
897902
@computed get patientLinePlotData() {
898903
const patientDataForLinePlot: { [patientId: string]: any[] } = {};
899904

900-
if (this.props.renderLinePlot && this.props.samplesForPatients) {
901-
this.props.samplesForPatients.forEach(patientObject => {
902-
Object.keys(patientObject).forEach(patientId => {
903-
const sampleIds: string[] = patientObject[patientId];
904-
patientDataForLinePlot[patientId] = [];
905-
906-
this.scatterPlotData.forEach(dataWithAppearance => {
907-
dataWithAppearance.data.forEach(sampleArray => {
908-
if (sampleIds.includes(sampleArray.sampleId)) {
909-
patientDataForLinePlot[patientId].push(
910-
sampleArray
905+
if (this.props.renderLinePlot && this.props.samplesForPatients) {
906+
this.props.samplesForPatients.forEach(patientObject => {
907+
Object.keys(patientObject).forEach(patientId => {
908+
const sampleIds: string[] = patientObject[patientId];
909+
patientDataForLinePlot[patientId] = [];
910+
911+
this.scatterPlotData.forEach(dataWithAppearance => {
912+
dataWithAppearance.data.forEach(sampleArray => {
913+
if (sampleIds.includes(sampleArray.sampleId)) {
914+
patientDataForLinePlot[patientId].push(
915+
sampleArray
911916
);
912917
}
913918
});
@@ -959,6 +964,7 @@ export default class BoxScatterPlot<
959964
>
960965
<svg
961966
id={this.props.svgId || ''}
967+
aria-label={this.props.svgId || 'Box Scatter Plot'}
962968
style={{
963969
width: this.svgWidth,
964970
height: this.svgHeight,
@@ -1015,11 +1021,16 @@ export default class BoxScatterPlot<
10151021
/>
10161022
{this.props.renderLinePlot &&
10171023
this.initLineVisibility &&
1018-
Object.keys(this.patientLinePlotData!).map(patientId =>
1024+
Object.keys(this.patientLinePlotData!).map(
1025+
patientId =>
10191026
this.visibleLines.get(patientId) && (
10201027
<VictoryLine
10211028
key={patientId}
1022-
data={this.patientLinePlotData![patientId]}
1029+
data={
1030+
this.patientLinePlotData![
1031+
patientId
1032+
]
1033+
}
10231034
x={this.scatterPlotX}
10241035
y={this.scatterPlotY}
10251036
style={{
@@ -1035,44 +1046,65 @@ export default class BoxScatterPlot<
10351046
target: 'data',
10361047
eventHandlers: {
10371048
onMouseOver: () => {
1038-
return [{
1039-
target: 'data',
1040-
mutation: () => {
1041-
this.setSamplesInLineHover(this.patientLinePlotData![patientId], true);
1042-
return {
1043-
style: {
1044-
stroke: 'black',
1045-
strokeWidth: 3,
1046-
},
1047-
};
1049+
return [
1050+
{
1051+
target:
1052+
'data',
1053+
mutation: () => {
1054+
this.setSamplesInLineHover(
1055+
this
1056+
.patientLinePlotData![
1057+
patientId
1058+
],
1059+
true
1060+
);
1061+
return {
1062+
style: {
1063+
stroke:
1064+
'black',
1065+
strokeWidth: 3,
1066+
},
1067+
};
1068+
},
10481069
},
1049-
}];
1070+
];
10501071
},
10511072
onMouseOut: () => {
1052-
return [{
1053-
target: 'data',
1054-
mutation: () => {
1055-
this.setSamplesInLineHover(this.patientLinePlotData![patientId], false);
1056-
return {
1057-
style: {
1058-
stroke: 'grey',
1059-
strokeWidth: 2,
1060-
},
1061-
};
1073+
return [
1074+
{
1075+
target:
1076+
'data',
1077+
mutation: () => {
1078+
this.setSamplesInLineHover(
1079+
this
1080+
.patientLinePlotData![
1081+
patientId
1082+
],
1083+
false
1084+
);
1085+
return {
1086+
style: {
1087+
stroke:
1088+
'grey',
1089+
strokeWidth: 2,
1090+
},
1091+
};
1092+
},
10621093
},
1063-
}];
1094+
];
10641095
},
10651096
onClick: () => {
1066-
this.toggleLineVisibility(patientId);
1097+
this.toggleLineVisibility(
1098+
patientId
1099+
);
10671100
return [];
10681101
},
10691102
},
10701103
},
10711104
]}
10721105
/>
10731106
)
1074-
)
1075-
}
1107+
)}
10761108
{this.scatterPlotData.map(dataWithAppearance => (
10771109
<VictoryScatter
10781110
key={`${dataWithAppearance.fill},${dataWithAppearance.stroke},${dataWithAppearance.strokeWidth},${dataWithAppearance.strokeOpacity},${dataWithAppearance.fillOpacity},${dataWithAppearance.symbol}`}

0 commit comments

Comments
 (0)