Feat: Add aria-describedby, aria-roledescription

docs/config/setup/modules/mermaidAPI.md

@@ -20,7 +20,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
 #### Defined in
 
-[mermaidAPI.ts:73](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L73)
+[mermaidAPI.ts:72](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L72)
 
 ## Variables
 
@@ -90,7 +90,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:960](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L960)
+[mermaidAPI.ts:959](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L959)
 
 ## Functions
 
@@ -121,7 +121,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:294](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L294)
+[mermaidAPI.ts:293](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L293)
 
 ---
 
@@ -147,7 +147,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:245](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L245)
+[mermaidAPI.ts:244](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L244)
 
 ---
 
@@ -173,7 +173,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L172)
+[mermaidAPI.ts:171](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L171)
 
 ---
 
@@ -196,7 +196,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L222)
+[mermaidAPI.ts:221](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L221)
 
 ---
 
@@ -223,7 +223,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L156)
+[mermaidAPI.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L155)
 
 ---
 
@@ -243,7 +243,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L130)
+[mermaidAPI.ts:129](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L129)
 
 ---
 
@@ -263,7 +263,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L101)
+[mermaidAPI.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L100)
 
 ---
 
@@ -289,7 +289,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:273](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L273)
+[mermaidAPI.ts:272](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L272)
 
 ---
 
@@ -315,4 +315,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:345](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L345)
+[mermaidAPI.ts:344](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L344)

packages/mermaid/src/accessibility.ts

@@ -4,7 +4,7 @@
  */
 import { D3Element } from './mermaidAPI';
 
