mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #3897 from weedySeaDragon/feat/3896_a11y-svg-role-graphics-doc-doc 

feat: Set svg role to 'graphics-document document'
This commit is contained in:
Sidharth Vinod 2022-12-15 21:42:08 +05:30 committed by GitHub
parent 54bb2ef00e e59b830d74
commit 4e70f327c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/mermaid/src/accessibility.spec.ts
View File

@ -6,6 +6,13 @@ describe('accessibility', () => {
const fauxSvgNode = new MockedD3();
describe('setA11yDiagramInfo', () => {
it('sets the svg element role to "graphics-document document"', () => {
// @ts-ignore Required to easily handle the d3 select types
const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
setA11yDiagramInfo(fauxSvgNode, 'flowchart');
expect(svgAttrSpy).toHaveBeenCalledWith('role', 'graphics-document document');
});
it('sets the aria-roledescription to the diagram type', () => {
// @ts-ignore Required to easily handle the d3 select types
const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
@ -13,11 +20,12 @@ describe('accessibility', () => {
expect(svgAttrSpy).toHaveBeenCalledWith('aria-roledescription', 'flowchart');
});
it('does nothing if the diagram type is empty', () => {
it('does not set the aria-roledescription if the diagram type is empty', () => {
// @ts-ignore Required to easily handle the d3 select types
const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
setA11yDiagramInfo(fauxSvgNode, '');
expect(svgAttrSpy).not.toHaveBeenCalled();
expect(svgAttrSpy).toHaveBeenCalledTimes(1);
expect(svgAttrSpy).toHaveBeenCalledWith('role', expect.anything()); // only called to set the role
});
});

17
packages/mermaid/src/accessibility.ts
View File

@ -1,5 +1,8 @@
/**
* Accessibility (a11y) functions, types, helpers
* @see https://www.w3.org/WAI/
* @see https://www.w3.org/TR/wai-aria-1.1/
* @see https://www.w3.org/TR/svg-aam-1.0/
*
*/
import { D3Element } from './mermaidAPI';
@ -7,12 +10,24 @@ import { D3Element } from './mermaidAPI';
import isEmpty from 'lodash-es/isEmpty';
/**
* Add aria-roledescription to the svg element to the diagramType
* SVG element role:
* The SVG element role _should_ be set to 'graphics-document' per SVG standard
* but in practice is not always done by browsers, etc. (As of 2022-12-08).
* A fallback role of 'document' should be set for those browsers, etc., that only support ARIA 1.0.
*
* @see https://www.w3.org/TR/svg-aam-1.0/#roleMappingGeneralRules
* @see https://www.w3.org/TR/graphics-aria-1.0/#graphics-document
*/
const SVG_ROLE = 'graphics-document document';
/**
* Add role and aria-roledescription to the svg element
*
* @param svg - d3 object that contains the SVG HTML element
* @param diagramType - diagram name for to the aria-roledescription
*/
export function setA11yDiagramInfo(svg: D3Element, diagramType: string | null | undefined) {
svg.attr('role', SVG_ROLE);
if (!isEmpty(diagramType)) {
svg.attr('aria-roledescription', diagramType);
}