+ journey
+ title My day
+ accDescription A user journey diagram of a typical day in my life
+ section Go to work
+ Make tea: 5: Me
+ Go upstairs: 3: Me
+ Do work: 1: Me, Cat
+ section Go home
+ Go downstairs: 5: Me
+ Sit down: 5: Me
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/diagrams/user-journey/journeyDb.js b/src/diagrams/user-journey/journeyDb.js
index 05bbec5fa..55ea6ec3b 100644
--- a/src/diagrams/user-journey/journeyDb.js
+++ b/src/diagrams/user-journey/journeyDb.js
@@ -2,7 +2,10 @@ import mermaidAPI from '../../mermaidAPI';
import * as configApi from '../../config';
import common from '../common/common';
+const sanitizeText = (txt) => common.sanitizeText(txt, configApi.getConfig());
+
let title = '';
+let description = '';
let currentSection = '';
const sections = [];
@@ -18,18 +21,26 @@ export const clear = function () {
tasks.length = 0;
currentSection = '';
title = '';
+ description = '';
rawTasks.length = 0;
};
-export const setTitle = function (txt) {
- let sanitizedText = common.sanitizeText(txt, configApi.getConfig());
- title = sanitizedText;
+const setTitle = function (txt) {
+ title = sanitizeText(txt);
};
-export const getTitle = function () {
+const getTitle = function () {
return title;
};
+const setAccDescription = function (txt) {
+ description = sanitizeText(txt);
+};
+
+const getAccDescription = function () {
+ return description;
+};
+
export const addSection = function (txt) {
currentSection = txt;
sections.push(txt);
@@ -125,6 +136,8 @@ export default {
clear,
setTitle,
getTitle,
+ setAccDescription,
+ getAccDescription,
addSection,
getSections,
getTasks,
diff --git a/src/diagrams/user-journey/journeyDb.spec.js b/src/diagrams/user-journey/journeyDb.spec.js
index f97e1eb0a..b4738fdac 100644
--- a/src/diagrams/user-journey/journeyDb.spec.js
+++ b/src/diagrams/user-journey/journeyDb.spec.js
@@ -31,12 +31,12 @@ describe('when using the journeyDb', function () {
journeyDb.addTask('test2', '1: id2');
journeyDb.clear();
});
-
it.each`
- fn | expected
- ${'getTasks'} | ${[]}
- ${'getTitle'} | ${''}
- ${'getSections'} | ${[]}
+ fn | expected
+ ${'getTasks'} | ${[]}
+ ${'getTitle'} | ${''}
+ ${'getAccDescription'} | ${''}
+ ${'getSections'} | ${[]}
`('should clear $fn', ({ fn, expected }) => {
expect(journeyDb[fn]()).toEqual(expected);
});
@@ -44,6 +44,7 @@ describe('when using the journeyDb', function () {
describe('tasks and actors should be added', function () {
journeyDb.setTitle('Shopping');
+ journeyDb.setAccDescription('A user journey for family shopping');
journeyDb.addSection('Journey to the shops');
journeyDb.addTask('Get car keys', ':5:Dad');
journeyDb.addTask('Go to car', ':3:Dad, Mum, Child#1, Child#2');
@@ -52,6 +53,7 @@ describe('when using the journeyDb', function () {
journeyDb.addTask('Go shopping', ':5:Mum');
expect(journeyDb.getTitle()).toEqual('Shopping');
+ expect(journeyDb.getAccDescription()).toEqual('A user journey for family shopping');
expect(journeyDb.getTasks()).toEqual([
{
score: 5,
diff --git a/src/diagrams/user-journey/journeyRenderer.js b/src/diagrams/user-journey/journeyRenderer.js
index 7ce2caa68..612a89123 100644
--- a/src/diagrams/user-journey/journeyRenderer.js
+++ b/src/diagrams/user-journey/journeyRenderer.js
@@ -4,6 +4,7 @@ import journeyDb from './journeyDb';
import svgDraw from './svgDraw';
import { getConfig } from '../../config';
import { configureSvgSize } from '../../utils';
+import addSVGAccessibilityFields from '../../accessibility';
parser.yy = journeyDb;
@@ -100,6 +101,7 @@ export const draw = function (text, id) {
.attr('font-weight', 'bold')
.attr('y', 25);
}
+
const height = box.stopy - box.starty + 2 * conf.diagramMarginY;
const width = LEFT_MARGIN + box.stopx + 2 * conf.diagramMarginX;
@@ -120,6 +122,8 @@ export const draw = function (text, id) {
diagram.attr('viewBox', `${box.startx} -25 ${width} ${height + extraVertForTitle}`);
diagram.attr('preserveAspectRatio', 'xMinYMin meet');
diagram.attr('height', height + extraVertForTitle + 25);
+
+ addSVGAccessibilityFields(parser.yy, diagram, id);
};
export const bounds = {
diff --git a/src/diagrams/user-journey/parser/journey.jison b/src/diagrams/user-journey/parser/journey.jison
index e4282ea51..37d493d3e 100644
--- a/src/diagrams/user-journey/parser/journey.jison
+++ b/src/diagrams/user-journey/parser/journey.jison
@@ -25,6 +25,7 @@
"journey" return 'journey';
"title"\s[^#\n;]+ return 'title';
+"accDescription"\s[^#\n;]+ return 'accDescription';
"section"\s[^#:\n;]+ return 'section';
[^#:\n;]+ return 'taskName';
":"[^#\n;]+ return 'taskData';
@@ -64,6 +65,7 @@ directive
statement
: title {yy.setTitle($1.substr(6));$$=$1.substr(6);}
+ | accDescription {yy.setAccDescription($1.substring(15));$$=$1.substring(15);}
| section {yy.addSection($1.substr(8));$$=$1.substr(8);}
| taskName taskData {yy.addTask($1, $2);$$='task';}
| directive
diff --git a/src/diagrams/user-journey/parser/journey.spec.js b/src/diagrams/user-journey/parser/journey.spec.js
index 71dd03a17..6cf604caf 100644
--- a/src/diagrams/user-journey/parser/journey.spec.js
+++ b/src/diagrams/user-journey/parser/journey.spec.js
@@ -19,6 +19,16 @@ describe('when parsing a journey diagram it', function () {
expect(parserFnConstructor(str)).not.toThrow();
});
+ it('it should handle an accDescription', function () {
+ const str =
+ 'journey\n' +
+ 'accDescription A user journey for family shopping\n' +
+ 'title Adding journey diagram functionality to mermaid\n' +
+ 'section Order from website';
+
+ expect(parserFnConstructor(str)).not.toThrow();
+ });
+
it('should handle a section definition', function () {
const str =
'journey\n' +