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

diagrams: use a11y title,desc specific method (was renamed)

Browse Source
This commit is contained in:
Ashley Engelund (weedySeaDragon @ github)
2022-11-15 13:48:35 -08:00
parent 8d96518092
commit 0d9566dd71
14 changed files with 29 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/mermaid/src/diagrams/c4/c4Renderer.js
View File

@@ -8,7 +8,7 @@ import * as configApi from '../../config';
import assignWithDepth from '../../assignWithDepth'; import assignWithDepth from '../../assignWithDepth';
import { wrapLabel, calculateTextWidth, calculateTextHeight } from '../../utils'; import { wrapLabel, calculateTextWidth, calculateTextHeight } from '../../utils';
import { configureSvgSize } from '../../setupGraphViewbox'; import { configureSvgSize } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility'; import { addSVGa11yTitleDescription } from '../../accessibility';
let globalBoundaryMaxX = 0, let globalBoundaryMaxX = 0,
globalBoundaryMaxY = 0; globalBoundaryMaxY = 0;
@@ -676,7 +676,7 @@ export const draw = function (_text, id, _version, diagObj) {
(height + extraVertForTitle) (height + extraVertForTitle)
); );
addSVGAccessibilityFields(parser.yy, diagram, id); addSVGa11yTitleDescription(parser.yy, diagram, id);
log.debug(`models:`, box); log.debug(`models:`, box);
}; };

4
packages/mermaid/src/diagrams/class/classRenderer-v2.js
View File

@@ -7,7 +7,7 @@ import { curveLinear } from 'd3';
import { interpolateToCurve, getStylesFromArray } from '../../utils'; import { interpolateToCurve, getStylesFromArray } from '../../utils';
import { setupGraphViewbox } from '../../setupGraphViewbox'; import { setupGraphViewbox } from '../../setupGraphViewbox';
import common from '../common/common'; import common from '../common/common';
import addSVGAccessibilityFields from '../../accessibility'; import { addSVGa11yTitleDescription } from '../../accessibility';
let idCache = {}; let idCache = {};
@@ -452,7 +452,7 @@ export const draw = function (text, id, _version, diagObj) {
} }
} }
addSVGAccessibilityFields(diagObj.db, svg, id); addSVGa11yTitleDescription(diagObj.db, svg, id);
// If node has a link, wrap it in an anchor SVG object. // If node has a link, wrap it in an anchor SVG object.
// const keys = Object.keys(classes); // const keys = Object.keys(classes);
// keys.forEach(function(key) { // keys.forEach(function(key) {

4
packages/mermaid/src/diagrams/class/classRenderer.js
View File

