Merge pull request #2747 from gwincr11/cg-pie-chart-accessibility

feat: add accessibility title and description to pie chart

src/diagrams/pie/parser/pie.jison

@@ -8,6 +8,7 @@
 
 %x string
 %x title
+%x accDescription
 %x open_directive
 %x type_directive
 %x arg_directive
@@ -26,6 +27,8 @@
 [\s]+ 		                                                      /* ignore */
 title                                                           { this.begin("title");return 'title'; }
 <title>(?!\n|;|#)*[^\n]*                                        { this.popState(); return "title_value"; }
+accDescription                                                  { this.begin("accDescription");return 'accDescription'; }
+<accDescription>(?!\n|;|#)*[^\n]*                               { this.popState(); return "description_value"; }
 ["]                                                             { this.begin("string"); }
 <string>["]                                                     { this.popState(); }
 <string>[^"]*                                                   { return "txt"; }
@@ -34,7 +37,6 @@ title                                                           { this.begin("ti
 ":"[\s]*[\d]+(?:\.[\d]+)?                                       return "value";
 <<EOF>>                                                         return 'EOF';
 
-
 /lex
 
 %start start
@@ -61,6 +63,7 @@ statement
   :
 	| txt value          { yy.addSection($1,yy.cleanupValue($2)); }
 	| title title_value  { $$=$2.trim();yy.setTitle($$); }
+  | accDescription description_value  { $$=$2.trim();yy.setAccDescription($$); }
 	| directive
 	;
 

src/diagrams/pie/parser/pie.spec.js

@@ -62,6 +62,37 @@ pie
     expect(title).toBe('a 60/40 pie');
   });
 
+  it('should handle simple pie without an acc description', function () {
+    const res = pie.parser.parse(`pie title a neat chart
+"ash" : 60
+"bat" : 40
+`);
+
+    const sections = pieDb.getSections();
+    const title = pieDb.getTitle();
+    const description = pieDb.getAccDescription();
+    const section1 = sections['ash'];
+    expect(section1).toBe(60);
+    expect(title).toBe('a neat chart');
+    expect(description).toBe('');
+  });
+
+  it('should handle simple pie with an acc description', function () {
+    const res = pie.parser.parse(`pie title a neat chart
+    accDescription a neat description
+"ash" : 60
+"bat" : 40
+`);
+
+    const sections = pieDb.getSections();
+    const title = pieDb.getTitle();
+    const description = pieDb.getAccDescription();
+    const section1 = sections['ash'];
+    expect(section1).toBe(60);
+    expect(title).toBe('a neat chart');
+    expect(description).toBe('a neat description');
+  });
+
   it('should handle simple pie with positive decimal', function () {
     const res = pie.parser.parse(`pie
 "ash" : 60.67

src/diagrams/pie/pieDb.js

@@ -4,6 +4,7 @@ import * as configApi from '../../config';
 
 let sections = {};
 let title = '';
+let description = '';
 let showData = false;
 
 export const parseDirective = function (statement, context, type) {
@@ -33,6 +34,15 @@ const getShowData = function () {
 const getTitle = function () {
   return title;
 };
+
+const setAccDescription = function (txt) {
+  description = txt;
+};
+
+const getAccDescription = function () {
+  return description;
+};
+
 const cleanupValue = function (value) {
   if (value.substring(0, 1) === ':') {
     value = value.substring(1).trim();
@@ -62,5 +72,7 @@ export default {
   getTitle,
   setShowData,
   getShowData,
+  getAccDescription,
+  setAccDescription,
   // parseError
 };

src/diagrams/pie/pieRenderer.js

@@ -5,6 +5,7 @@ import pieParser from './parser/pie';
 import { log } from '../../logger';
 import { configureSvgSize } from '../../utils';
 import * as configApi from '../../config';
+import addSVGAccessibilityFields from '../../accessibility';
 
 let conf = configApi.getConfig();
 
@@ -56,6 +57,7 @@ export const draw = (txt, id) => {
     const diagram = root.select('#' + id);
     configureSvgSize(diagram, height, width, conf.pie.useMaxWidth);
 
+    addSVGAccessibilityFields(parser.yy, diagram, id);
     // Set viewBox
     elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height);