marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-09 10:36:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor mermaidAPI accessibilities

Browse Source
This commit is contained in:
Yokozuna59
2023-06-27 20:07:50 +03:00
parent 228bafa909
commit 226960ef46
2 changed files with 16 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
packages/mermaid/src/mermaidAPI.spec.ts
View File

@@ -733,59 +733,7 @@ describe('mermaidAPI', () => {
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();
});
});
});
});
});
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 () => {
it('should set aria-roledscription to the diagram type AND should call addSVGa11yTitleDescription', async () => {
const a11yDiagramInfo_spy = vi.spyOn(accessibility, 'setA11yDiagramInfo');
const a11yTitleDesc_spy = vi.spyOn(accessibility, 'addSVGa11yTitleDescription');
await mermaidAPI.render(id, diagramText);

26
packages/mermaid/src/mermaidAPI.ts
View File

@@ -478,7 +478,7 @@ const render = async function (
// Get the temporary div element containing the svg
const element = root.select(enclosingDivID_selector).node();
const graphType = diag.type;
const diagramType = diag.type;
// -------------------------------------------------------------------------------
// Create and insert the styles (user styles, theme styles, config styles)
@@ -486,11 +486,11 @@ const render = async function (
// Insert an element into svg. This is where we put the styles
const svg = element.firstChild;
const firstChild = svg.firstChild;
const diagramClassDefs = CLASSDEF_DIAGRAMS.includes(graphType)
const diagramClassDefs = CLASSDEF_DIAGRAMS.includes(diagramType)
? diag.renderer.getClasses(text, diag)
: {};
const rules = createUserStyles(config, graphType, diagramClassDefs, idSelector);
const rules = createUserStyles(config, diagramType, diagramClassDefs, idSelector);
const style1 = document.createElement('style');
style1.innerHTML = rules;
@@ -507,9 +507,9 @@ const render = async function (
// This is the d3 node for the svg element
const svgNode = root.select(`${enclosingDivID_selector} svg`);
const a11yTitle = diag.db.getAccTitle?.();
const a11yDescr = diag.db.getAccDescription?.();
addA11yInfo(graphType, svgNode, a11yTitle, a11yDescr);
const a11yTitle: string | undefined = diag.db.getAccTitle?.();
const a11yDescr: string | undefined = diag.db.getAccDescription?.();
addA11yInfo(diagramType, svgNode, a11yTitle, a11yDescr);
// -------------------------------------------------------------------------------
// Clean up SVG code
@@ -586,14 +586,18 @@ function initialize(options: MermaidConfig = {}) {
/**
* Add accessibility (a11y) information to the diagram.
*
* @param diagramType - diagram type
* @param svgNode - d3 node to insert the a11y title and desc info
* @param a11yTitle - a11y title
* @param a11yDescr - a11y description
*/
function addA11yInfo(
graphType: string,
diagramType: string,
svgNode: D3Element,
a11yTitle: string | undefined,
a11yDescr: string | undefined
) {
setA11yDiagramInfo(svgNode, graphType);
a11yTitle?: string,
a11yDescr?: string
): void {
setA11yDiagramInfo(svgNode, diagramType);
addSVGa11yTitleDescription(svgNode, a11yTitle, a11yDescr, svgNode.attr('id'));
}