GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

feat: adding more accessibility tooling

Browse Source
This commit is contained in:
Cory Gwin 2022-03-17 19:48:22 +00:00 committed by GitHub
parent 0181cbf743
commit 50f522ae5c
12 changed files with 131 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
demos/er.html Normal file
View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<div class="mermaid">
erDiagram
title This is a title
accDescription Test a description
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</body>
</html>

2
demos/flowchart.html
View File

@ -230,6 +230,8 @@
<h3>flowchart</h3>
<div class="mermaid">
flowchart TD
title Christmas
accDescription Get money
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
C -->|One| D[Laptop]

1
demos/sequence.html
View File

@ -19,6 +19,7 @@
<div class="mermaid">
sequenceDiagram
title: FancySequenceDiagram
accDescription Test a description
participant Alice
participant Bob

11
launch.json Normal file
View File

@ -0,0 +1,11 @@
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 9229
}
]
}

5
src/accessibility.js
View File

@ -9,15 +9,16 @@
* @param id
*/
export default function addSVGAccessibilityFields(yy_parser, svg, id) {
if (typeof svg.insert == 'undefined') {
return;
}
let title_string = yy_parser.getTitle();
let description = yy_parser.getAccDescription();
svg.attr('role', 'img').attr('aria-labelledby', 'chart-title-' + id + ' chart-desc-' + id);
svg
.insert('desc', ':first-child')
.attr('id', 'chart-desc-' + id)
.text(description);
svg
.insert('title', ':first-child')
.attr('id', 'chart-title-' + id)

11
src/diagrams/er/erDb.js
View File

@ -5,6 +5,7 @@ import * as configApi from '../../config';
let entities = {};
let relationships = [];
let title = '';
let description = '';
const Cardinality = {
ZERO_OR_ONE: 'ZERO_OR_ONE',
@ -75,6 +76,14 @@ const getTitle = function () {
return title;
};
const setAccDescription = function (txt) {
description = txt;
};
const getAccDescription = function () {
return description;
};
const clear = function () {
entities = {};
relationships = [];
@ -94,4 +103,6 @@ export default {
clear,
setTitle,
getTitle,
setAccDescription,
getAccDescription,
};

3
src/diagrams/er/erRenderer.js
View File

@ -7,6 +7,7 @@ import { getConfig } from '../../config';
import { log } from '../../logger';
import erMarkers from './erMarkers';
import { configureSvgSize } from '../../utils';
import addSVGAccessibilityFields from '../../accessibility';
const conf = {};
@ -637,6 +638,8 @@ export const draw = function (text, id) {
configureSvgSize(svg, height, width, conf.useMaxWidth);
svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
addSVGAccessibilityFields(parser.yy, svg, id);
}; // draw
export default {

8
src/diagrams/er/parser/erDiagram.jison
View File

@ -2,8 +2,14 @@
%options case-insensitive
%x open_directive type_directive arg_directive block
%x title
%x accDescription
%%
title { this.begin("title");return 'title'; }
<title>(?!\n|;|#)*[^\n]* { this.popState(); return "title_value"; }
accDescription { this.begin("accDescription");return 'accDescription'; }
<accDescription>(?!\n|;|#)*[^\n]* { this.popState(); return "description_value"; }
\%\%\{ { this.begin('open_directive'); return 'open_directive'; }
<open_directive>((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; }
<type_directive>":" { this.popState(); this.begin('arg_directive'); return ':'; }
@ -84,6 +90,8 @@ statement
}
| entityName BLOCK_START BLOCK_STOP { yy.addEntity($1); }
| entityName { yy.addEntity($1); }
| title title_value { $$=$2.trim();yy.setTitle($$); }
| accDescription description_value { $$=$2.trim();yy.setAccDescription($$); }
;
entityName

11
src/diagrams/er/parser/erDiagram.spec.js
View File

@ -181,6 +181,17 @@ describe('when parsing ER diagram it...', function () {
expect(Object.keys(erDb.getEntities()).length).toBe(1);
});
it('should allow for a title and acc description', function () {
const teacherRole = 'is teacher of';
const line1 = `TEACHER }o--o{ STUDENT : "${teacherRole}"`;
erDiagram.parser.parse(
`erDiagram\ntitle graph title\n accDescription this graph is about stuff\n${line1}`
);
expect(erDb.getTitle()).toBe('graph title');
expect(erDb.getAccDescription()).toBe('this graph is about stuff');
});
it('should allow more than one relationship between the same two entities', function () {
const line1 = 'CAR ||--o{ PERSON : "insured for"';
const line2 = 'CAR }o--|| PERSON : "owned by"';

6
src/diagrams/sequence/parser/sequenceDiagram.jison
View File

@ -56,7 +56,8 @@
"note" return 'note';
"activate" { this.begin('ID'); return 'activate'; }
"deactivate" { this.begin('ID'); return 'deactivate'; }
"title" return 'title';
"title"\s[^#\n;]+ return 'title';
"title:"\s[^#\n;]+ return 'legacy_title';
"accDescription"\s[^#\n;]+ return 'accDescription';
"sequenceDiagram" return 'SD';
"autonumber" return 'autonumber';
@ -122,7 +123,8 @@ statement
| link_statement 'NEWLINE'
| properties_statement 'NEWLINE'
| details_statement 'NEWLINE'
| title text2 'NEWLINE' {$$=[{type:'setTitle', text:$2}]}
| title {yy.setTitle($1.substring(6));$$=$1.substring(6);}
| legacy_title {yy.setTitle($1.substring(7));$$=$1.substring(7);}
| accDescription {yy.setAccDescription($1.substring(15));$$=$1.substring(15);}
| 'loop' restOfLine document end
{

14
src/diagrams/sequence/sequenceDb.js
View File

@ -9,7 +9,6 @@ let messages = [];
const notes = [];
let title = '';
let description = '';
let titleWrapped = false;
let sequenceNumbersEnabled = false;
let wrapEnabled = false;
@ -123,9 +122,6 @@ export const getActorKeys = function () {
export const getTitle = function () {
return title;
};
export const getTitleWrapped = function () {
return titleWrapped;
};
export const enableSequenceNumbers = function () {
sequenceNumbersEnabled = true;
};
@ -324,9 +320,9 @@ export const getActorProperty = function (actor, key) {
return undefined;
};
export const setTitle = function (titleWrap) {
title = titleWrap.text;
titleWrapped = (titleWrap.wrap === undefined && autoWrap()) || !!titleWrap.wrap;
export const setTitle = function (txt) {
let sanitizedText = sanitizeText(txt, configApi.getConfig());
title = sanitizedText;
};
export const apply = function (param) {
@ -410,7 +406,8 @@ export const apply = function (param) {
};
const setAccDescription = function (description_lex) {
description = description_lex;
let sanitizedText = sanitizeText(description_lex, configApi.getConfig());
description = sanitizedText;
};
const getAccDescription = function () {
@ -436,7 +433,6 @@ export default {
getTitle,
parseDirective,
getConfig: () => configApi.getConfig().sequence,
getTitleWrapped,
clear,
parseMessage,
LINETYPE,

29
src/diagrams/sequence/sequenceDiagram.spec.js
View File

@ -60,7 +60,7 @@ Bob-->Alice: I am good thanks!`;
mermaidAPI.parse(str);
expect(parser.yy.showSequenceNumbers()).toBe(true);
});
it('it should handle a sequenceDiagram definition with a title', function () {
it('it should handle a sequenceDiagram definition with a title:', function () {
const str = `
sequenceDiagram
title: Diagram Title
@ -82,10 +82,34 @@ Bob-->Alice: I am good thanks!`;
expect(messages[2].from).toBe('Bob');
expect(title).toBe('Diagram Title');
});
it('it should handle a sequenceDiagram definition with a title without a :', function () {
const str = `
sequenceDiagram
title Diagram Title
Alice->Bob:Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!`;
mermaidAPI.parse(str);
const actors = parser.yy.getActors();
expect(actors.Alice.description).toBe('Alice');
actors.Bob.description = 'Bob';
expect(parser.yy.getAccDescription()).toBe('');
const messages = parser.yy.getMessages();
const title = parser.yy.getTitle();
expect(messages.length).toBe(3);
expect(messages[0].from).toBe('Alice');
expect(messages[2].from).toBe('Bob');
expect(title).toBe('Diagram Title');
});
it('it should handle a sequenceDiagram definition with a accDescription', function () {
const str = `
sequenceDiagram
accDescription: Accessibility Description
accDescription Accessibility Description
Alice->Bob:Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!`;
@ -1609,6 +1633,7 @@ participant Alice
renderer.bounds.init();
mermaidAPI.parse(str);
renderer.draw(str, 'tst');
const { bounds, models } = renderer.bounds.getBounds();