Merge pull request #3075 from mermaid-js/3074_access

Separation between title and accessibility title (sometimes)

cypress/platform/knsv.html

@@ -30,7 +30,54 @@
 
 
 
-      <div class="mermaid" style="width: 50%;">
+<div class="mermaid2" style="width: 50%;">
+      journey
+      title Adding journey diagram functionality to mermaid
+      accTitle: Adding acc journey diagram functionality to mermaid
+      accDescr {
+        My multi-line description
+        of the diagram
+      }
+      section Order from website
+</div>
+<div class="mermaid2" style="width: 50%;">
+   pie
+      accTitle: My Pie Chart Accessibility Title
+      accDescr: My Pie Chart Accessibility Description
+
+    title Key elements in Product X
+    "Calcium" : 42.96
+    "Potassium" : 50.05
+    "Magnesium" : 10.01
+    "Iron" :  5
+</div>
+<div class="mermaid2" style="width: 50%;">
+  gitGraph
+      accTitle: My Gitgraph Accessibility Title
+      accDescr: My Gitgraph Accessibility Description
+
+     commit
+     commit
+     branch develop
+     checkout develop
+     commit
+     commit
+     checkout main
+     merge develop
+     commit
+     commit
+</div>
+<div class="mermaid" style="width: 50%;">
+   sequenceDiagram
+      title: My Sequence Diagram Title
+      accTitle: My Acc Sequence Diagram
+      accDescr: My Sequence Diagram Description
+
+      Alice->>John: Hello John, how are you?
+      John-->>Alice: Great!
+      Alice-)John: See you later!
+</div>
+      <div class="mermaid2" style="width: 50%;">
 graph TD
     A -->|000| B
     B -->|111| C
@@ -38,7 +85,10 @@ graph TD
     linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
         </div>
       <div class="mermaid2" style="width: 100%;">
-journey
+  journey
+      accTitle: My User Journey Diagram
+      accDescr: My User Journey Diagram Description
+
       title My working day
       section Go to work
         Make tea: 5: Me
@@ -50,6 +100,8 @@ journey
       </div>
       <div class="mermaid2" style="width: 100%;">
 requirementDiagram
