Merge pull request #2919 from khiga8/kh-user-journey

feat: add accessible description and title to user journey
mermaid-js · Apr 12, 2022 · 3c725b9 · 3c725b9
2 parents 7aa037e + cda21c5
commit 3c725b9
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 9 deletions.
diff --git a/demos/journey.html b/demos/journey.html
@@ -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">
+        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
+	</div>
+
+	<script src="./mermaid.js"></script>
+	<script>
+		mermaid.initialize({
+		  theme: 'forest',
+		  logLevel: 3,
+		  securityLevel: 'loose',
+		  flowchart: { curve: 'basis' },
+		  gantt: { axisFormat: '%m/%d/%Y' },
+		  sequence: { actorMargin: 50 },
+		});
+	</script>
+
+</body>
+
+</html>
diff --git 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
@@ -31,19 +31,20 @@ 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);
     });
   });
 
   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
@@ -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
@@ -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
@@ -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' +