@@ -5,7 +5,7 @@ import { log } from '../../logger';
import svgDraw from './svgDraw'; import svgDraw from './svgDraw';
import { configureSvgSize } from '../../setupGraphViewbox'; import { configureSvgSize } from '../../setupGraphViewbox';
import { getConfig } from '../../config'; import { getConfig } from '../../config';
import addSVGAccessibilityFields from '../../accessibility'; import { addSVGa11yTitleDescription } from '../../accessibility';
let idCache = {}; let idCache = {};
const padding = 20; const padding = 20;
@@ -272,7 +272,7 @@ export const draw = function (text, id, _version, diagObj) {
const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`; const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
log.debug(`viewBox ${vBox}`); log.debug(`viewBox ${vBox}`);
diagram.attr('viewBox', vBox); diagram.attr('viewBox', vBox);
addSVGAccessibilityFields(diagObj.db, diagram, id); addSVGa11yTitleDescription(diagObj.db, diagram, id);
}; };
export default { export default {

4
packages/mermaid/src/diagrams/er/erRenderer.js
View File

@@ -5,7 +5,7 @@ import { getConfig } from '../../config';
import { log } from '../../logger'; import { log } from '../../logger';
import erMarkers from './erMarkers'; import erMarkers from './erMarkers';
import { configureSvgSize } from '../../setupGraphViewbox'; import { configureSvgSize } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility'; import { addSVGa11yTitleDescription } from '../../accessibility';
import { parseGenericTypes } from '../common/common'; import { parseGenericTypes } from '../common/common';
import { v4 as uuid4 } from 'uuid'; import { v4 as uuid4 } from 'uuid';
@@ -657,7 +657,7 @@ export const draw = function (text, id, _version, diagObj) {
svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`); svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
addSVGAccessibilityFields(diagObj.db, svg, id); addSVGa11yTitleDescription(diagObj.db, svg, id);
}; // draw }; // draw
/** /**

4
packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
View File

@@ -10,7 +10,7 @@ import { log } from '../../logger';
import common, { evaluate } from '../common/common'; import common, { evaluate } from '../common/common';
import { interpolateToCurve, getStylesFromArray } from '../../utils'; import { interpolateToCurve, getStylesFromArray } from '../../utils';
import { setupGraphViewbox } from '../../setupGraphViewbox'; import { setupGraphViewbox } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility'; import { addSVGa11yTitleDescription } from '../../accessibility';
const conf = {}; const conf = {};
export const setConf = function (cnf) { export const setConf = function (cnf) {
@@ -431,7 +431,7 @@ export const draw = function (text, id, _version, diagObj) {
const svg = root.select(`[id="${id}"]`); const svg = root.select(`[id="${id}"]`);
// Adds title and description to the flow chart // Adds title and description to the flow chart
addSVGAccessibilityFields(diagObj.db, svg, id); addSVGa11yTitleDescription(diagObj.db, svg, id);
// Run the renderer. This is what draws the final graph. // Run the renderer. This is what draws the final graph.
const element = root.select('#' + id + ' g'); const element = root.select('#' + id + ' g');

4
packages/mermaid/src/diagrams/flowchart/flowRenderer.js
View File

@@ -8,7 +8,7 @@ import common, { evaluate } from '../common/common';
import { interpolateToCurve, getStylesFromArray } from '../../utils'; import { interpolateToCurve, getStylesFromArray } from '../../utils';
import { setupGraphViewbox } from '../../setupGraphViewbox'; import { setupGraphViewbox } from '../../setupGraphViewbox';
import flowChartShapes from './flowChartShapes'; import flowChartShapes from './flowChartShapes';
import addSVGAccessibilityFields from '../../accessibility'; import { addSVGa11yTitleDescription } from '../../accessibility';
const conf = {}; const conf = {};
export const setConf = function (cnf) { export const setConf = function (cnf) {
@@ -418,7 +418,7 @@ export const draw = function (text, id, _version, diagObj) {
const svg = root.select(`[id="${id}"]`); const svg = root.select(`[id="${id}"]`);
// Adds title and description to the flow chart // Adds title and description to the flow chart
addSVGAccessibilityFields(diagObj.db, svg, id); addSVGa11yTitleDescription(diagObj.db, svg, id);
// Run the renderer. This is what draws the final graph. // Run the renderer. This is what draws the final graph.
const element = root.select('#' + id + ' g'); const element = root.select('#' + id + ' g');

4
packages/mermaid/src/diagrams/gantt/ganttRenderer.js
View File

@@ -19,7 +19,7 @@ import {
import common from '../common/common'; import common from '../common/common';
import { getConfig } from '../../config'; import { getConfig } from '../../config';
import { configureSvgSize } from '../../setupGraphViewbox'; import { configureSvgSize } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility'; import { addSVGa11yTitleDescription } from '../../accessibility';
export const setConf = function () { export const setConf = function () {
log.debug('Something is calling, setConf, remove the call'); log.debug('Something is calling, setConf, remove the call');
@@ -116,7 +116,7 @@ export const draw = function (text, id, version, diagObj) {
.attr('y', conf.titleTopMargin) .attr('y', conf.titleTopMargin)
.attr('class', 'titleText'); .attr('class', 'titleText');
addSVGAccessibilityFields(diagObj.db, svg, id); addSVGa11yTitleDescription(diagObj.db, svg, id);
/** /**
* @param tasks * @param tasks

4
packages/mermaid/src/diagrams/git/gitGraphRenderer.js
View File

@@ -1,7 +1,7 @@
import { select } from 'd3'; import { select } from 'd3';
import { getConfig, setupGraphViewbox } from '../../diagram-api/diagramAPI'; import { getConfig, setupGraphViewbox } from '../../diagram-api/diagramAPI';
import { log } from '../../logger'; import { log } from '../../logger';
import addSVGAccessibilityFields from '../../accessibility'; import { addSVGa11yTitleDescription } from '../../accessibility';
let allCommitsDict = {}; let allCommitsDict = {};
@@ -513,7 +513,7 @@ export const draw = function (txt, id, ver, diagObj) {
const diagram = select(`[id="${id}"]`); const diagram = select(`[id="${id}"]`);
// Adds title and description to the flow chart // Adds title and description to the flow chart
addSVGAccessibilityFields(diagObj.db, diagram, id); addSVGa11yTitleDescription(diagObj.db, diagram, id);
drawCommits(diagram, allCommitsDict, false); drawCommits(diagram, allCommitsDict, false);
if (gitGraphConfig.showBranches) { if (gitGraphConfig.showBranches) {

4
packages/mermaid/src/diagrams/pie/pieRenderer.js
View File

@@ -3,7 +3,7 @@ import { select, scaleOrdinal, pie as d3pie, arc } from 'd3';
import { log } from '../../logger'; import { log } from '../../logger';
import { configureSvgSize } from '../../setupGraphViewbox'; import { configureSvgSize } from '../../setupGraphViewbox';
import * as configApi from '../../config'; import * as configApi from '../../config';
import addSVGAccessibilityFields from '../../accessibility'; import { addSVGa11yTitleDescription } from '../../accessibility';
let conf = configApi.getConfig(); let conf = configApi.getConfig();
@@ -53,7 +53,7 @@ export const draw = (txt, id, _version, diagObj) => {
const diagram = root.select('#' + id); const diagram = root.select('#' + id);
configureSvgSize(diagram, height, width, conf.pie.useMaxWidth); configureSvgSize(diagram, height, width, conf.pie.useMaxWidth);
addSVGAccessibilityFields(diagObj.db, diagram, id); addSVGa11yTitleDescription(diagObj.db, diagram, id);
// Set viewBox // Set viewBox
elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height); elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height);

4
packages/mermaid/src/diagrams/requirement/requirementRenderer.js
View File

@@ -6,7 +6,7 @@ import { configureSvgSize } from '../../setupGraphViewbox';
import common from '../common/common'; import common from '../common/common';
import markers from './requirementMarkers'; import markers from './requirementMarkers';
import { getConfig } from '../../config'; import { getConfig } from '../../config';
import addSVGAccessibilityFields from '../../accessibility'; import { addSVGa11yTitleDescription } from '../../accessibility';
let conf = {}; let conf = {};
let relCnt = 0; let relCnt = 0;
@@ -364,7 +364,7 @@ export const draw = (text, id, _version, diagObj) => {
svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`); svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
// Adds title and description to the requirements diagram // Adds title and description to the requirements diagram
addSVGAccessibilityFields(diagObj.db, svg, id); addSVGa11yTitleDescription(diagObj.db, svg, id);
}; };
export default { export default {

4
packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
View File

@@ -9,9 +9,11 @@ import * as configApi from '../../config';
import assignWithDepth from '../../assignWithDepth'; import assignWithDepth from '../../assignWithDepth';
import utils from '../../utils'; import utils from '../../utils';
import { configureSvgSize } from '../../setupGraphViewbox'; import { configureSvgSize } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility'; import { addSVGa11yTitleDescription } from '../../accessibility';
import Diagram from '../../Diagram'; import Diagram from '../../Diagram';
// FIXME insert a11y title and desc
let conf = {}; let conf = {};
export const bounds = { export const bounds = {

4
packages/mermaid/src/diagrams/state/stateRenderer-v2.js
View File

@@ -5,7 +5,7 @@ import { render } from '../../dagre-wrapper/index.js';
import { log } from '../../logger'; import { log } from '../../logger';
import { configureSvgSize } from '../../setupGraphViewbox'; import { configureSvgSize } from '../../setupGraphViewbox';
import common from '../common/common'; import common from '../common/common';
import addSVGAccessibilityFields from '../../accessibility'; import { addSVGa11yTitleDescription } from '../../accessibility';
import { import {
DEFAULT_DIAGRAM_DIRECTION, DEFAULT_DIAGRAM_DIRECTION,
DEFAULT_NESTED_DOC_DIR, DEFAULT_NESTED_DOC_DIR,
@@ -481,7 +481,7 @@ export const draw = function (text, id, _version, diag) {
label.insertBefore(rect, label.firstChild); label.insertBefore(rect, label.firstChild);
// } // }
} }
addSVGAccessibilityFields(diag.db, svg, id); addSVGa11yTitleDescription(diag.db, svg, id);
}; };
export default { export default {

4
packages/mermaid/src/diagrams/state/stateRenderer.js
View File

@@ -6,7 +6,7 @@ import common from '../common/common';
import { drawState, addTitleAndBox, drawEdge } from './shapes'; import { drawState, addTitleAndBox, drawEdge } from './shapes';
import { getConfig } from '../../config'; import { getConfig } from '../../config';
import { configureSvgSize } from '../../setupGraphViewbox'; import { configureSvgSize } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility'; import { addSVGa11yTitleDescription } from '../../accessibility';
// TODO Move conf object to main conf in mermaidAPI // TODO Move conf object to main conf in mermaidAPI
let conf; let conf;
@@ -97,7 +97,7 @@ export const draw = function (text, id, _version, diagObj) {
'viewBox', 'viewBox',
`${bounds.x - conf.padding} ${bounds.y - conf.padding} ` + width + ' ' + height `${bounds.x - conf.padding} ${bounds.y - conf.padding} ` + width + ' ' + height
); );
addSVGAccessibilityFields(diagObj.db, diagram, id); addSVGa11yTitleDescription(diagObj.db, diagram, id);
}; };
const getLabelWidth = (text) => { const getLabelWidth = (text) => {
return text ? text.length * conf.fontSizeFactor : 1; return text ? text.length * conf.fontSizeFactor : 1;

3
packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
View File

@@ -3,7 +3,8 @@ import { select } from 'd3';
import svgDraw from './svgDraw'; import svgDraw from './svgDraw';
import { getConfig } from '../../config'; import { getConfig } from '../../config';
import { configureSvgSize } from '../../setupGraphViewbox'; import { configureSvgSize } from '../../setupGraphViewbox';
import addSVGAccessibilityFields from '../../accessibility'; import { addSVGa11yTitleDescription } from '../../accessibility';
// FIXME insert a11y title and desc
export const setConf = function (cnf) { export const setConf = function (cnf) {
const keys = Object.keys(cnf); const keys = Object.keys(cnf);