Add accDescription field to state diagrams

src/diagrams/state/parser/stateDiagram.jison

@@ -20,6 +20,7 @@
 %x STATE_ID
 %x ALIAS
 %x SCALE
+%x accDescription
 %x NOTE
 %x NOTE_ID
 %x NOTE_TEXT
@@ -58,6 +59,9 @@
 <SCALE>\d+            return 'WIDTH';
 <SCALE>\s+"width"     {this.popState();}
 
+accDescription                                                  { this.begin("accDescription");return 'accDescription'; }
+<accDescription>(?!\n|;|#)*[^\n]*                               { this.popState(); return "description_value"; }
+
 <INITIAL,struct>"state"\s+            { /*console.log('Starting STATE zxzx'+yy.getDirection());*/this.pushState('STATE'); }
 <STATE>.*"<<fork>>"                   {this.popState();yytext=yytext.slice(0,-8).trim(); /*console.warn('Fork Fork: ',yytext);*/return 'FORK';}
 <STATE>.*"<<join>>"                   {this.popState();yytext=yytext.slice(0,-8).trim();/*console.warn('Fork Join: ',yytext);*/return 'JOIN';}
@@ -193,6 +197,7 @@ statement
     | note NOTE_TEXT AS ID
   	| directive
     | direction
+    | accDescription description_value  { $$=$2.trim();yy.setAccDescription($$); }
     ;
 
 directive

src/diagrams/state/stateDb.js

@@ -115,6 +115,16 @@ let startCnt = 0;
 let endCnt = 0; // eslint-disable-line
 // let stateCnt = 0;
 
+let description = '';
+
+const setAccDescription = function (txt) {
+  description = txt;
+};
+
+const getAccDescription = function () {
+  return description;
+};
+
 /**
  * Function called by parser when a node definition has been found.
  *
@@ -280,4 +290,6 @@ export default {
   getRootDocV2,
   extract,
   trimColon,
+  getAccDescription,
+  setAccDescription,
 };

src/diagrams/state/stateDiagram.spec.js

@@ -24,6 +24,20 @@ describe('state diagram, ', function () {
       `;
 
       parser.parse(str);
+      const description = stateDb.getAccDescription();
+      expect(description).toBe('');
+    });
+    it.only('simple with accDescription', function () {
+      const str = `stateDiagram\n
+          accDescription a simple description of the diagram
+          State1 : this is another string
+          [*] --> State1
+          State1 --> [*]
+      `;
+
+      parser.parse(str);
+      const description = stateDb.getAccDescription();
+      expect(description).toBe('a simple description of the diagram');
     });
     it('simple with directive', function () {
       const str = `%%{init: {'logLevel': 0 }}%%

src/diagrams/state/stateRenderer-v2.js

@@ -7,6 +7,7 @@ import { render } from '../../dagre-wrapper/index.js';
 import { log } from '../../logger';
 import { configureSvgSize } from '../../utils';
 import common from '../common/common';
+import addSVGAccessibilityFields from '../../accessibility';
 
 const conf = {};
 export const setConf = function (cnf) {
@@ -336,6 +337,7 @@ export const draw = function (text, id) {
     label.insertBefore(rect, label.firstChild);
     // }
   }
+  addSVGAccessibilityFields(parser.yy, svg, id);
 };
 
 export default {

src/diagrams/state/stateRenderer.js

@@ -9,6 +9,7 @@ import { parser } from './parser/stateDiagram';
 import { drawState, addTitleAndBox, drawEdge } from './shapes';
 import { getConfig } from '../../config';
 import { configureSvgSize } from '../../utils';
+import addSVGAccessibilityFields from '../../accessibility';
 
 parser.yy = stateDb;
 
@@ -97,6 +98,7 @@ export const draw = function (text, id) {
     'viewBox',
     `${bounds.x - conf.padding}  ${bounds.y - conf.padding} ` + width + ' ' + height
   );
+  addSVGAccessibilityFields(parser.yy, diagram, id);
 };
 const getLabelWidth = (text) => {
   return text ? text.length * conf.fontSizeFactor : 1;