fix: <svg> elements with an img role must have an alternative text (#646)

Author: nali-github

packages/vega-spec-builder/src/line/linePointUtils.test.ts

@@ -21,11 +21,14 @@ import {
 } from '@spectrum-charts/constants';
 
 import {
+  getHighlightPoint,
   getHighlightPointFill,
   getHighlightPointSize,
   getHighlightPointStroke,
   getHighlightPointStrokeOpacity,
   getHighlightPointStrokeWidth,
+  getSecondaryHighlightPoint,
+  getSelectionPoint,
 } from './linePointUtils';
 import { defaultLineMarkOptions } from './lineTestUtils';
 
@@ -121,3 +124,127 @@ describe('getHighlightPointStrokeWidth()', () => {
     expect(rules[0]).toHaveProperty(`test`, `datum.${staticPoint} && datum.${staticPoint} === true`);
   });
 });
+
+describe('getHighlightPoint()', () => {
+  test('should return symbol mark with correct name and description', () => {
+    const mark = getHighlightPoint(defaultLineMarkOptions);
+    expect(mark.name).toBe('line0_point_highlight');
+    expect(mark.description).toBe('line0_point_highlight');
+  });
+
+  test('should return symbol mark with correct properties', () => {
+    const mark = getHighlightPoint(defaultLineMarkOptions);
+    expect(mark.type).toBe('symbol');
+    expect(mark.interactive).toBe(false);
+    expect(mark.from).toEqual({ data: 'line0_highlightedData' });
+  });
+
+  test('should have correct encode structure', () => {
+    const mark = getHighlightPoint(defaultLineMarkOptions);
+    expect(mark.encode).toBeDefined();
+    expect(mark.encode?.enter).toBeDefined();
+    expect(mark.encode?.update).toBeDefined();
+    expect(mark.encode?.enter?.y).toEqual({ field: 'value', scale: 'yLinear' });
+    expect(mark.encode?.enter?.stroke).toEqual({ field: DEFAULT_COLOR, scale: COLOR_SCALE });
+  });
+
+  test('should use custom name in mark name and description', () => {
+    const customOptions = { ...defaultLineMarkOptions, name: 'customLine' };
+    const mark = getHighlightPoint(customOptions);
+    expect(mark.name).toBe('customLine_point_highlight');
+    expect(mark.description).toBe('customLine_point_highlight');
+    expect(mark.from).toEqual({ data: 'customLine_highlightedData' });
+  });
+});
+
+describe('getSelectionPoint()', () => {
+  test('should return symbol mark with correct name and description', () => {
+    const mark = getSelectionPoint(defaultLineMarkOptions);
+    expect(mark.name).toBe('line0_point_select');
+    expect(mark.description).toBe('line0_point_select');
+  });
+
+  test('should return symbol mark with correct properties', () => {
+    const mark = getSelectionPoint(defaultLineMarkOptions);
+    expect(mark.type).toBe('symbol');
+    expect(mark.interactive).toBe(false);
+    expect(mark.from).toEqual({ data: 'line0_selectedData' });
+  });
+
+  test('should have correct encode structure', () => {
+    const mark = getSelectionPoint(defaultLineMarkOptions);
+    expect(mark.encode).toBeDefined();
+    expect(mark.encode?.enter).toBeDefined();
+    expect(mark.encode?.update).toBeDefined();
+    expect(mark.encode?.enter?.y).toEqual({ field: 'value', scale: 'yLinear' });
+    expect(mark.encode?.enter?.stroke).toEqual({ field: DEFAULT_COLOR, scale: COLOR_SCALE });
+  });
+
+  test('should use custom name in mark name and description', () => {
+    const customOptions = { ...defaultLineMarkOptions, name: 'customLine' };
+    const mark = getSelectionPoint(customOptions);
+    expect(mark.name).toBe('customLine_point_select');
+    expect(mark.description).toBe('customLine_point_select');
+    expect(mark.from).toEqual({ data: 'customLine_selectedData' });
+  });
+
+  test('should use selectedData instead of highlightedData', () => {
+    const highlightMark = getHighlightPoint(defaultLineMarkOptions);
+    const selectionMark = getSelectionPoint(defaultLineMarkOptions);
+    expect(highlightMark.from).toEqual({ data: 'line0_highlightedData' });
+    expect(selectionMark.from).toEqual({ data: 'line0_selectedData' });
+    expect(highlightMark.name).toContain('highlight');
+    expect(selectionMark.name).toContain('select');
+  });
+});
+
+describe('getSecondaryHighlightPoint()', () => {
+  const secondaryMetric = 'trendlineValue';
+
+  test('should return symbol mark with correct name and description', () => {
+    const mark = getSecondaryHighlightPoint(defaultLineMarkOptions, secondaryMetric);
+    expect(mark.name).toBe('line0_secondaryPoint');
+    expect(mark.description).toBe('line0_secondaryPoint');
+  });
+
+  test('should return symbol mark with correct properties', () => {
+    const mark = getSecondaryHighlightPoint(defaultLineMarkOptions, secondaryMetric);
+    expect(mark.type).toBe('symbol');
+    expect(mark.interactive).toBe(false);
+    expect(mark.from).toEqual({ data: 'line0_highlightedData' });
+  });
+
+  test('should have correct encode structure with secondary metric', () => {
+    const mark = getSecondaryHighlightPoint(defaultLineMarkOptions, secondaryMetric);
+    expect(mark.encode).toBeDefined();
+    expect(mark.encode?.enter).toBeDefined();
+    expect(mark.encode?.update).toBeDefined();
+    expect(mark.encode?.enter?.y).toEqual({ field: secondaryMetric, scale: 'yLinear' });
+    expect(mark.encode?.enter?.fill).toEqual({ signal: BACKGROUND_COLOR });
+    expect(mark.encode?.enter?.stroke).toEqual({ field: DEFAULT_COLOR, scale: COLOR_SCALE });
+  });
+
+  test('should use custom name in mark name and description', () => {
+    const customOptions = { ...defaultLineMarkOptions, name: 'customLine' };
+    const mark = getSecondaryHighlightPoint(customOptions, secondaryMetric);
+    expect(mark.name).toBe('customLine_secondaryPoint');
+    expect(mark.description).toBe('customLine_secondaryPoint');
+    expect(mark.from).toEqual({ data: 'customLine_highlightedData' });
+  });
+
+  test('should use the secondary metric for y-axis encoding', () => {
+    const metric1 = 'metric1';
+    const metric2 = 'metric2';
+    const mark1 = getSecondaryHighlightPoint(defaultLineMarkOptions, metric1);
+    const mark2 = getSecondaryHighlightPoint(defaultLineMarkOptions, metric2);
+    expect(mark1.encode?.enter?.y).toEqual({ field: metric1, scale: 'yLinear' });
+    expect(mark2.encode?.enter?.y).toEqual({ field: metric2, scale: 'yLinear' });
+  });
+
+  test('should use highlightedData like the primary highlight point', () => {
+    const mark = getSecondaryHighlightPoint(defaultLineMarkOptions, secondaryMetric);
+    const highlightMark = getHighlightPoint(defaultLineMarkOptions);
+    expect(mark.from).toEqual(highlightMark.from);
+    expect(mark.from).toEqual({ data: 'line0_highlightedData' });
+  });
+});

packages/vega-spec-builder/src/line/linePointUtils.ts

@@ -103,6 +103,7 @@ const getHighlightOrSelectionPoint = (lineOptions: LineMarkOptions, useHighlight
   const { color, colorScheme, dimension, metric, metricAxis, name, scaleType } = lineOptions;
   return {
     name: `${name}_point_${useHighlightedData ? 'highlight' : 'select'}`,
+    description: `${name}_point_${useHighlightedData ? 'highlight' : 'select'}`,
     type: 'symbol',
     from: { data: `${name}${useHighlightedData ? '_highlightedData' : '_selectedData'}` },
     interactive: false,
@@ -154,6 +155,7 @@ export const getSecondaryHighlightPoint = (
   const { color, colorScheme, dimension, metricAxis, name, scaleType } = lineOptions;
   return {
     name: `${name}_secondaryPoint`,
+    description: `${name}_secondaryPoint`,
     type: 'symbol',
     from: { data: `${name}_highlightedData` },
     interactive: false,