+      accTitle: My req Diagram
+      accDescr: My req Diagram Description
 
     requirement test_req {
     id: 1
@@ -89,6 +141,8 @@ requirementDiagram
       </div>
       <div class="mermaid2" style="width: 100%;">
       erDiagram
+            accTitle: My er Diagram
+      accDescr: My er Diagram Description
         CUSTOMER }|..|{ DELIVERY-ADDRESS : has
         CUSTOMER ||--o{ ORDER : places
         CUSTOMER ||--o{ INVOICE : "liable for"
@@ -100,12 +154,16 @@ requirementDiagram
       </div>
       <div class="mermaid2" style="width: 100%;">
       graph TB
+        accTitle: My flowchart
+        accDescr: My flowchart Description
         subgraph One
           a1-->a2-->a3
         end
       </div>
       <div class="mermaid2" style="width: 100%;">
       gantt
+            accTitle: My gantt chart
+      accDescr: My my gantt chart Description
     dateFormat  YYYY-MM-DD
     axisFormat  %d/%m
     title Adding GANTT diagram to mermaid
@@ -146,6 +204,8 @@ requirementDiagram
   </div>
       <div class="mermaid2" style="width: 100%;">
 classDiagram
+accTitle: My class diagram
+accDescr: My class diagram Description
 Class01 <|-- AveryLongClass : Cool
 Class09 --> C2 : Where am i?
 Class09 --* C3
@@ -162,6 +222,8 @@ class Class10 {
       </div>
       <div class="mermaid2" style="width: 100%;">
         stateDiagram
+        accTitle: Apa
+        accDescr: One that can climb better then any man
       [*] --> S1
       state "Some long name" as S1
       </div>

docs/Setup.md

@@ -9,9 +9,9 @@ This is the API to be used when optionally handling the integration with the web
 using the default integration provided by mermaid.js.
 
 The core of this api is the [**render**][2] function which, given a graph
-definition as text, renders the graph/diagram and returns an SVG element for the graph.
+definition as text, renders the graph/diagram and returns an svg element for the graph.
 
-It is is then up to the user of the API to make use of the SVG, either insert it somewhere in the
+It is is then up to the user of the API to make use of the svg, either insert it somewhere in the
 page or do something completely different.
 
 In addition to the render function, a number of behavioral configuration options are available.
@@ -1012,7 +1012,7 @@ Pushes in a directive to the configuration
 
 ## render
 
-Function that renders an SVG with a graph from a chart definition. Usage example below.
+Function that renders an svg with a graph from a chart definition. Usage example below.
 
 ```javascript
 mermaidAPI.initialize({
@@ -1031,7 +1031,7 @@ $(function () {
 
 -   `id` **any** The id of the element to be rendered
 -   `_txt` **any** The graph definition
--   `cb` **any** Callback which is called after rendering is finished with the SVG code as inparam.
+-   `cb` **any** Callback which is called after rendering is finished with the svg code as inparam.
 -   `container` **any** Selector to element in which a div with the graph temporarily will be
       inserted. In one is provided a hidden div will be inserted in the body of the page instead. The
       element will be removed when rendering is completed.

src/accessibility.js

@@ -1,6 +1,6 @@
 /**
  * This method will add a basic title and description element to a chart. The yy parser will need to
- * respond to getTitle and getAccDescription, where the title is the title element on the chart,
+ * respond to getAccTitle and getAccDescription, where the title is the title element on the chart,
  * which is generally not displayed and the accDescription is the description element on the chart,
  * which is never displayed.
  *
@@ -15,7 +15,7 @@ export default function addSVGAccessibilityFields(yy_parser, svg, id) {
     return;
   }
 
-  let title_string = yy_parser.getTitle();
+  let title_string = yy_parser.getAccTitle();
   let description = yy_parser.getAccDescription();
   svg.attr('role', 'img').attr('aria-labelledby', 'chart-title-' + id + ' chart-desc-' + id);
   svg

src/commonDb.js

@@ -1,20 +1,22 @@
 import { sanitizeText as _sanitizeText } from './diagrams/common/common';
 import { getConfig } from './config';
 let title = '';
+let diagramTitle = '';
 let description = '';
 const sanitizeText = (txt) => _sanitizeText(txt, getConfig());
 
 export const clear = function () {
   title = '';
   description = '';
+  diagramTitle = '';
 };
 
 export const setAccTitle = function (txt) {
   title = sanitizeText(txt).replace(/^\s+/g, '');
 };
 
-export const getTitle = function () {
+export const getAccTitle = function () {
-  return title;
+  return title || diagramTitle;
 };
 
 export const setAccDescription = function (txt) {
@@ -25,9 +27,19 @@ export const getAccDescription = function () {
   return description;
 };
 
+export const setDiagramTitle = function (txt) {
+  diagramTitle = sanitizeText(txt);
+};
+
+export const getDiagramTitle = function () {
+  return diagramTitle;
+};
+
 export default {
   setAccTitle,
-  getTitle,
+  getAccTitle,
+  setDiagramTitle,
+  getDiagramTitle: getDiagramTitle,
   getAccDescription,
   setAccDescription,
   clear,

src/diagrams/class/classDb.js

@@ -6,7 +6,7 @@ import utils from '../../utils';
 import mermaidAPI from '../../mermaidAPI';
 import {
   setAccTitle,
-  getTitle,
+  getAccTitle,
   getAccDescription,
   setAccDescription,
   clear as commonClear,
@@ -356,7 +356,7 @@ const setDirection = (dir) => {
 export default {
   parseDirective,
   setAccTitle,
-  getTitle,
+  getAccTitle,
   getAccDescription,
   setAccDescription,
   getConfig: () => configApi.getConfig().class,

src/diagrams/class/classDiagram.spec.js

@@ -550,7 +550,7 @@ foo()
             `;
 
       parser.parse(str);
-      expect(parser.yy.getTitle()).toBe('My Title');
+      expect(parser.yy.getAccTitle()).toBe('My Title');
       expect(parser.yy.getAccDescription()).toBe('My Description');
     });
     it('should handle accTitle and multiline accDescr', function () {
@@ -565,7 +565,7 @@ foo()
             `;
 
       parser.parse(str);
-      expect(parser.yy.getTitle()).toBe('My Title');
+      expect(parser.yy.getAccTitle()).toBe('My Title');
       expect(parser.yy.getAccDescription()).toBe('This is mu multi\nline description');
     });
 

src/diagrams/er/erDb.js

@@ -4,7 +4,7 @@ import * as configApi from '../../config';
 import common from '../common/common';
 import {
   setAccTitle,
-  getTitle,
+  getAccTitle,
   getAccDescription,
   setAccDescription,
   clear as commonClear,
@@ -94,7 +94,7 @@ export default {
   getRelationships,
   clear,
   setAccTitle,
-  getTitle,
+  getAccTitle,
   setAccDescription,
   getAccDescription,
 };

src/diagrams/er/parser/erDiagram.spec.js

@@ -191,7 +191,7 @@ describe('when parsing ER diagram it...', function () {
       accDescr: this graph is about stuff
       ${line1}`
     );
-    expect(erDb.getTitle()).toBe('graph title');
+    expect(erDb.getAccTitle()).toBe('graph title');
     expect(erDb.getAccDescription()).toBe('this graph is about stuff');
   });
 
@@ -207,7 +207,7 @@ describe('when parsing ER diagram it...', function () {
       }\n
       ${line1}`
     );
-    expect(erDb.getTitle()).toBe('graph title');
+    expect(erDb.getAccTitle()).toBe('graph title');
     expect(erDb.getAccDescription()).toBe('this graph is about stuff');
   });
 

src/diagrams/flowchart/flowDb.js

@@ -6,7 +6,7 @@ import mermaidAPI from '../../mermaidAPI';
 import { log } from '../../logger';
 import {
   setAccTitle,
-  getTitle,
+  getAccTitle,
   getAccDescription,
   setAccDescription,
   clear as commonClear,
@@ -747,7 +747,7 @@ export default {
   parseDirective,
   defaultConfig: () => configApi.defaultConfig.flowchart,
   setAccTitle,
-  getTitle,
+  getAccTitle,
   getAccDescription,
   setAccDescription,
   addVertex,

src/diagrams/flowchart/parser/flow.spec.js

@@ -168,7 +168,7 @@ describe('parsing a flow chart', function () {
       `;
 
     flow.parser.parse(flowChart);
-    expect(flow.parser.yy.getTitle()).toBe('Big decisions');
+    expect(flow.parser.yy.getAccTitle()).toBe('Big decisions');
     expect(flow.parser.yy.getAccDescription()).toBe('Flow chart of the decision making process');
   });
   it('should add accTitle and a multi line accDescr to flow chart', function () {
@@ -187,7 +187,7 @@ describe('parsing a flow chart', function () {
 `;
 
     flow.parser.parse(flowChart);
-    expect(flow.parser.yy.getTitle()).toBe('Big decisions');
+    expect(flow.parser.yy.getAccTitle()).toBe('Big decisions');
     expect(flow.parser.yy.getAccDescription()).toBe(
       `Flow chart of the decision making process
 with a second line`

src/diagrams/gantt/ganttDb.js

@@ -7,10 +7,12 @@ import mermaidAPI from '../../mermaidAPI';
 import common from '../common/common';
 import {
   setAccTitle,
-  getTitle,
+  getAccTitle,
   getAccDescription,
   setAccDescription,
   clear as commonClear,
+  setDiagramTitle,
+  getDiagramTitle,
 } from '../../commonDb';
 
 let dateFormat = '';
@@ -642,7 +644,9 @@ export default {
   setTodayMarker,
   getTodayMarker,
   setAccTitle,
-  getTitle,
+  getAccTitle,
+  setDiagramTitle,
+  getDiagramTitle,
   setAccDescription,
   getAccDescription,
   addSection,

src/diagrams/gantt/ganttDb.spec.js

@@ -31,7 +31,7 @@ describe('when using the ganttDb', function () {
     it.each`
       fn                        | expected
       ${'getTasks'}             | ${[]}
-      ${'getTitle'}             | ${''}
+      ${'getAccTitle'}          | ${''}
       ${'getAccDescription'}    | ${''}
       ${'getDateFormat'}        | ${''}
       ${'getAxisFormat'}        | ${''}

src/diagrams/gantt/ganttRenderer.js

@@ -1,4 +1,5 @@
 import moment from 'moment-mini';
+import { log } from '../../logger';
 import {
   select,
   scaleTime,
@@ -19,11 +20,9 @@ import addSVGAccessibilityFields from '../../accessibility';
 
 parser.yy = ganttDb;
 export const setConf = function () {
-  // const keys = Object.keys(cnf);
+  log.debug('Something is calling, setConf, remove the call');
-  // keys.forEach(function(key) {
-  //   conf[key] = cnf[key];
-  // });
 };
+
 let w;
 export const draw = function (text, id) {
   const conf = getConfig().gantt;
@@ -110,7 +109,7 @@ export const draw = function (text, id) {
 
   svg
     .append('text')
-    .text(parser.yy.getTitle())
+    .text(parser.yy.getAccTitle())
     .attr('x', w / 2)
     .attr('y', conf.titleTopMargin)
     .attr('class', 'titleText');

src/diagrams/gantt/parser/gantt.jison

@@ -128,7 +128,7 @@ statement
   | excludes {yy.setExcludes($1.substr(9));$$=$1.substr(9);}
   | includes {yy.setIncludes($1.substr(9));$$=$1.substr(9);}
   | todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);}
-  | title {yy.setAccTitle($1.substr(6));$$=$1.substr(6);}
+  | title {yy.setDiagramTitle($1.substr(6));$$=$1.substr(6);}
   | acc_title acc_title_value  { $$=$2.trim();yy.setAccTitle($$); }
   | 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);}

src/diagrams/gantt/parser/gantt.spec.js

@@ -169,7 +169,7 @@ describe('when parsing a gantt diagram it', function () {
 
     parser.parse(ganttString);
 
-    expect(ganttDb.getTitle()).toBe(expectedTitle);
+    expect(ganttDb.getAccTitle()).toBe(expectedTitle);
     expect(ganttDb.getAccDescription()).toBe(expectedAccDescription);
   });
   it('should allow for a accessibility title and multiline description (accDescr)', function () {
@@ -187,7 +187,7 @@ row2`;
 
     parser.parse(ganttString);
 
-    expect(ganttDb.getTitle()).toBe(expectedTitle);
+    expect(ganttDb.getAccTitle()).toBe(expectedTitle);
     expect(ganttDb.getAccDescription()).toBe(expectedAccDescription);
   });
 });

src/diagrams/git/gitGraphAst.js

@@ -6,7 +6,7 @@ import { getConfig } from '../../config';
 import common from '../common/common';
 import {
   setAccTitle,
-  getTitle,
+  getAccTitle,
   getAccDescription,
   setAccDescription,
   clear as commonClear,
@@ -413,7 +413,7 @@ export default {
   getDirection,
   getHead,
   setAccTitle,
-  getTitle,
+  getAccTitle,
   getAccDescription,
   setAccDescription,
   commitType,

src/diagrams/git/gitGraphParserV2.spec.js

@@ -660,7 +660,7 @@ describe('when parsing a gitGraph', function () {
     commit
     `;
       parser.parse(str);
-      expect(parser.yy.getTitle()).toBe('This is a title');
+      expect(parser.yy.getAccTitle()).toBe('This is a title');
       expect(parser.yy.getAccDescription()).toBe('This is a description');
     });
     it('should handle a title and a multiline description (accDescr)', () => {
@@ -673,7 +673,7 @@ describe('when parsing a gitGraph', function () {
     commit
     `;
       parser.parse(str);
-      expect(parser.yy.getTitle()).toBe('This is a title');
+      expect(parser.yy.getAccTitle()).toBe('This is a title');
       expect(parser.yy.getAccDescription()).toBe('This is a description\nusing multiple lines');
     });
   });

src/diagrams/pie/parser/pie.jison

@@ -69,7 +69,7 @@ line
 statement
   :
 	| txt value          { yy.addSection($1,yy.cleanupValue($2)); }
-	| title title_value  { $$=$2.trim();yy.setPieTitle($$); }
+	| title title_value  { $$=$2.trim();yy.setDiagramTitle($$); }
   | acc_title acc_title_value  { $$=$2.trim();yy.setAccTitle($$); }
   | 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);}

src/diagrams/pie/parser/pie.spec.js

@@ -56,7 +56,7 @@ pie
 "bat" : 40
 `);
     const sections = pieDb.getSections();
-    const title = pieDb.getPieTitle();
+    const title = pieDb.getDiagramTitle();
     const section1 = sections['ash'];
     expect(section1).toBe(60);
     expect(title).toBe('a 60/40 pie');
@@ -69,7 +69,7 @@ pie
 `);
 
     const sections = pieDb.getSections();
-    const title = pieDb.getPieTitle();
+    const title = pieDb.getDiagramTitle();
     const description = pieDb.getAccDescription();
     const section1 = sections['ash'];
     expect(section1).toBe(60);
@@ -85,7 +85,7 @@ pie
 `);
 
     const sections = pieDb.getSections();
-    const title = pieDb.getPieTitle();
+    const title = pieDb.getDiagramTitle();
     const description = pieDb.getAccDescription();
     const section1 = sections['ash'];
     expect(section1).toBe(60);
@@ -103,7 +103,7 @@ pie
 `);
 
     const sections = pieDb.getSections();
-    const title = pieDb.getPieTitle();
+    const title = pieDb.getDiagramTitle();
     const description = pieDb.getAccDescription();
     const section1 = sections['ash'];
     expect(section1).toBe(60);

src/diagrams/pie/pieDb.js

@@ -4,7 +4,9 @@ import * as configApi from '../../config';
 import common from '../common/common';
 import {
   setAccTitle,
-  getTitle,
+  getAccTitle,
+  setDiagramTitle,
+  getDiagramTitle,
   getAccDescription,
   setAccDescription,
   clear as commonClear,
@@ -52,15 +54,6 @@ 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,
@@ -69,9 +62,9 @@ export default {
   cleanupValue,
   clear,
   setAccTitle,
-  getTitle,
+  getAccTitle,
-  setPieTitle,
+  setDiagramTitle,
-  getPieTitle,
+  getDiagramTitle,
   setShowData,
   getShowData,
   getAccDescription,

src/diagrams/pie/pieRenderer.js

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

src/diagrams/requirement/parser/requirementDiagram.spec.js

@@ -86,7 +86,7 @@ describe('when parsing requirement diagram it...', function () {
 
     reqDiagram.parser.parse(doc);
 
-    expect(requirementDb.getTitle()).toBe(expectedTitle);
+    expect(requirementDb.getAccTitle()).toBe(expectedTitle);
     expect(requirementDb.getAccDescription()).toBe(expectedAccDescription);
   });
 
@@ -107,7 +107,7 @@ line 2`;
 
     reqDiagram.parser.parse(doc);
 
-    expect(requirementDb.getTitle()).toBe(expectedTitle);
+    expect(requirementDb.getAccTitle()).toBe(expectedTitle);
     expect(requirementDb.getAccDescription()).toBe(expectedAccDescription);
   });
 

src/diagrams/requirement/requirementDb.js

@@ -4,7 +4,7 @@ import mermaidAPI from '../../mermaidAPI';
 import common from '../common/common';
 import {
   setAccTitle,
-  getTitle,
+  getAccTitle,
   getAccDescription,
   setAccDescription,
   clear as commonClear,
@@ -163,7 +163,7 @@ export default {
   setNewReqRisk,
   setNewReqVerifyMethod,
   setAccTitle,
-  getTitle,
+  getAccTitle,
   setAccDescription,
   getAccDescription,
 

src/diagrams/sequence/sequenceDb.js

@@ -4,7 +4,9 @@ import { log } from '../../logger';
 import { sanitizeText } from '../common/common';
 import {
   setAccTitle,
-  getTitle,
+  getAccTitle,
+  setDiagramTitle,
+  getDiagramTitle,
   getAccDescription,
   setAccDescription,
   clear as commonClear,
@@ -331,15 +333,6 @@ 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) {
@@ -450,8 +443,9 @@ export default {
   getActor,
   getActorKeys,
   getActorProperty,
-  getTitle,
+  getAccTitle,
   getDiagramTitle,
+  setDiagramTitle,
   parseDirective,
   getConfig: () => configApi.getConfig().sequence,
   clear,
@@ -461,7 +455,6 @@ export default {
   PLACEMENT,
   addNote,
   setAccTitle,
-  setDiagramTitle,
   apply,
   setAccDescription,
   getAccDescription,

src/diagrams/sequence/sequenceDiagram.spec.js

@@ -119,7 +119,7 @@ Alice->Bob:Hello Bob, how are you?
 
     mermaidAPI.parse(str);
     expect(parser.yy.getDiagramTitle()).toBe('Diagram Title');
-    expect(parser.yy.getTitle()).toBe('This is the title');
+    expect(parser.yy.getAccTitle()).toBe('This is the title');
     expect(parser.yy.getAccDescription()).toBe('Accessibility Description');
     const messages = parser.yy.getMessages();
   });
@@ -135,7 +135,7 @@ Alice->Bob:Hello Bob, how are you?
 `;
 
     mermaidAPI.parse(str);
-    expect(parser.yy.getTitle()).toBe('This is the title');
+    expect(parser.yy.getAccTitle()).toBe('This is the title');
     expect(parser.yy.getAccDescription()).toBe('Accessibility\nDescription');
     const messages = parser.yy.getMessages();
   });

src/diagrams/state/stateDb.js

@@ -5,7 +5,7 @@ import common from '../common/common';
 import * as configApi from '../../config';
 import {
   setAccTitle,
-  getTitle,
+  getAccTitle,
   getAccDescription,
   setAccDescription,
   clear as commonClear,
@@ -92,7 +92,7 @@ const extract = (_doc) => {
   //   doc = root;
   // }
   log.info(doc);
-  clear();
+  clear(true);
 
   log.info('Extract', doc);
 
@@ -171,7 +171,7 @@ export const addState = function (id, type, doc, descr, note) {
   }
 };
 
-export const clear = function () {
+export const clear = function (saveCommon) {
   documents = {
     root: newDoc(),
   };
@@ -182,7 +182,9 @@ export const clear = function () {
   startCnt = 0;
   endCnt = 0; // eslint-disable-line
   classes = [];
+  if (!saveCommon) {
     commonClear();
+  }
 };
 
 export const getState = function (id) {
@@ -283,7 +285,6 @@ export default {
   addRelation,
   getDividerId,
   setDirection,
-  // addDescription,
   cleanupLabel,
   lineType,
   relationType,
@@ -293,7 +294,7 @@ export default {
   getRootDocV2,
   extract,
   trimColon,
-  getTitle,
+  getAccTitle,
   setAccTitle,
   getAccDescription,
   setAccDescription,

src/diagrams/state/stateDiagram-v2.spec.js

@@ -48,7 +48,7 @@ describe('state diagram, ', function () {
       `;
 
       parser.parse(str);
-      const title = stateDb.getTitle();
+      const title = stateDb.getAccTitle();
       expect(title).toBe('a simple title of the diagram');
     });
     it('simple with directive', function () {

src/diagrams/state/stateDiagram.spec.js

@@ -63,7 +63,7 @@ describe('state diagram, ', function () {
       `;
 
       parser.parse(str);
-      const title = stateDb.getTitle();
+      const title = stateDb.getAccTitle();
       expect(title).toBe('a simple title of the diagram');
     });
     it('simple with directive', function () {

src/diagrams/user-journey/journeyDb.js

@@ -3,7 +3,9 @@ import * as configApi from '../../config';
 import common from '../common/common';
 import {
   setAccTitle,
-  getTitle,
+  getAccTitle,
+  setDiagramTitle,
+  getDiagramTitle,
   getAccDescription,
   setAccDescription,
   clear as commonClear,
@@ -126,8 +128,10 @@ export default {
   parseDirective,
   getConfig: () => configApi.getConfig().journey,
   clear,
+  setDiagramTitle,
+  getDiagramTitle,
   setAccTitle,
-  getTitle,
+  getAccTitle,
   setAccDescription,
   getAccDescription,
   addSection,

src/diagrams/user-journey/journeyDb.spec.js

@@ -16,7 +16,7 @@ describe('when using the journeyDb', function () {
     it.each`
       fn               | expected
       ${'getTasks'}    | ${[]}
-      ${'getTitle'}    | ${''}
+      ${'getAccTitle'} | ${''}
       ${'getSections'} | ${[]}
       ${'getActors'}   | ${[]}
     `('should clear $fn', ({ fn, expected }) => {
@@ -34,7 +34,7 @@ describe('when using the journeyDb', function () {
     it.each`
       fn                     | expected
       ${'getTasks'}          | ${[]}
-      ${'getTitle'}          | ${''}
+      ${'getAccTitle'}       | ${''}
       ${'getAccDescription'} | ${''}
       ${'getSections'}       | ${[]}
     `('should clear $fn', ({ fn, expected }) => {
@@ -52,7 +52,7 @@ describe('when using the journeyDb', function () {
     journeyDb.addSection('Do shopping');
     journeyDb.addTask('Go shopping', ':5:Mum');
 
-    expect(journeyDb.getTitle()).toEqual('Shopping');
+    expect(journeyDb.getAccTitle()).toEqual('Shopping');
     expect(journeyDb.getAccDescription()).toEqual('A user journey for family shopping');
     expect(journeyDb.getTasks()).toEqual([
       {

src/diagrams/user-journey/journeyRenderer.js

@@ -74,7 +74,7 @@ export const draw = function (text, id) {
   svgDraw.initGraphics(diagram);
 
   const tasks = parser.yy.getTasks();
-  const title = parser.yy.getTitle();
+  const title = parser.yy.getDiagramTitle();
 
   const actorNames = parser.yy.getActors();
   for (let member in actors) delete actors[member];

src/diagrams/user-journey/parser/journey.jison

@@ -73,7 +73,7 @@ directive
   ;
 
 statement
-  : title {yy.setAccTitle($1.substr(6));$$=$1.substr(6);}
+  : title {yy.setDiagramTitle($1.substr(6));$$=$1.substr(6);}
   | acc_title acc_title_value  { $$=$2.trim();yy.setAccTitle($$); }
   | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
   | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }

src/diagrams/user-journey/parser/journey.spec.js

@@ -36,11 +36,13 @@ describe('when parsing a journey diagram it', function () {
         family shopping
       }` +
       'title Adding journey diagram functionality to mermaid\n' +
+      'accTitle: Adding acc journey diagram functionality to mermaid\n' +
       'section Order from website';
 
     expect(parserFnConstructor(str)).not.toThrow();
     expect(journeyDb.getAccDescription()).toBe('A user journey for\nfamily shopping');
-    expect(journeyDb.getTitle()).toBe('Adding journey diagram functionality to mermaid');
+    expect(journeyDb.getDiagramTitle()).toBe('Adding journey diagram functionality to mermaid');
+    expect(journeyDb.getAccTitle()).toBe('Adding acc journey diagram functionality to mermaid');
   });
   it('it should handle an accessibility title (accDescr)', function () {
     const str = `journey
@@ -49,7 +51,7 @@ describe('when parsing a journey diagram it', function () {
 
     expect(parserFnConstructor(str)).not.toThrow();
     expect(journeyDb.getAccDescription()).toBe('');
-    expect(journeyDb.getTitle()).toBe('The title');
+    expect(journeyDb.getAccTitle()).toBe('The title');
   });
 
   it('should handle a section definition', function () {