refactor accessibility

[Yokozuna59]

📑 Summary

• remove @ts-ignore comments
• rename vitest test and describe title
• remove unnecessary types, e.i, null and number
• clean addSVGa11yTitleDescription and setA11yDiagramInfo functions

📏 Design Decisions

Describe the way your implementation works or what design decisions you made if applicable.

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added unit/e2e tests (if appropriate)
• 📓 have added documentation (if appropriate)
• 🔖 targeted develop branch

[Yokozuna59]

Should I update related stuff in mermaidAPI.ts and mermaidAPI.spec.ts?

[codecov-commenter]

Codecov Report

Merging #4551 (406df57) into develop (9c011ab) will increase coverage by 5.27%.
The diff coverage is 78.37%.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #4551      +/-   ##
===========================================
+ Coverage    75.10%   80.37%   +5.27%     
===========================================
  Files          135      144       +9     
  Lines        16498    16939     +441     
  Branches       510      521      +11     
===========================================
+ Hits         12390    13614    +1224     
+ Misses        3997     3220     -777     
+ Partials       111      105       -6     

Flag	Coverage Δ
e2e	83.99% <100.00%> (+8.43%)	⬆️
unit	60.15% <35.13%> (+0.03%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
packages/mermaid/src/mermaidAPI.ts	62.20% <73.33%> (+1.09%)	⬆️
packages/mermaid/src/accessibility.ts	78.46% <81.81%> (+1.31%)	⬆️

... and 42 files with indirect coverage changes

[Yokozuna59]

I'm confused, aren't these identical?

mermaid/packages/mermaid/src/mermaidAPI.spec.ts

Lines 701 to 749 in 18ec63f

	describe('render', () => {
	// These are more like integration tests right now because nothing is mocked.
	// But it is faster that a cypress test and there's no real reason to actually evaluate an image pixel by pixel.
	// render(id, text, cb?, svgContainingElement?)
	// Test all diagram types. Note that old flowchart 'graph' type will invoke the flowRenderer-v2. (See the flowchart v2 detector.)
	// We have to have both the specific textDiagramType and the expected type name because the expected type may be slightly different than was is put in the diagram text (ex: in -v2 diagrams)
	const diagramTypesAndExpectations = [
	{ textDiagramType: 'C4Context', expectedType: 'c4' },
	{ textDiagramType: 'classDiagram', expectedType: 'classDiagram' },
	{ textDiagramType: 'classDiagram-v2', expectedType: 'classDiagram' },
	{ textDiagramType: 'erDiagram', expectedType: 'er' },
	{ textDiagramType: 'graph', expectedType: 'flowchart-v2' },
	{ textDiagramType: 'flowchart', expectedType: 'flowchart-v2' },
	{ textDiagramType: 'gitGraph', expectedType: 'gitGraph' },
	{ textDiagramType: 'gantt', expectedType: 'gantt' },
	{ textDiagramType: 'journey', expectedType: 'journey' },
	{ textDiagramType: 'pie', expectedType: 'pie' },
	{ textDiagramType: 'requirementDiagram', expectedType: 'requirement' },
	{ textDiagramType: 'sequenceDiagram', expectedType: 'sequence' },
	{ textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' },
	];
	describe('accessibility', () => {
	const id = 'mermaid-fauxId';
	const a11yTitle = 'a11y title';
	const a11yDescr = 'a11y description';
	diagramTypesAndExpectations.forEach((testedDiagram) => {
	describe(`${testedDiagram.textDiagramType}`, () => {
	const diagramType = testedDiagram.textDiagramType;
	const diagramText = `${diagramType}\n accTitle: ${a11yTitle}\n accDescr: ${a11yDescr}\n`;
	const expectedDiagramType = testedDiagram.expectedType;
	it('aria-roledscription is set to the diagram type, addSVGa11yTitleDescription is called', async () => {
	const a11yDiagramInfo_spy = vi.spyOn(accessibility, 'setA11yDiagramInfo');
	const a11yTitleDesc_spy = vi.spyOn(accessibility, 'addSVGa11yTitleDescription');
	await mermaidAPI.render(id, diagramText);
	expect(a11yDiagramInfo_spy).toHaveBeenCalledWith(
	expect.anything(),
	expectedDiagramType
	);
	expect(a11yTitleDesc_spy).toHaveBeenCalled();
	});
	});
	});
	});
	});

And

mermaid/packages/mermaid/src/mermaidAPI.spec.ts

Lines 751 to 801 in 18ec63f

	describe('render', () => {
	// Be sure to add async before each test (anonymous) method
	// These are more like integration tests right now because nothing is mocked.
	// But it is faster that a cypress test and there's no real reason to actually evaluate an image pixel by pixel.
	// render(id, text, cb?, svgContainingElement?)
	// Test all diagram types. Note that old flowchart 'graph' type will invoke the flowRenderer-v2. (See the flowchart v2 detector.)
	// We have to have both the specific textDiagramType and the expected type name because the expected type may be slightly different than was is put in the diagram text (ex: in -v2 diagrams)
	const diagramTypesAndExpectations = [
	{ textDiagramType: 'C4Context', expectedType: 'c4' },
	{ textDiagramType: 'classDiagram', expectedType: 'classDiagram' },
	{ textDiagramType: 'classDiagram-v2', expectedType: 'classDiagram' },
	{ textDiagramType: 'erDiagram', expectedType: 'er' },
	{ textDiagramType: 'graph', expectedType: 'flowchart-v2' },
	{ textDiagramType: 'flowchart', expectedType: 'flowchart-v2' },
	{ textDiagramType: 'gitGraph', expectedType: 'gitGraph' },
	{ textDiagramType: 'gantt', expectedType: 'gantt' },
	{ textDiagramType: 'journey', expectedType: 'journey' },
	{ textDiagramType: 'pie', expectedType: 'pie' },
	{ textDiagramType: 'requirementDiagram', expectedType: 'requirement' },
	{ textDiagramType: 'sequenceDiagram', expectedType: 'sequence' },
	{ textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' },
	];
	describe('accessibility', () => {
	const id = 'mermaid-fauxId';
	const a11yTitle = 'a11y title';
	const a11yDescr = 'a11y description';
	diagramTypesAndExpectations.forEach((testedDiagram) => {
	describe(`${testedDiagram.textDiagramType}`, () => {
	const diagramType = testedDiagram.textDiagramType;
	const diagramText = `${diagramType}\n accTitle: ${a11yTitle}\n accDescr: ${a11yDescr}\n`;
	const expectedDiagramType = testedDiagram.expectedType;
	it('aria-roledscription is set to the diagram type, addSVGa11yTitleDescription is called', async () => {
	const a11yDiagramInfo_spy = vi.spyOn(accessibility, 'setA11yDiagramInfo');
	const a11yTitleDesc_spy = vi.spyOn(accessibility, 'addSVGa11yTitleDescription');
	await mermaidAPI.render(id, diagramText);
	expect(a11yDiagramInfo_spy).toHaveBeenCalledWith(
	expect.anything(),
	expectedDiagramType
	);
	expect(a11yTitleDesc_spy).toHaveBeenCalled();
	});
	});
	});
	});
	});

---

The only difference is this comment:

mermaid/packages/mermaid/src/mermaidAPI.spec.ts

Lines 752 to 753 in 18ec63f

	// Be sure to add async before each test (anonymous) method

online differ: https://linediff.com/?id=649b1093687f4b8d478b4567

[sidharthv96]

@Yokozuna59 yes, those are identical. Maybe, I copied them when render and renderAsync was present and we didn't remove them afterwards.