feat(accessibility): add accessibility attributes to sequence diagrams

src/diagrams/sequence/parser/sequenceDiagram.jison

@@ -33,7 +33,7 @@
 \%%(?!\{)[^\n]*                                                 /* skip comments */
 [^\}]\%\%[^\n]*                                                 /* skip comments */
 "participant"                                                   { this.begin('ID'); return 'participant'; }
-"actor"                                                   			{ this.begin('ID'); return 'participant_actor'; }
+"actor"                                                   	{ this.begin('ID'); return 'participant_actor'; }
 <ID>[^\->:\n,;]+?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$)           { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
 <ALIAS>"as"                                                     { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
 <ALIAS>(?:)                                                     { this.popState(); this.popState(); return 'NEWLINE'; }
@@ -57,6 +57,7 @@
 "activate"                                                      { this.begin('ID'); return 'activate'; }
 "deactivate"                                                    { this.begin('ID'); return 'deactivate'; }
 "title"                                                         return 'title';
+"accDescription"\s[^#\n;]+       				return 'accDescription';
 "sequenceDiagram"                                               return 'SD';
 "autonumber"                                                    return 'autonumber';
 ","                                                             return ',';
@@ -122,6 +123,7 @@ statement
 	| properties_statement 'NEWLINE'
 	| details_statement 'NEWLINE'
 	| title text2 'NEWLINE' {$$=[{type:'setTitle', text:$2}]}
+	| accDescription {yy.setAccDescription($1.substring(15));$$=$1.substring(15);}
 	| 'loop' restOfLine document end
 	{
 		$3.unshift({type: 'loopStart', loopText:yy.parseMessage($2), signalType: yy.LINETYPE.LOOP_START});

src/diagrams/sequence/sequenceDb.js

@@ -8,6 +8,7 @@ let actors = {};
 let messages = [];
 const notes = [];
 let title = '';
+let description = '';
 let titleWrapped = false;
 let sequenceNumbersEnabled = false;
 let wrapEnabled = false;
@@ -408,6 +409,14 @@ export const apply = function (param) {
   }
 };
 
+const setAccDescription = function (description_lex) {
+  description = description_lex;
+};
+
+const getAccDescription = function () {
+  return description;
+};
+
 export default {
   addActor,
   addMessage,
@@ -436,4 +445,6 @@ export default {
   addNote,
   setTitle,
   apply,
+  setAccDescription,
+  getAccDescription,
 };

src/diagrams/sequence/sequenceDiagram.spec.js

@@ -73,6 +73,7 @@ Bob-->Alice: I am good thanks!`;
     expect(actors.Alice.description).toBe('Alice');
     actors.Bob.description = 'Bob';
 
+    expect(parser.yy.getAccDescription()).toBe('');
     const messages = parser.yy.getMessages();
     const title = parser.yy.getTitle();
 
@@ -81,6 +82,28 @@ Bob-->Alice: I am good thanks!`;
     expect(messages[2].from).toBe('Bob');
     expect(title).toBe('Diagram Title');
   });
+  it('it should handle a sequenceDiagram definition with a accDescription', function () {
+    const str = `
+sequenceDiagram
+accDescription: Accessibility Description
+Alice->Bob:Hello Bob, how are you?
+Note right of Bob: Bob thinks
+Bob-->Alice: I am good thanks!`;
+
+    mermaidAPI.parse(str);
+    const actors = parser.yy.getActors();
+    expect(actors.Alice.description).toBe('Alice');
+    actors.Bob.description = 'Bob';
+
+    expect(parser.yy.getAccDescription()).toBe('Accessibility Description');
+    const messages = parser.yy.getMessages();
+    const title = parser.yy.getTitle();
+
+    expect(messages.length).toBe(3);
+    expect(messages[0].from).toBe('Alice');
+    expect(messages[2].from).toBe('Bob');
+  });
+
   it('it should space in actor names', function () {
     const str = `
 sequenceDiagram

src/diagrams/sequence/sequenceRenderer.js

@@ -6,6 +6,7 @@ import common from '../common/common';
 import sequenceDb from './sequenceDb';
 import * as configApi from '../../config';
 import utils, { assignWithDepth, configureSvgSize } from '../../utils';
+import addSVGAccessibilityFields from '../../accessibility';
 
 parser.yy = sequenceDb;
 
@@ -727,6 +728,7 @@ export const draw = function (text, id) {
           log.error('error while drawing message', e);
         }
     }
+
     // Increment sequence counter if msg.type is a line (and not another event like activation or note, etc)
     if (
       [
@@ -802,6 +804,8 @@ export const draw = function (text, id) {
       ' ' +
       (height + extraVertForTitle)
   );
+
+  addSVGAccessibilityFields(parser.yy, diagram, id);
   log.debug(`models:`, bounds.models);
 };