diff --git a/demos/index.html b/demos/index.html
index b306da46e..530e24965 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -20,6 +20,15 @@
+ pie
+ title Key elements in Product X
+ accDescription This is a pie chart showing the key elements in Product X.
+ "Calcium" : 42.96
+ "Potassium" : 50.05
+ "Magnesium" : 10.01
+ "Iron" : 5
+
gantt
diff --git a/src/accessibility.js b/src/accessibility.js
new file mode 100644
index 000000000..fe4a6e857
--- /dev/null
+++ b/src/accessibility.js
@@ -0,0 +1,25 @@
+/**
+ * This method will add a basic title and description element to a chart. The yy parser will need to
+ * respond to getTitle and getAccDescription, where the title is the title element on the chart,
+ * which is not displayed and the accDescription is the description element on the chart, which is
+ * also not displayed.
+ *
+ * @param yy_parser
+ * @param svg
+ * @param id
+ */
+export default function addSVGAccessibilityFields(yy_parser, svg, id) {
+ let title_string = yy_parser.getTitle();
+ let description = yy_parser.getAccDescription();
+ svg.attr('role', 'img').attr('aria-labelledby', 'chart-title-' + id + ' chart-desc-' + id);
+
+ svg
+ .insert('desc', ':first-child')
+ .attr('id', 'chart-desc-' + id)
+ .text(description);
+
+ svg
+ .insert('title', ':first-child')
+ .attr('id', 'chart-desc-' + id)
+ .text(title_string);
+}
diff --git a/src/diagrams/pie/parser/pie.jison b/src/diagrams/pie/parser/pie.jison
index 19c7eea4d..74711ae55 100644
--- a/src/diagrams/pie/parser/pie.jison
+++ b/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'; }
(?!\n|;|#)*[^\n]* { this.popState(); return "title_value"; }
+accDescription { this.begin("accDescription");return 'accDescription'; }
+(?!\n|;|#)*[^\n]* { this.popState(); return "description_value"; }
["] { this.begin("string"); }
["] { this.popState(); }
[^"]* { return "txt"; }
@@ -34,7 +37,6 @@ title { this.begin("ti
":"[\s]*[\d]+(?:\.[\d]+)? return "value";
<> 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
;
diff --git a/src/diagrams/pie/parser/pie.spec.js b/src/diagrams/pie/parser/pie.spec.js
index 7cc7656f3..dbd62cead 100644
--- a/src/diagrams/pie/parser/pie.spec.js
+++ b/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
diff --git a/src/diagrams/pie/pieDb.js b/src/diagrams/pie/pieDb.js
index d9bdb3fab..25ebb4efb 100644
--- a/src/diagrams/pie/pieDb.js
+++ b/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
};
diff --git a/src/diagrams/pie/pieRenderer.js b/src/diagrams/pie/pieRenderer.js
index c405a5c6d..bd7692b2e 100644
--- a/src/diagrams/pie/pieRenderer.js
+++ b/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();
@@ -43,6 +44,7 @@ export const draw = (txt, id) => {
const diagram = select('#' + id);
configureSvgSize(diagram, height, width, conf.pie.useMaxWidth);
+ addSVGAccessibilityFields(parser.yy, diagram, id);
// Set viewBox
elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index e51f22468..46815e2d4 100755
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -42,6 +42,7 @@ import infoParser from './diagrams/info/parser/info';
import pieParser from './diagrams/pie/parser/pie';
import pieDb from './diagrams/pie/pieDb';
import pieRenderer from './diagrams/pie/pieRenderer';
+import addSVGAccessibilityFields from './diagrams/pie/pieRenderer';
import requirementParser from './diagrams/requirement/parser/requirementDiagram';
import requirementDb from './diagrams/requirement/requirementDb';
import requirementRenderer from './diagrams/requirement/requirementRenderer';