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

#2732 Regression fixes for accessibility

Browse Source
This commit is contained in:
Knut Sveidqvist 2022-05-06 19:42:40 +02:00
parent da548f1970
commit 65143a0182
12 changed files with 82 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
cypress/integration/rendering/gantt.spec.js
View File

@ -298,8 +298,8 @@ describe('Gantt diagram', () => {
renderGraph(
`
gantt
title ${expectedTitle}
accDescription ${expectedAccDescription}
accTitle: ${expectedTitle}
accDescr: ${expectedAccDescription}
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d

4
cypress/integration/rendering/requirement.spec.js
View File

@ -53,8 +53,8 @@ describe('Requirement diagram', () => {
renderGraph(
`
requirementDiagram
title ${expectedTitle}
accDescription ${expectedAccDescription}
accTitle: ${expectedTitle}
accDescr: ${expectedAccDescription}
requirement test_req {
id: 1

4
cypress/integration/rendering/sequencediagram.spec.js
View File

@ -658,7 +658,7 @@ context('Sequence diagram', () => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height');
const height = parseFloat(svg.attr('height'));
expect(height).to.be.within(920, 960);
expect(height).to.be.within(920, 971);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@ -697,7 +697,7 @@ context('Sequence diagram', () => {
cy.get('svg').should((svg) => {
const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width'));
expect(height).to.be.within(920, 960);
expect(height).to.be.within(920, 971);
// use within because the absolute value can be slightly different depending on the environment ±5%
expect(width).to.be.within(820 * 0.95, 820 * 1.05);
expect(svg).to.not.have.attr('style');

28
cypress/integration/rendering/theme.spec.js
View File

@ -36,6 +36,8 @@ describe('Pie Chart', () => {
imgSnapshotTest(
`
pie title Sports in Sweden
accTitle: This is a title
accDescr: This is a description
"Bandy" : 40
"Ice-Hockey" : 80
"Football" : 90
@ -49,6 +51,8 @@ describe('Pie Chart', () => {
`
%%{init: { 'logLevel': 0} }%%
graph TD
accTitle: This is a title
accDescr: This is a description
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
@ -72,6 +76,9 @@ describe('Pie Chart', () => {
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
flowchart TD
accTitle: This is a title
accDescr: This is a description
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[Another]
@ -95,6 +102,9 @@ describe('Pie Chart', () => {
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
sequenceDiagram
accTitle: This is a title
accDescr: This is a description
autonumber
par Action 1
Alice->>John: Hello John, how are you?
@ -122,6 +132,9 @@ describe('Pie Chart', () => {
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
classDiagram
accTitle: This is a title
accDescr: This is a description
Animal "*" <|-- "1" Duck
Animal "1" <|-- "10" Fish
Animal <|-- Zebra
@ -168,6 +181,9 @@ describe('Pie Chart', () => {
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
stateDiagram
accTitle: This is a title
accDescr: This is a description
[*] --> Active
state Active {
@ -200,6 +216,9 @@ stateDiagram
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
stateDiagram-v2
accTitle: This is a title
accDescr: This is a description
[*] --> Active
state Active {
@ -231,6 +250,9 @@ stateDiagram-v2
imgSnapshotTest(
`
erDiagram
accTitle: This is a title
accDescr: This is a description
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
@ -250,6 +272,9 @@ erDiagram
`
%%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
journey
accTitle: This is a title
accDescr: This is a description
title My working day
section Go to work
Make tea: 5: Me
@ -268,6 +293,9 @@ erDiagram
imgSnapshotTest(
`
gantt
accTitle: This is a title
accDescr: This is a description
dateFormat :YYYY-MM-DD
title :Adding GANTT diagram functionality to mermaid
excludes :excludes the named dates/days from being included in a charted task..

31
cypress/platform/knsv.html
View File

@ -31,23 +31,24 @@
<div class="mermaid" style="width: 50%;">
graph LR
subgraph id1 [title is set]
A-->B
end
subgraph id2 [title]
E
end
sequenceDiagram
accTitle: This is a title
accDescr: This is a description
B-->C
subgraph id3
C-->D
autonumber
par Action 1
Alice->>John: Hello John, how are you?
and Action 2
Alice->>Bob: Hello Bob, how are you?
end
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
Note right of John: John is perceptive
John-->>-Alice: I feel great!
loop Every minute
John-->Alice: Great!
end
class id3,id2,A redBg;
class id3,A whiteTxt;
classDef redBg fill:#622;
classDef whiteTxt color: white;
</div>
<div class="mermaid2" style="width: 100%;">
journey

2
src/diagrams/pie/parser/pie.jison
View File

@ -69,7 +69,7 @@ line
statement
:
| txt value { yy.addSection($1,yy.cleanupValue($2)); }
| title title_value { $$=$2.trim();yy.setTitle($$); }
| title title_value { $$=$2.trim();yy.setPieTitle($$); }
| acc_title acc_title_value { $$=$2.trim();yy.setTitle($$); }
| acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); }
| acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); } | section {yy.addSection($1.substr(8));$$=$1.substr(8);}

11
src/diagrams/pie/pieDb.js
View File

@ -52,6 +52,15 @@ const clear = function () {
commonClear();
};
export const setPieTitle = function (txt) {
let sanitizedText = common.sanitizeText(txt, configApi.getConfig());
title = sanitizedText;
};
export const getPieTitle = function () {
return title;
};
export default {
parseDirective,
getConfig: () => configApi.getConfig().pie,
@ -61,6 +70,8 @@ export default {
clear,
setTitle,
getTitle,
setPieTitle,
getPieTitle,
setShowData,
getShowData,
getAccDescription,

2
src/diagrams/pie/pieRenderer.js
View File

@ -136,7 +136,7 @@ export const draw = (txt, id) => {
svg
.append('text')
.text(parser.yy.getTitle())
.text(parser.yy.getPieTitle())
.attr('x', 0)
.attr('y', -(height - 50) / 2)
.attr('class', 'pieTitleText');

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

@ -136,8 +136,8 @@ statement
| link_statement 'NEWLINE'
| properties_statement 'NEWLINE'
| details_statement 'NEWLINE'
| title {yy.setTitle($1.substring(6));$$=$1.substring(6);}
| legacy_title {yy.setTitle($1.substring(7));$$=$1.substring(7);}
| title {yy.setDiagramTitle($1.substring(6));$$=$1.substring(6);}
| legacy_title {yy.setDiagramTitle($1.substring(7));$$=$1.substring(7);}
| acc_title acc_title_value { $$=$2.trim();yy.setTitle($$); }
| acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); }
| acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }

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

@ -14,7 +14,7 @@ let prevActor = undefined;
let actors = {};
let messages = [];
const notes = [];
let title = '';
let diagramTitle = '';
let description = '';
let sequenceNumbersEnabled = false;
let wrapEnabled = false;
@ -144,6 +144,7 @@ export const clear = function () {
actors = {};
messages = [];
sequenceNumbersEnabled = false;
diagramTitle = '';
commonClear();
};
@ -330,6 +331,15 @@ export const getActorProperty = function (actor, key) {
return undefined;
};
export const setDiagramTitle = function (txt) {
let sanitizedText = sanitizeText(txt, configApi.getConfig());
diagramTitle = sanitizedText;
};
export const getDiagramTitle = function () {
return diagramTitle;
};
export const apply = function (param) {
if (param instanceof Array) {
param.forEach(function (item) {
@ -441,6 +451,7 @@ export default {
getActorKeys,
getActorProperty,
getTitle,
getDiagramTitle,
parseDirective,
getConfig: () => configApi.getConfig().sequence,
clear,
@ -450,6 +461,7 @@ export default {
PLACEMENT,
addNote,
setTitle,
setDiagramTitle,
apply,
setAccDescription,
getAccDescription,

2
src/diagrams/sequence/sequenceRenderer.js
View File

@ -612,7 +612,7 @@ export const draw = function (text, id) {
const actors = parser.yy.getActors();
const actorKeys = parser.yy.getActorKeys();
const messages = parser.yy.getMessages();
const title = parser.yy.getTitle();
const title = parser.yy.getDiagramTitle();
const maxMessageWidthPerActor = getMaxMessageWidthPerActor(actors, messages);
conf.height = calculateActorMargins(actors, maxMessageWidthPerActor);