#2732 Regression fixes for accessibility

cypress/integration/rendering/gantt.spec.js

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

cypress/integration/rendering/requirement.spec.js

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

cypress/integration/rendering/sequencediagram.spec.js

@@ -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');

cypress/integration/rendering/theme.spec.js

@@ -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..

cypress/platform/gitgraph.html

@@ -34,8 +34,8 @@
               "git0": "#550055"
        } } }%%
        gitGraph
-       accTitle: "Git Graph"
+      accTitle: "Git Graph"
-       accDescr {
+      accDescr {
         Git Graph description.
         Multiline description
       }

cypress/platform/knsv.html

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

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.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);}

src/diagrams/pie/pieDb.js

@@ -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,

src/diagrams/pie/pieRenderer.js

@@ -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');

src/diagrams/sequence/parser/sequenceDiagram.jison

@@ -136,8 +136,8 @@ statement
 	| link_statement 'NEWLINE'
 	| properties_statement 'NEWLINE'
 	| details_statement 'NEWLINE'
-	| title {yy.setTitle($1.substring(6));$$=$1.substring(6);}
+	| title {yy.setDiagramTitle($1.substring(6));$$=$1.substring(6);}
-	| legacy_title {yy.setTitle($1.substring(7));$$=$1.substring(7);}
+	| 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($$); }

src/diagrams/sequence/sequenceDb.js

@@ -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,

src/diagrams/sequence/sequenceRenderer.js

@@ -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);