Merge pull request #2911 from gwincr11/cg-class-diagram-accessibility

Class diagram accessibility

src/diagrams/class/classDb.js

@@ -345,8 +345,34 @@ const setDirection = (dir) => {
   direction = dir;
 };
 
+let title = '';
+
+export const setTitle = function (txt) {
+  let sanitizedText = sanitizeText(txt, configApi.getConfig());
+  title = sanitizedText;
+};
+
+export const getTitle = function () {
+  return title;
+};
+
+let accDescription = '';
+
+export const setAccDescription = function (txt) {
+  let sanitizedText = sanitizeText(txt, configApi.getConfig());
+  accDescription = sanitizedText;
+};
+
+export const getAccDescription = function () {
+  return accDescription;
+};
+
 export default {
   parseDirective,
+  setTitle,
+  getTitle,
+  getAccDescription,
+  setAccDescription,
   getConfig: () => configApi.getConfig().class,
   addClass,
   bindFunctions,

src/diagrams/class/classDiagram.spec.js

@@ -543,6 +543,21 @@ foo()
       expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE);
     });
 
+    it('should have a title and accDescription', function () {
+      const str =
+        'classDiagram\n' +
+        'class Car~T~\n' +
+        'title My Title\n' +
+        'accDescription My Description\n';
+      'Car : -List~Wheel~ wheels\n' +
+        'Car : +setWheels(List~Wheel~ wheels)\n' +
+        'Car : +getWheels() List~Wheel~';
+
+      parser.parse(str);
+      expect(parser.yy.getTitle()).toBe('My Title');
+      expect(parser.yy.getAccDescription()).toBe('My Description');
+    });
+
     it('should handle relation definitions AGGREGATION and dotted line', function () {
       const str = 'classDiagram\n' + 'Class01 o.. Class02';
 

src/diagrams/class/classRenderer-v2.js

@@ -11,6 +11,7 @@ import { render } from '../../dagre-wrapper/index.js';
 import { curveLinear } from 'd3';
 import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
 import common from '../common/common';
+import addSVGAccessibilityFields from '../../accessibility';
 
 parser.yy = classDb;
 
@@ -397,6 +398,7 @@ export const draw = function (text, id) {
     }
   }
 
+  addSVGAccessibilityFields(parser.yy, svg, id);
   // If node has a link, wrap it in an anchor SVG object.
   // const keys = Object.keys(classes);
   // keys.forEach(function(key) {

src/diagrams/class/classRenderer.js

@@ -7,6 +7,7 @@ import { parser } from './parser/classDiagram';
 import svgDraw from './svgDraw';
 import { configureSvgSize } from '../../utils';
 import { getConfig } from '../../config';
+import addSVGAccessibilityFields from '../../accessibility';
 
 parser.yy = classDb;
 
@@ -263,6 +264,7 @@ export const draw = function (text, id) {
   const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
   log.debug(`viewBox ${vBox}`);
   diagram.attr('viewBox', vBox);
+  addSVGAccessibilityFields(parser.yy, diagram, id);
 };
 
 export default {

src/diagrams/class/parser/classDiagram.jison

@@ -29,6 +29,8 @@
 <arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
 \%\%(?!\{)*[^\n]*(\r?\n?)+                                      /* skip comments */
 \%\%[^\n]*(\r?\n)*                                              /* skip comments */
+"title"\s[^#\n;]+       return 'title';
+"accDescription"\s[^#\n;]+       return 'accDescription';
 
 \s*(\r?\n)+                return 'NEWLINE';
 \s+                     /* skip whitespace */
@@ -253,6 +255,9 @@ statement
     | cssClassStatement
     | directive
     | direction
+    | title {yy.setTitle($1.substring(6));$$=$1.substring(6);}
+	| accDescription {yy.setAccDescription($1.substring(15));$$=$1.substring(15);}
+
     ;
 
 classStatement