Merge pull request #2912 from el-mapache/feat/gantt-diagram-accessibility

Adds accDescription to Gantt, draws tags to svg

src/diagrams/gantt/ganttDb.js

@@ -4,6 +4,7 @@ import { log } from '../../logger';
 import * as configApi from '../../config';
 import utils from '../../utils';
 import mermaidAPI from '../../mermaidAPI';
+import common from '../common/common';
 
 let dateFormat = '';
 let axisFormat = '';
@@ -12,6 +13,7 @@ let includes = [];
 let excludes = [];
 let links = {};
 let title = '';
+let accDescription = '';
 let sections = [];
 let tasks = [];
 let currentSection = '';
@@ -23,6 +25,10 @@ let topAxis = false;
 // The serial order of the task in the script
 let lastOrder = 0;
 
+const sanitizeText = function (txt) {
+  return common.sanitizeText(txt, configApi.getConfig());
+};
+
 export const parseDirective = function (statement, context, type) {
   mermaidAPI.parseDirective(this, statement, context, type);
 };
@@ -108,13 +114,21 @@ export const getLinks = function () {
 };
 
 export const setTitle = function (txt) {
-  title = txt;
+  title = sanitizeText(txt);
 };
 
 export const getTitle = function () {
   return title;
 };
 
+export const setAccDescription = function (txt) {
+  accDescription = sanitizeText(txt);
+};
+
+export const getAccDescription = function () {
+  return accDescription;
+};
+
 export const addSection = function (txt) {
   currentSection = txt;
   sections.push(txt);
@@ -637,6 +651,8 @@ export default {
   getTodayMarker,
   setTitle,
   getTitle,
+  setAccDescription,
+  getAccDescription,
   addSection,
   getSections,
   getTasks,

src/diagrams/gantt/ganttDb.spec.js

@@ -32,6 +32,7 @@ describe('when using the ganttDb', function () {
       fn                        | expected
       ${'getTasks'}             | ${[]}
       ${'getTitle'}             | ${''}
+      ${'getAccDescription'}    | ${''}
       ${'getDateFormat'}        | ${''}
       ${'getAxisFormat'}        | ${''}
       ${'getTodayMarker'}       | ${''}

src/diagrams/gantt/ganttRenderer.js

@@ -15,6 +15,7 @@ import common from '../common/common';
 import ganttDb from './ganttDb';
 import { getConfig } from '../../config';
 import { configureSvgSize } from '../../utils';
+import addSVGAccessibilityFields from '../../accessibility'
 
 parser.yy = ganttDb;
 export const setConf = function () {
@@ -114,6 +115,8 @@ export const draw = function (text, id) {
     .attr('y', conf.titleTopMargin)
     .attr('class', 'titleText');
 
+  addSVGAccessibilityFields(parser.yy, svg, id);
+
   /**
    * @param tasks
    * @param pageWidth

src/diagrams/gantt/parser/gantt.jison

@@ -65,22 +65,23 @@ that id.
 <click>[\s\n]           this.popState();
 <click>[^\s\n]*         return 'click';
 
-"gantt"                 return 'gantt';
-"dateFormat"\s[^#\n;]+  return 'dateFormat';
-"inclusiveEndDates"     return 'inclusiveEndDates';
-"topAxis"               return 'topAxis';
-"axisFormat"\s[^#\n;]+  return 'axisFormat';
-"includes"\s[^#\n;]+    return 'includes';
-"excludes"\s[^#\n;]+    return 'excludes';
-"todayMarker"\s[^\n;]+  return 'todayMarker';
-\d\d\d\d"-"\d\d"-"\d\d  return 'date';
-"title"\s[^#\n;]+       return 'title';
-"section"\s[^#:\n;]+    return 'section';
-[^#:\n;]+               return 'taskTxt';
-":"[^#\n;]+             return 'taskData';
-":"                     return ':';
-<<EOF>>                 return 'EOF';
-.                       return 'INVALID';
+"gantt"                     return 'gantt';
+"dateFormat"\s[^#\n;]+      return 'dateFormat';
+"inclusiveEndDates"         return 'inclusiveEndDates';
+"topAxis"                   return 'topAxis';
+"axisFormat"\s[^#\n;]+      return 'axisFormat';
+"includes"\s[^#\n;]+        return 'includes';
+"excludes"\s[^#\n;]+        return 'excludes';
+"todayMarker"\s[^\n;]+      return 'todayMarker';
+\d\d\d\d"-"\d\d"-"\d\d      return 'date';
+"title"\s[^#\n;]+           return 'title';
+"accDescription"\s[^#\n;]+  return 'accDescription'
+"section"\s[^#:\n;]+        return 'section';
+[^#:\n;]+                   return 'taskTxt';
+":"[^#\n;]+                 return 'taskData';
+":"                         return ':';
+<<EOF>>                     return 'EOF';
+.                           return 'INVALID';
 
 /lex
 
@@ -116,6 +117,7 @@ statement
   | includes {yy.setIncludes($1.substr(9));$$=$1.substr(9);}
   | todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);}
   | title {yy.setTitle($1.substr(6));$$=$1.substr(6);}
+  | accDescription {yy.setAccDescription($1.substr(15));$$=$1.substr(15);}
   | section {yy.addSection($1.substr(8));$$=$1.substr(8);}
   | clickStatement
   | taskTxt taskData {yy.addTask($1,$2);$$='task';}

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

@@ -156,4 +156,21 @@ describe('when parsing a gantt diagram it', function () {
       '"test0", test1, test2'
     );
   });
+
+  it('should allow for a title and accDescription', function () {
+    const expectedTitle = 'Gantt Diagram';
+    const expectedAccDescription = 'Tasks for Q4';
+    const ganttString =
+      'gantt\n' +
+      `title ${expectedTitle}\n` +
+      `accDescription ${expectedAccDescription}\n` +
+      'dateFormat  YYYY-MM-DD\n' +
+      'section Section\n' +
+      'A task :a1, 2014-01-01, 30d\n';
+
+    const output = parser.parse(ganttString);
+
+    expect(ganttDb.getTitle()).toBe(expectedTitle);
+    expect(ganttDb.getAccDescription()).toBe(expectedAccDescription);
+  });
 });

src/diagrams/sequence/sequenceDiagram.spec.js

@@ -21,7 +21,7 @@ describe('when parsing a sequenceDiagram', function () {
     parser.yy = sequenceDb;
     parser.yy.clear();
   });
-  it('it should handle a sequenceDiagram definition', function () {
+  it('should handle a sequenceDiagram definition', function () {
     const str = `
 sequenceDiagram
 Alice->Bob:Hello Bob, how are you?