Merge pull request #477 from adobe/nli1/chart-aria-label-fix

Fix accessibility issue: <svg> elements with an img role must have an alternative text
adobe · Dec 11, 2024 · b690296 · b690296
2 parents c989800 + 0ec4604
commit b690296
Show file tree

Hide file tree

Showing 18 changed files with 35 additions and 0 deletions.
diff --git a/src/specBuilder/area/areaSpecBuilder.test.ts b/src/specBuilder/area/areaSpecBuilder.test.ts
@@ -118,6 +118,7 @@ const defaultSpec = initializeSpec({
 					interactive: false,
 					from: { data: 'area0_facet' },
 					name: 'area0',
+					description: 'area0',
 					type: 'area',
 				},
 			],

diff --git a/src/specBuilder/area/areaUtils.test.ts b/src/specBuilder/area/areaUtils.test.ts
@@ -37,6 +37,7 @@ describe('getAreaMark', () => {
 			})
 		).toStrictEqual({
 			name: 'area0',
+			description: 'area0',
 			type: 'area',
 			from: {
 				data: 'area0_facet',
@@ -90,6 +91,7 @@ describe('getAreaMark', () => {
 			})
 		).toStrictEqual({
 			name: 'area0',
+			description: 'area0',
 			type: 'area',
 			from: {
 				data: 'area0_facet',
@@ -151,6 +153,7 @@ describe('getAreaMark', () => {
 			})
 		).toStrictEqual({
 			name: 'area0',
+			description: 'area0',
 			type: 'area',
 			from: {
 				data: 'area0_facet',
@@ -204,6 +207,7 @@ describe('getAreaMark', () => {
 			})
 		).toStrictEqual({
 			name: 'area0',
+			description: 'area0',
 			type: 'area',
 			from: {
 				data: 'area0_facet',

diff --git a/src/specBuilder/area/areaUtils.ts b/src/specBuilder/area/areaUtils.ts
@@ -53,6 +53,7 @@ export const getAreaMark = (areaProps: AreaMarkProps, dataSource: string = `${ar
 		areaProps;
 	return {
 		name,
+		description: name,
 		type: 'area',
 		from: { data: dataSource },
 		interactive: getInteractive(children),

diff --git a/src/specBuilder/axis/axisTestUtils.ts b/src/specBuilder/axis/axisTestUtils.ts
@@ -22,6 +22,7 @@ import { AxisSpecProps } from '../../types';
 
 export const defaultXBaselineMark: Mark = {
 	name: 'xBaseline',
+	description: 'xBaseline',
 	type: 'rule',
 	interactive: false,
 	encode: {
@@ -35,6 +36,7 @@ export const defaultXBaselineMark: Mark = {
 
 export const defaultYBaselineMark: Mark = {
 	name: 'yBaseline',
+	description: 'yBaseline',
 	type: 'rule',
 	interactive: false,
 	encode: {

diff --git a/src/specBuilder/axis/axisUtils.ts b/src/specBuilder/axis/axisUtils.ts
@@ -367,6 +367,7 @@ export const getBaselineRule = (baselineOffset: number, position: Position): Mar
 
 	return {
 		name: `${orientation}Baseline`,
+		description: `${orientation}Baseline`,
 		type: 'rule',
 		interactive: false,
 		encode: {

diff --git a/src/specBuilder/bar/barAnnotationUtils.ts b/src/specBuilder/bar/barAnnotationUtils.ts
@@ -154,6 +154,7 @@ const getAnnotationBackgroundMark = ({
 	style,
 }: AnnotationSpecProps): RectMark => ({
 	name: `${barProps.name}_annotationBackground`,
+	description: `${barProps.name}_annotationBackground`,
 	type: 'rect',
 	from: { data: `${barProps.name}_annotationText` },
 	interactive: false,

diff --git a/src/specBuilder/bar/barSpecBuilder.test.ts b/src/specBuilder/bar/barSpecBuilder.test.ts
@@ -152,6 +152,7 @@ const defaultSelectedGroupIdTransform: Transforms[] = [
 
 const defaultBackgroundStackedMark: Mark = {
 	name: 'bar0_background',
+	description: 'bar0_background',
 	type: 'rect',
 	from: { data: FILTERED_TABLE },
 	interactive: false,
@@ -169,6 +170,7 @@ const defaultBackgroundStackedMark: Mark = {
 };
 const defaultStackedMark: Mark = {
 	name: 'bar0',
+	description: 'bar0',
 	type: 'rect',
 	from: { data: FILTERED_TABLE },
 	interactive: false,

diff --git a/src/specBuilder/bar/stackedBarUtils.test.ts b/src/specBuilder/bar/stackedBarUtils.test.ts
@@ -42,6 +42,7 @@ const defaultBackgroundMark: Mark = {
 	from: { data: FILTERED_TABLE },
 	interactive: false,
 	name: 'bar0_background',
+	description: 'bar0_background',
 	type: 'rect',
 };
 
@@ -63,6 +64,7 @@ const defaultMark = {
 	from: { data: FILTERED_TABLE },
 	interactive: false,
 	name: 'bar0',
+	description: 'bar0',
 	type: 'rect',
 };
 

diff --git a/src/specBuilder/bar/stackedBarUtils.ts b/src/specBuilder/bar/stackedBarUtils.ts
@@ -69,6 +69,7 @@ export const getStackedBackgroundBar = (props: BarSpecProps): RectMark => {
 
 	return {
 		name: `${name}_background`,
+		description:`${name}_background`,
 		type: 'rect',
 		from: { data: isDodgedAndStacked(props) ? `${name}_facet` : getBaseDataSourceName(props) },
 		interactive: false,
@@ -88,6 +89,7 @@ export const getStackedBar = (props: BarSpecProps): RectMark => {
 	const { children, name } = props;
 	return {
 		name,
+		description: name,
 		type: 'rect',
 		from: { data: isDodgedAndStacked(props) ? `${name}_facet` : getBaseDataSourceName(props) },
 		interactive: getInteractive(children, props),

diff --git a/src/specBuilder/donut/donutUtils.ts b/src/specBuilder/donut/donutUtils.ts
@@ -21,6 +21,7 @@ export const getArcMark = (props: DonutSpecProps): ArcMark => {
 	return {
 		type: 'arc',
 		name,
+		description: name,
 		from: { data: FILTERED_TABLE },
 		encode: {
 			enter: {

diff --git a/src/specBuilder/line/lineMarkUtils.test.ts b/src/specBuilder/line/lineMarkUtils.test.ts
@@ -30,6 +30,7 @@ describe('getLineMark()', () => {
 		const lineMark = getLineMark(defaultLineMarkProps, 'line0_facet');
 		expect(lineMark).toEqual({
 			name: 'line0',
+			description: 'line0',
 			type: 'line',
 			from: { data: 'line0_facet' },
 			interactive: false,

diff --git a/src/specBuilder/line/lineMarkUtils.ts b/src/specBuilder/line/lineMarkUtils.ts
@@ -58,6 +58,7 @@ export const getLineMark = (lineMarkProps: LineMarkProps, dataSource: string): L
 
 	return {
 		name,
+		description: name,
 		type: 'line',
 		from: { data: dataSource },
 		interactive: false,
@@ -152,6 +153,7 @@ export const getLineHoverMarks = (
 const getHoverRule = (dimension: string, name: string, scaleType: ScaleType): RuleMark => {
 	return {
 		name: `${name}_hoverRule`,
+		description: `${name}_hoverRule`,
 		type: 'rule',
 		from: { data: `${name}_highlightedData` },
 		interactive: false,

diff --git a/src/specBuilder/line/linePointUtils.ts b/src/specBuilder/line/linePointUtils.ts
@@ -52,6 +52,7 @@ export const getLineStaticPoint = ({
 }: LineSpecProps): SymbolMark => {
 	return {
 		name: `${name}_staticPoints`,
+		description: `${name}_staticPoints`,
 		type: 'symbol',
 		from: { data: `${name}_staticPointData` },
 		interactive: false,
@@ -78,6 +79,7 @@ export const getHighlightBackgroundPoint = (lineProps: LineMarkProps): SymbolMar
 	const { dimension, metric, metricAxis, name, scaleType } = lineProps;
 	return {
 		name: `${name}_pointBackground`,
+		description: `${name}_pointBackground`,
 		type: 'symbol',
 		from: { data: `${name}_highlightedData` },
 		interactive: false,

diff --git a/src/specBuilder/line/lineSpecBuilder.test.ts b/src/specBuilder/line/lineSpecBuilder.test.ts
@@ -113,6 +113,7 @@ const defaultSpec = initializeSpec({
 					},
 					from: { data: 'line0_facet' },
 					name: 'line0',
+					description: 'line0',
 					type: 'line',
 					interactive: false,
 				},
@@ -171,6 +172,7 @@ const line0_groupMark = {
 	marks: [
 		{
 			name: 'line0',
+			description: 'line0',
 			type: 'line',
 			from: {
 				data: 'line0_facet',
@@ -207,6 +209,7 @@ const metricRangeGroupMark = {
 	marks: [
 		{
 			name: 'line0MetricRange0_line',
+			description: 'line0MetricRange0_line',
 			type: 'line',
 			from: {
 				data: 'line0MetricRange0_facet',
@@ -241,6 +244,7 @@ const metricRangeGroupMark = {
 		},
 		{
 			name: 'line0MetricRange0_area',
+			description: 'line0MetricRange0_area',
 			type: 'area',
 			from: {
 				data: 'line0MetricRange0_facet',
@@ -282,6 +286,7 @@ const metricRangeWithDisplayPointMarks = [
 	line0_groupMark,
 	{
 		name: 'line0_staticPoints',
+		description: 'line0_staticPoints',
 		type: 'symbol',
 		from: {
 			data: 'line0_staticPointData',
@@ -319,6 +324,7 @@ const displayPointMarks = [
 	line0_groupMark,
 	{
 		name: 'line0_staticPoints',
+		description:  'line0_staticPoints',
 		type: 'symbol',
 		from: {
 			data: 'line0_staticPointData',
@@ -481,6 +487,7 @@ describe('lineSpecBuilder', () => {
 							},
 							from: { data: 'line0_facet' },
 							name: 'line0',
+							description: 'line0',
 							type: 'line',
 							interactive: false,
 						},

diff --git a/src/specBuilder/marks/markUtils.ts b/src/specBuilder/marks/markUtils.ts
@@ -304,6 +304,7 @@ export const getPointsForVoronoi = (
 ): SymbolMark => {
 	return {
 		name: `${name}_pointsForVoronoi`,
+		description: `${name}_pointsForVoronoi`,
 		type: 'symbol',
 		from: { data: dataSource },
 		interactive: false,
@@ -329,6 +330,7 @@ export const getPointsForVoronoi = (
  */
 export const getVoronoiPath = (children: MarkChildElement[], dataSource: string, markName: string): PathMark => ({
 	name: `${markName}_voronoi`,
+	description: `${markName}_voronoi`,
 	type: 'path',
 	from: { data: dataSource },
 	encode: {

diff --git a/src/specBuilder/metricRange/metricRangeUtils.test.ts b/src/specBuilder/metricRange/metricRangeUtils.test.ts
@@ -73,6 +73,7 @@ const defaultLineProps: LineSpecProps = {
 const basicMetricRangeMarks = [
 	{
 		name: 'line0MetricRange0_line',
+		description: 'line0MetricRange0_line',
 		type: 'line',
 		from: {
 			data: 'line0MetricRange0_facet',
@@ -97,6 +98,7 @@ const basicMetricRangeMarks = [
 	},
 	{
 		name: 'line0MetricRange0_area',
+		description: 'line0MetricRange0_area',
 		type: 'area',
 		from: {
 			data: 'line0MetricRange0_facet',

diff --git a/src/specBuilder/scatter/scatterMarkUtils.ts b/src/specBuilder/scatter/scatterMarkUtils.ts
@@ -66,6 +66,7 @@ export const getScatterMark = (props: ScatterSpecProps): SymbolMark => {
 	} = props;
 	return {
 		name,
+		description: name,
 		type: 'symbol',
 		from: {
 			data: FILTERED_TABLE,

diff --git a/src/specBuilder/trendlineAnnotation/trendlineAnnotationUtils.ts b/src/specBuilder/trendlineAnnotation/trendlineAnnotationUtils.ts
@@ -257,6 +257,7 @@ export const getTrendlineAnnotationBadgeMark = ({
 	return [
 		{
 			name: `${name}_badge`,
+			description: `${name}_badge`,
 			type: 'rect',
 			from: { data: `${name}` },
 			interactive: false,