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'; } +<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 ; 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';