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

Separation between title and accessibility title (sometimes)

cypress/platform/knsv.html

@@ -30,26 +30,78 @@
 
 
 
-      <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
 
     linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
         </div>
       <div class="mermaid2" style="width: 100%;">
-journey
-            title My working day
-            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
+  journey
+      accTitle: My User Journey Diagram
+      accDescr: My User Journey Diagram Description
+
+      title My working day
+      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>
       <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 @@
       </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 @@
       </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 @@
   </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 @@
       </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 () {
-  return title;
+export const getAccTitle = function () {
+  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);
-  // keys.forEach(function(key) {
-  //   conf[key] = cnf[key];
-  // });
+  log.debug('Something is calling, setConf, remove the call');
 };
+
 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');