-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash-es/isEmpty';
 
 /**
  * Add aria-roledescription to the svg element to the diagramType

packages/mermaid/src/diagram-api/types.ts

@@ -14,6 +14,8 @@ export interface InjectUtils {
 export interface DiagramDb {
   clear?: () => void;
   setDiagramTitle?: (title: string) => void;
+  getAccTitle?: () => string;
+  getAccDescription?: () => string;
 }
 
 export interface DiagramDefinition {

packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js

@@ -323,18 +323,34 @@ describe('when parsing ER diagram it...', function () {
     expect(Object.keys(erDb.getEntities()).length).toBe(1);
   });
 
-  it('should allow for a accessibility title and description (accDescr)', function () {
+  describe('accessible title and description', () => {
     const teacherRole = 'is teacher of';
     const line1 = `TEACHER }o--o{ STUDENT : "${teacherRole}"`;
 
-    erDiagram.parser.parse(
-      `erDiagram
+    it('should allow for a accessibility title and description (accDescr)', function () {
+      erDiagram.parser.parse(
+        `erDiagram
       accTitle: graph title
       accDescr: this graph is about stuff
       ${line1}`
-    );
-    expect(erDb.getAccTitle()).toBe('graph title');
-    expect(erDb.getAccDescription()).toBe('this graph is about stuff');
+      );
+      expect(erDb.getAccTitle()).toBe('graph title');
+      expect(erDb.getAccDescription()).toBe('this graph is about stuff');
+    });
+
+    it('parses a multi line description (accDescr)', function () {
+      erDiagram.parser.parse(
+        `erDiagram
+      accTitle: graph title
+      accDescr { this graph is
+        about
+        stuff
+        }\n
+      ${line1}`
+      );
+      expect(erDb.getAccTitle()).toEqual('graph title');
+      expect(erDb.getAccDescription()).toEqual('this graph is\nabout\nstuff');
+    });
   });
 
   it('should allow more than one relationship between the same two entities', function () {

packages/mermaid/src/diagrams/git/gitGraphRenderer.js

@@ -1,6 +1,7 @@
 import { select } from 'd3';
 import { getConfig, setupGraphViewbox } from '../../diagram-api/diagramAPI';
 import { log } from '../../logger';
+import utils from '../../utils';
 
 let allCommitsDict = {};
 

packages/mermaid/src/diagrams/state/stateRenderer-v2.js

@@ -5,6 +5,8 @@ import { render } from '../../dagre-wrapper/index.js';
 import { log } from '../../logger';
 import { configureSvgSize } from '../../setupGraphViewbox';
 import common from '../common/common';
+import utils from '../../utils';
+
 import {
   DEFAULT_DIAGRAM_DIRECTION,
   DEFAULT_NESTED_DOC_DIR,

packages/mermaid/src/mermaidAPI.ts

@@ -29,10 +29,9 @@ import utils, { directiveSanitizer } from './utils';
 import DOMPurify from 'dompurify';
 import { MermaidConfig } from './config.type';
 import { evaluate } from './diagrams/common/common';
+import isEmpty from 'lodash-es/isEmpty';
 import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility';
 
-import { isEmpty } from 'lodash';
-
 // diagram names that support classDef statements
 const CLASSDEF_DIAGRAMS = ['graph', 'flowchart', 'flowchart-v2', 'stateDiagram', 'stateDiagram-v2'];
 

packages/mermaid/src/tests/MockedD3.ts

@@ -99,7 +99,7 @@ export class MockedD3 {
     return this;
   }
 
-  // NOTE: Returns a HTML ELement with tag 'svg' that has _another_ 'svg' element child.
+  // NOTE: Returns a HTML Element with tag 'svg' that has _another_ 'svg' element child.
   // This allows different tests to succeed -- some need a top level 'svg' and some need a 'svg' element to be the firstChild
   // Real implementation returns an HTML Element
   public node = vi.fn().mockImplementation(() => {

packages/mermaid/src/utils.spec.js

@@ -4,7 +4,8 @@ import assignWithDepth from './assignWithDepth';
 import { detectType } from './diagram-api/detectType';
 import { addDiagrams } from './diagram-api/diagram-orchestration';
 import memoize from 'lodash-es/memoize';
-import { MockD3 } from 'd3';
+import { MockedD3 } from './tests/MockedD3';
+
 addDiagrams();
 
 describe('when assignWithDepth: should merge objects within objects', function () {
@@ -352,21 +353,52 @@ describe('when initializing the id generator', function () {
 });
 
 describe('when inserting titles', function () {
-  it('should do nothing when title is empty', function () {
-    const svg = MockD3('svg');
+  const svg = new MockedD3('svg');
+  const mockedElement = {
+    getBBox: vi.fn().mockReturnValue({ x: 10, y: 11, width: 100, height: 200 }),
+  };
+  const fauxTitle = new MockedD3('title');
+
+  beforeEach(() => {
+    svg.node = vi.fn().mockReturnValue(mockedElement);
+  });
+
+  it('does nothing if the title is empty', function () {
+    const svg_append_spy = vi.spyOn(svg, 'append');
     utils.insertTitle(svg, 'testClass', 0, '');
-    expect(svg.__children.length).toBe(0);
+    expect(svg_append_spy).not.toHaveBeenCalled();
+  });
+
+  it('appends the title as a text item with the given title text', function () {
+    const svg_append_spy = vi.spyOn(svg, 'append').mockReturnValue(fauxTitle);
+    const title_text_spy = vi.spyOn(fauxTitle, 'text');
+
+    utils.insertTitle(svg, 'testClass', 5, 'test title');
+    expect(svg_append_spy).toHaveBeenCalled();
+    expect(title_text_spy).toHaveBeenCalledWith('test title');
   });
 
-  it('should insert title centered', function () {
-    const svg = MockD3('svg');
+  it('x value is the bounds x position + half of the bounds width', () => {
+    vi.spyOn(svg, 'append').mockReturnValue(fauxTitle);
+    const title_attr_spy = vi.spyOn(fauxTitle, 'attr');
+
+    utils.insertTitle(svg, 'testClass', 5, 'test title');
+    expect(title_attr_spy).toHaveBeenCalledWith('x', 10 + 100 / 2);
+  });
+
+  it('y value is - given title top margin', () => {
+    vi.spyOn(svg, 'append').mockReturnValue(fauxTitle);
+    const title_attr_spy = vi.spyOn(fauxTitle, 'attr');
+
+    utils.insertTitle(svg, 'testClass', 5, 'test title');
+    expect(title_attr_spy).toHaveBeenCalledWith('y', -5);
+  });
+
+  it('class is the given css class', () => {
+    vi.spyOn(svg, 'append').mockReturnValue(fauxTitle);
+    const title_attr_spy = vi.spyOn(fauxTitle, 'attr');
+
     utils.insertTitle(svg, 'testClass', 5, 'test title');
-    expect(svg.__children.length).toBe(1);
-    const text = svg.__children[0];
-    expect(text.__name).toBe('text');
-    expect(text.text).toHaveBeenCalledWith('test title');
-    expect(text.attr).toHaveBeenCalledWith('x', 15);
-    expect(text.attr).toHaveBeenCalledWith('y', -5);
-    expect(text.attr).toHaveBeenCalledWith('class', 'testClass');
+    expect(title_attr_spy).toHaveBeenCalledWith('class', 'testClass');
   });
 });

packages/mermaid/src/utils.ts

@@ -915,7 +915,7 @@ export function getErrorMessage(error: unknown): string {
 }
 
 /**
- * Appends <text> element with the given title, centered.
+ * Appends <text> element with the given title and css class.
  *
  * @param parent - d3 svg object to append title to
  * @param cssClass - CSS class for the <text> element containing the title