Feat: Add aria-describedby, aria-roledescription #3808

weedySeaDragon · 2022-11-18T00:46:05Z

📑 Summary

Resolves #3626

Added the aria-roledescription to be the diagram key. (In the future we probably want to revise this to use i18n)
Added aria-describedby : the accessible description should describe the diagram, not label it.

Updated the documentation:

reworked the Accessibility section.
- fixed the example for multi-line accessible descriptions. (No ":" goes after the keyword)
updated the "Adding a new diagram" info on accessibility

📏 Design Decisions

All a11y is now handled by mermaidAPI render() instead of being the responsibility of every individual diagram. Individual diagrams still need to parse the accessible title and description and provide the values.
The d3 mock now returns MockedD3 objects. Only the sequence diagram used the specialized NewD3 and MockD3 versions. I moved those specific mocks into the appropriate sequence tests.
Added a mermaidAPI render() spec -- it only tests the a11y stuff, but is now set up for adding other examples & tests in the future.
Added mock diagram renderers. Needed for writing the mermaidAPI render tests.

📋 Tasks

Make sure you

📖 have read the contribution guidelines
💻 have added unit/e2e tests (if appropriate)
🔖 targeted develop branch

…ption')

…ledescription-for-svg

…ers etc)

aloisklink

Looks good to me, although I'm not an expert on the aria accessibility tags, so please take what I'm saying with a pinch of salt! Some minor comments, but they're minor, and you're welcome to disagree with them/or I might be wrong about them.

aloisklink · 2022-11-20T16:54:29Z

docs/config/accessibility.md


-Let us take a look at the following example with a flowchart diagram:
+Support for accessible titles and descriptions is available for all diagrams/chart types. We have tried to keep the same keywords and format for all diagrams so that it is easy to understand and maintain.


🚀

If/when PR #3706 gets merged, we should hopefully be able to add a more consistent method of settings these in the diagram front-matter too!

That will be great.

Now that #3706 is merged, do we need to revisit anything here?

Not yet, as it currently only supports the title: keyword in YAML front-matter.

It should be relatively easy to add a accTitle: and accDescr: in another PR though, although we should probably wait until this PR is merged first to avoid merge conflicts.

docs/config/accessibility.md

packages/mermaid/src/accessibility.spec.ts

packages/mermaid/src/mermaidAPI.ts

Co-authored-by: Alois Klink <alois@aloisklink.com>

…scBy-roledescription-mocks

aloisklink

Looks good from my side, but again, I'm not an expert on aria accessibility tags, so another reviewer might catch things I've missed.

Thanks for keeping this up to date with develop, and for adding more tests!

packages/mermaid/src/utils.spec.js

…scBy-roledescription-mocks

weedySeaDragon · 2022-11-30T05:49:52Z

Who else needs to review this so that it can be merged?

aloisklink · 2022-11-30T20:08:42Z

Who else needs to review this so that it can be merged?

Rules are here: https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md#committing-code

But generally, @knsv is the main reviewer (or they assign a reviewer) for anything that changes the output mermaid diagrams. But they tend to be pretty busy, so it might take a couple of days to get a review (especially since this PR looks like a big one with lots of commits, since even though the actual code changes are pretty small, there's a lot of great tests + documentation added!)

My front-end/accessibility knowledge is pretty weak, so there's a good chance I've missed something!

weedySeaDragon · 2022-12-01T17:28:40Z

Thanks for the response, @aloisklink . :-)

@brennanyoung, who entered the issue that this PR addresses (#3626 ) does know a lot about accessibility, so that area doesn't require much review.

And generally, the # of commits is not terribly related to the size of the actual changes. (Some project choose to squash or reduce them to a bare minimum even before submitting PRs.) Looking directly at the file changes is the indicator.

Since this has minimal effect on output, I didn't know if @knsv needed to review this or not.

…scBy-roledescription-mocks # Conflicts: # cypress/integration/rendering/gantt.spec.js # cypress/integration/rendering/requirement.spec.js # docs/config/setup/modules/mermaidAPI.md # packages/mermaid/src/accessibility.js

…scBy-roledescription-mocks

knsv

Another good one @weedySeaDragon. We should make sure it works with lazy loaded diagrams like mindmaps as well.

knsv · 2022-12-07T10:29:01Z

packages/mermaid/src/mermaidAPI.ts

@@ -514,6 +517,13 @@ const render = function (
    throw e;
  }

+  // This is the d3 node for the svg element


Good stuff. Found an issue here though as this is only catering the render flow and not the renderAsync flow. See below. This needs top be done in renderAsync (around row 727 as well)

knsv

Is it possible for you to look at the renderAsync as well?

weedySeaDragon · 2022-12-07T14:50:04Z

I'll definitely look at renderAsync too.

…scBy-roledescription-mocks

weedySeaDragon · 2022-12-07T18:47:03Z

@sidharthv96 FYI - Link checker failed because atom.io no longer has any entries for mermaid items. (Don't know if there's a problem on atom.io or if those packages have been removed.)

sidharthv96 · 2022-12-08T05:28:01Z

It was a false positive, 500 error.
The package seems to be there.

knsv

Thanks @weedySeaDragon will merge now!

[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [mermaid](https://togithub.com/mermaid-js/mermaid) | [`9.2.2` -> `9.3.0`](https://renovatebot.com/diffs/npm/mermaid/9.2.2/9.3.0) | [![age](https://badges.renovateapi.com/packages/npm/mermaid/9.3.0/age-slim)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://badges.renovateapi.com/packages/npm/mermaid/9.3.0/adoption-slim)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://badges.renovateapi.com/packages/npm/mermaid/9.3.0/compatibility-slim/9.2.2)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://badges.renovateapi.com/packages/npm/mermaid/9.3.0/confidence-slim/9.2.2)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>mermaid-js/mermaid</summary> ### [`v9.3.0`](https://togithub.com/mermaid-js/mermaid/releases/tag/v9.3.0) [Compare Source](https://togithub.com/mermaid-js/mermaid/compare/v9.2.2...v9.3.0) ### Significant Changes - 25% Smaller - New docs - Replaces the deprecated and vulnerable `dagre-d3` with `dagre-es` ### Release Notes - [#3778](https://togithub.com/mermaid-js/mermaid/issues/3778) Adding a hexgon shape ([#3834](https://togithub.com/mermaid-js/mermaid/issues/3834)) [@knsv](https://togithub.com/knsv) - [#3831](https://togithub.com/mermaid-js/mermaid/issues/3831) Re-enabling themes for er diagrams ([#3837](https://togithub.com/mermaid-js/mermaid/issues/3837)) [@knsv](https://togithub.com/knsv) - [#3882](https://togithub.com/mermaid-js/mermaid/issues/3882) fix for issues with mindmaps with only a single node ([#3833](https://togithub.com/mermaid-js/mermaid/issues/3833)) [@knsv](https://togithub.com/knsv) - (chore) remove console stmt in pieDetector ([#3840](https://togithub.com/mermaid-js/mermaid/issues/3840)) [@weedySeaDragon](https://togithub.com/weedySeaDragon) - (feat) state classDef documentation ([#3841](https://togithub.com/mermaid-js/mermaid/issues/3841)) [@weedySeaDragon](https://togithub.com/weedySeaDragon) - 3882 edge labels ([#3883](https://togithub.com/mermaid-js/mermaid/issues/3883)) [@knsv](https://togithub.com/knsv) - Add GHA that will check links + Fix broken links ([#3765](https://togithub.com/mermaid-js/mermaid/issues/3765)) [@spier](https://togithub.com/spier) - Add official vim plugin to list in integrations ([#3847](https://togithub.com/mermaid-js/mermaid/issues/3847)) [@craigmac](https://togithub.com/craigmac) - Add package visualizations ([#3823](https://togithub.com/mermaid-js/mermaid/issues/3823)) [@sidharthv96](https://togithub.com/sidharthv96) - Add support for [@include](https://togithub.com/include) in docs ([#3863](https://togithub.com/mermaid-js/mermaid/issues/3863)) [@sidharthv96](https://togithub.com/sidharthv96) - CI: disable pinning dependencies ([#3735](https://togithub.com/mermaid-js/mermaid/issues/3735)) [@aloisklink](https://togithub.com/aloisklink) - Defects/issue 3878 ([#3880](https://togithub.com/mermaid-js/mermaid/issues/3880)) [@MrCoder](https://togithub.com/MrCoder) - Feat: Add aria-describedby, aria-roledescription ([#3808](https://togithub.com/mermaid-js/mermaid/issues/3808)) [@weedySeaDragon](https://togithub.com/weedySeaDragon) - Fix [#3799](https://togithub.com/mermaid-js/mermaid/issues/3799): Remove `type` from package.json ([#3802](https://togithub.com/mermaid-js/mermaid/issues/3802)) [@sidharthv96](https://togithub.com/sidharthv96) - Fix for [#3835](https://togithub.com/mermaid-js/mermaid/issues/3835), makes it possible to style path elements ([#3836](https://togithub.com/mermaid-js/mermaid/issues/3836)) [@knsv](https://togithub.com/knsv) - Fix typos ([#3820](https://togithub.com/mermaid-js/mermaid/issues/3820)) [@endolith](https://togithub.com/endolith) - Housekeeping with eslint-unicorn ([#3845](https://togithub.com/mermaid-js/mermaid/issues/3845)) [@sidharthv96](https://togithub.com/sidharthv96) - Integrations added - Visual Studio Code \[Polyglot Interactive Notebooks] ([#3821](https://togithub.com/mermaid-js/mermaid/issues/3821)) [@dfinke](https://togithub.com/dfinke) - Mindmap integration docs ([#3810](https://togithub.com/mermaid-js/mermaid/issues/3810)) [@sidharthv96](https://togithub.com/sidharthv96) - Reduce mermaid size by 31% ([#3825](https://togithub.com/mermaid-js/mermaid/issues/3825)) [@sidharthv96](https://togithub.com/sidharthv96) - Remove extra arrow and adjust cross position ([#3641](https://togithub.com/mermaid-js/mermaid/issues/3641)) [@ishuen](https://togithub.com/ishuen) - Replace `dagre`/`dagre-d3` with `dagre-d3-es` ([#3809](https://togithub.com/mermaid-js/mermaid/issues/3809)) [@aloisklink](https://togithub.com/aloisklink) - Revert "Added pie" ([#3842](https://togithub.com/mermaid-js/mermaid/issues/3842)) [@pbrolin47](https://togithub.com/pbrolin47) - Switch CDN to unpkg.com ([#3777](https://togithub.com/mermaid-js/mermaid/issues/3777)) [@sidharthv96](https://togithub.com/sidharthv96) - Switch back to jsdelivr ([#3873](https://togithub.com/mermaid-js/mermaid/issues/3873)) [@sidharthv96](https://togithub.com/sidharthv96) - Use `github-dark` to highlight fence blocks in vitepress docs ([#3807](https://togithub.com/mermaid-js/mermaid/issues/3807)) [@aloisklink](https://togithub.com/aloisklink) - Use current mermaid version in docs. ([#3846](https://togithub.com/mermaid-js/mermaid/issues/3846)) [@sidharthv96](https://togithub.com/sidharthv96) - Use stylis to prepend idSelector ([#3829](https://togithub.com/mermaid-js/mermaid/issues/3829)) [@DanInProgress](https://togithub.com/DanInProgress) - bug: State diagram fix classes type ([#3798](https://togithub.com/mermaid-js/mermaid/issues/3798)) [@weedySeaDragon](https://togithub.com/weedySeaDragon) - bug: change shiki getHighlighter import ([#3804](https://togithub.com/mermaid-js/mermaid/issues/3804)) [@weedySeaDragon](https://togithub.com/weedySeaDragon) - chore(deps): remove dependency on `graphlib` ([#3861](https://togithub.com/mermaid-js/mermaid/issues/3861)) [@aloisklink](https://togithub.com/aloisklink) - chore(deps): update all non-major dependencies (minor) ([#3905](https://togithub.com/mermaid-js/mermaid/issues/3905)) [@renovate](https://togithub.com/renovate) - chore(deps): update all non-major dependencies (minor) ([#3791](https://togithub.com/mermaid-js/mermaid/issues/3791)) [@renovate](https://togithub.com/renovate) - chore(deps): update lycheeverse/lychee-action action to v1.5.4 ([#3827](https://togithub.com/mermaid-js/mermaid/issues/3827)) [@renovate](https://togithub.com/renovate) - chore(deps): update pnpm to v7.17.0 ([#3828](https://togithub.com/mermaid-js/mermaid/issues/3828)) [@renovate](https://togithub.com/renovate) - chore(deps): update pnpm to v7.17.1 ([#3862](https://togithub.com/mermaid-js/mermaid/issues/3862)) [@renovate](https://togithub.com/renovate) - chore(docs): Auto build docs ([#3547](https://togithub.com/mermaid-js/mermaid/issues/3547)) [@sidharthv96](https://togithub.com/sidharthv96) - chore: Housekeeping ([#3783](https://togithub.com/mermaid-js/mermaid/issues/3783)) [@sidharthv96](https://togithub.com/sidharthv96) - chore: Merge master to develop ([#3780](https://togithub.com/mermaid-js/mermaid/issues/3780)) [@sidharthv96](https://togithub.com/sidharthv96) - chore: clean up code in mermaidAPI render() and write specs/tests ([#3684](https://togithub.com/mermaid-js/mermaid/issues/3684)) [@weedySeaDragon](https://togithub.com/weedySeaDragon) - chore: delete functions not used in diagrams/c4 code (dead code) ([#3871](https://togithub.com/mermaid-js/mermaid/issues/3871)) [@weedySeaDragon](https://togithub.com/weedySeaDragon) - comments in states are skipped now ([#3762](https://togithub.com/mermaid-js/mermaid/issues/3762)) [@avijit1258](https://togithub.com/avijit1258) - doc: remove links from atom.io; add note Atom has been archived ([#3899](https://togithub.com/mermaid-js/mermaid/issues/3899)) [@weedySeaDragon](https://togithub.com/weedySeaDragon) - docs: refactor Theming doc ([#3889](https://togithub.com/mermaid-js/mermaid/issues/3889)) [@huynhicode](https://togithub.com/huynhicode) - feat: Redirect old documentation links. ([#3797](https://togithub.com/mermaid-js/mermaid/issues/3797)) [@sidharthv96](https://togithub.com/sidharthv96) - feat: Title support via front matter for ER, state, class, git, and graph diagrams ([#3706](https://togithub.com/mermaid-js/mermaid/issues/3706)) [@MasonM](https://togithub.com/MasonM) - fix(deps): update all non-major dependencies (patch) ([#3790](https://togithub.com/mermaid-js/mermaid/issues/3790)) [@renovate](https://togithub.com/renovate) - fix(deps): update dependency rollup to v3 ([#3674](https://togithub.com/mermaid-js/mermaid/issues/3674)) [@renovate](https://togithub.com/renovate) - fix: LintStaged ([#3844](https://togithub.com/mermaid-js/mermaid/issues/3844)) [@sidharthv96](https://togithub.com/sidharthv96) 🎉 **Thanks to all contributors helping with this release!** 🎉 #### What's Changed - chore(deps): update actions/checkout action to v3 by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3645 - chore(deps): update actions/setup-node action to v3 by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3646 - Remove inconsistent and deprecated semicolons by [@revolter](https://togithub.com/revolter) in [mermaid-js/mermaid#3657 - Fix windows paths for `docs:build` by [@arpansaha13](https://togithub.com/arpansaha13) in [mermaid-js/mermaid#3605 - feat: make `parseError` function more type-safe by [@Some-Dood](https://togithub.com/Some-Dood) in [mermaid-js/mermaid#3643 - chore(deps): update all non-major dependencies (minor) by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3632 - chore(deps): update all non-major dependencies (patch) by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3671 - chore(deps): pin dependencies by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3685 - Added Open Graph meta tags by [@danangtomo](https://togithub.com/danangtomo) in [mermaid-js/mermaid#3679 - add eslint-plugin-no-only-tests plugin by [@DKurilo](https://togithub.com/DKurilo) in [mermaid-js/mermaid#3690 - Added and configured cspell plugin to eslint by [@devcer](https://togithub.com/devcer) in [mermaid-js/mermaid#3604 - fix: gantt demo diagrams ([#3655](https://togithub.com/mermaid-js/mermaid/issues/3655)) by [@isinek](https://togithub.com/isinek) in [mermaid-js/mermaid#3688 - Chore/3697 eslint curly by [@jeroenekkelkamp](https://togithub.com/jeroenekkelkamp) in [mermaid-js/mermaid#3698 - Update sequenceDiagram.md by [@imgss](https://togithub.com/imgss) in [mermaid-js/mermaid#3707 - Use `eslint-plugin-tsdoc` for TypeScript files instead of `eslint-plugin-jsdoc` by [@aloisklink](https://togithub.com/aloisklink) in [mermaid-js/mermaid#3708 - chore(deps): pin dependencies by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3713 - chore(deps): update all non-major dependencies (patch) by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3714 - Order pie chart slices clockwise by order of entries by [@jasmaa](https://togithub.com/jasmaa) in [mermaid-js/mermaid#3609 - fix: border attribute does not work in a certain writing style by [@maiermic](https://togithub.com/maiermic) in [mermaid-js/mermaid#3636 - add the way to add notes to class diagram by [@DKurilo](https://togithub.com/DKurilo) in [mermaid-js/mermaid#3647 - add statement aliases for ER diagram by [@DKurilo](https://togithub.com/DKurilo) in [mermaid-js/mermaid#3649 - fix: Fix useMaxWidth option for git graph by [@uttk](https://togithub.com/uttk) in [mermaid-js/mermaid#3652 - [#3659](https://togithub.com/mermaid-js/mermaid/issues/3659) Adding height when not using maxWidth by [@knsv](https://togithub.com/knsv) in [mermaid-js/mermaid#3668 - Change fill attribute to style by [@CalebUsadi](https://togithub.com/CalebUsadi) in [mermaid-js/mermaid#3719 - feat: \[State diagram] Add classDefs and classes to states by [@weedySeaDragon](https://togithub.com/weedySeaDragon) in [mermaid-js/mermaid#3644 - Fill inheritance arrow with background color by [@vallsv](https://togithub.com/vallsv) in [mermaid-js/mermaid#3543 - Ensure example code and rendered output are synced by [@marcjansen](https://togithub.com/marcjansen) in [mermaid-js/mermaid#3721 - fix(git): Support quoted branch names by [@gibson042](https://togithub.com/gibson042) in [mermaid-js/mermaid#3726 - docs: Add link to docs source by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3612 - chore(deps): update all non-major dependencies (patch) by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3736 - chore(deps): update all non-major dependencies (minor) by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3737 - feat(gantt): Add option 'tickInterval' for custom tick interval by [@DarkNami](https://togithub.com/DarkNami) in [mermaid-js/mermaid#3729 - Fix/convert attr to style in er graph by [@CalebUsadi](https://togithub.com/CalebUsadi) in [mermaid-js/mermaid#3722 - update user story link for [#3740](https://togithub.com/mermaid-js/mermaid/issues/3740) by [@6footGeek](https://togithub.com/6footGeek) in [mermaid-js/mermaid#3741 - Improved New Documentation by [@emersonbottero](https://togithub.com/emersonbottero) in [mermaid-js/mermaid#3678 - chore: fix cSpell word entry misspelling "mermiad" -> "mermaid" by [@weedySeaDragon](https://togithub.com/weedySeaDragon) in [mermaid-js/mermaid#3751 - Fix link to CSS classes by [@hugovk](https://togithub.com/hugovk) in [mermaid-js/mermaid#3752 - docs: Update references to default config in directives page by [@raptor0929](https://togithub.com/raptor0929) in [mermaid-js/mermaid#3738 - Fix link relative links to documentation files by [@spier](https://togithub.com/spier) in [mermaid-js/mermaid#3760 - chore(deps): update all non-major dependencies (patch) by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3769 - chore(deps): update all non-major dependencies (minor) by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3770 - Fix CSpell by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3753 - Live edits for Docs by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3755 - Switch CDN to unpkg.com by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3777 - chore: Housekeeping by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3783 - Pnpm issue reproduction by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3784 - fix(deps): update all non-major dependencies (patch) by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3790 - chore: clean up code in mermaidAPI render() and write specs/tests by [@weedySeaDragon](https://togithub.com/weedySeaDragon) in [mermaid-js/mermaid#3684 - chore(deps): update all non-major dependencies (minor) by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3791 - fix(deps): update dependency rollup to v3 by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3674 - Add GHA that will check links + Fix broken links by [@spier](https://togithub.com/spier) in [mermaid-js/mermaid#3765 - chore: Merge master to develop by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3780 - bug: change shiki getHighlighter import by [@weedySeaDragon](https://togithub.com/weedySeaDragon) in [mermaid-js/mermaid#3804 - Fix [#3799](https://togithub.com/mermaid-js/mermaid/issues/3799): Remove `type` from package.json by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3802 - CI: disable pinning dependencies by [@aloisklink](https://togithub.com/aloisklink) in [mermaid-js/mermaid#3735 - bug: State diagram fix classes type by [@weedySeaDragon](https://togithub.com/weedySeaDragon) in [mermaid-js/mermaid#3798 - Remove extra arrow and adjust cross position by [@ishuen](https://togithub.com/ishuen) in [mermaid-js/mermaid#3641 - comments in states are skipped now by [@avijit1258](https://togithub.com/avijit1258) in [mermaid-js/mermaid#3762 - feat: Redirect old documentation links. by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3797 - Mindmap integration docs by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3810 - Use `github-dark` to highlight fence blocks in vitepress docs by [@aloisklink](https://togithub.com/aloisklink) in [mermaid-js/mermaid#3807 - chore(deps): update lycheeverse/lychee-action action to v1.5.4 by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3827 - chore(deps): update pnpm to v7.17.0 by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3828 - feat: Title support via front matter for ER, state, class, git, and graph diagrams by [@MasonM](https://togithub.com/MasonM) in [mermaid-js/mermaid#3706 - Replace `dagre`/`dagre-d3` with `dagre-d3-es` by [@aloisklink](https://togithub.com/aloisklink) in [mermaid-js/mermaid#3809 - Add package visualizations by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3823 - [#3882](https://togithub.com/mermaid-js/mermaid/issues/3882) fix for issues with mindmaps with only a single node by [@knsv](https://togithub.com/knsv) in [mermaid-js/mermaid#3833 - [#3778](https://togithub.com/mermaid-js/mermaid/issues/3778) Adding a hexgon shape by [@knsv](https://togithub.com/knsv) in [mermaid-js/mermaid#3834 - Fix for [#3835](https://togithub.com/mermaid-js/mermaid/issues/3835), makes it possible to style path elements by [@knsv](https://togithub.com/knsv) in [mermaid-js/mermaid#3836 - [#3831](https://togithub.com/mermaid-js/mermaid/issues/3831) Re-enabling themes for er diagrams by [@knsv](https://togithub.com/knsv) in [mermaid-js/mermaid#3837 - (chore) remove console stmt in pieDetector by [@weedySeaDragon](https://togithub.com/weedySeaDragon) in [mermaid-js/mermaid#3840 - Revert "Added pie" by [@pbrolin47](https://togithub.com/pbrolin47) in [mermaid-js/mermaid#3842 - Fix typos by [@endolith](https://togithub.com/endolith) in [mermaid-js/mermaid#3820 - (feat) state classDef documentation by [@weedySeaDragon](https://togithub.com/weedySeaDragon) in [mermaid-js/mermaid#3841 - Integrations added - Visual Studio Code \[Polyglot Interactive Notebooks] by [@dfinke](https://togithub.com/dfinke) in [mermaid-js/mermaid#3821 - Reduce mermaid size by 31% by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3825 - fix: LintStaged by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3844 - Add official vim plugin to list in integrations by [@craigmac](https://togithub.com/craigmac) in [mermaid-js/mermaid#3847 - chore(deps): remove dependency on `graphlib` by [@aloisklink](https://togithub.com/aloisklink) in [mermaid-js/mermaid#3861 - chore(deps): update pnpm to v7.17.1 by [@renovate](https://togithub.com/renovate) in [mermaid-js/mermaid#3862 - Make gitgraph snapshots consistent in E2E tests by [@aloisklink](https://togithub.com/aloisklink) in [mermaid-js/mermaid#3860 - Use stylis to prepend idSelector by [@DanInProgress](https://togithub.com/DanInProgress) in [mermaid-js/mermaid#3829 - Use current mermaid version in docs. by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3846 - Add support for [@include](https://togithub.com/include) in docs by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3863 - Housekeeping with eslint-unicorn by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3845 - chore: delete functions not used in diagrams/c4 code (dead code) by [@weedySeaDragon](https://togithub.com/weedySeaDragon) in [mermaid-js/mermaid#3871 - Switch back to jsdelivr by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3873 - 3882 edge labels by [@knsv](https://togithub.com/knsv) in [mermaid-js/mermaid#3883 - Small fix for issue [#3881](https://togithub.com/mermaid-js/mermaid/issues/3881) by [@knsv](https://togithub.com/knsv) in [mermaid-js/mermaid#3884 - Defects/issue 3878 by [@MrCoder](https://togithub.com/MrCoder) in [mermaid-js/mermaid#3880 - chore(docs): Auto build docs by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3547 - docs: refactor Theming doc by [@huynhicode](https://togithub.com/huynhicode) in [mermaid-js/mermaid#3889 - Feat: Add aria-describedby, aria-roledescription by [@weedySeaDragon](https://togithub.com/weedySeaDragon) in [mermaid-js/mermaid#3808 - Release/9.3.0 by [@sidharthv96](https://togithub.com/sidharthv96) in [mermaid-js/mermaid#3911 #### New Contributors - [@revolter](https://togithub.com/revolter) made their first contribution in [mermaid-js/mermaid#3657 - [@Some-Dood](https://togithub.com/Some-Dood) made their first contribution in [mermaid-js/mermaid#3643 - [@danangtomo](https://togithub.com/danangtomo) made their first contribution in [mermaid-js/mermaid#3679 - [@DKurilo](https://togithub.com/DKurilo) made their first contribution in [mermaid-js/mermaid#3690 - [@devcer](https://togithub.com/devcer) made their first contribution in [mermaid-js/mermaid#3604 - [@isinek](https://togithub.com/isinek) made their first contribution in [mermaid-js/mermaid#3688 - [@jeroenekkelkamp](https://togithub.com/jeroenekkelkamp) made their first contribution in [mermaid-js/mermaid#3698 - [@imgss](https://togithub.com/imgss) made their first contribution in [mermaid-js/mermaid#3707 - [@jasmaa](https://togithub.com/jasmaa) made their first contribution in [mermaid-js/mermaid#3609 - [@uttk](https://togithub.com/uttk) made their first contribution in [mermaid-js/mermaid#3652 - [@CalebUsadi](https://togithub.com/CalebUsadi) made their first contribution in [mermaid-js/mermaid#3719 - [@marcjansen](https://togithub.com/marcjansen) made their first contribution in [mermaid-js/mermaid#3721 - [@DarkNami](https://togithub.com/DarkNami) made their first contribution in [mermaid-js/mermaid#3729 - [@6footGeek](https://togithub.com/6footGeek) made their first contribution in [mermaid-js/mermaid#3741 - [@hugovk](https://togithub.com/hugovk) made their first contribution in [mermaid-js/mermaid#3752 - [@raptor0929](https://togithub.com/raptor0929) made their first contribution in [mermaid-js/mermaid#3738 - [@spier](https://togithub.com/spier) made their first contribution in [mermaid-js/mermaid#3760 - [@ishuen](https://togithub.com/ishuen) made their first contribution in [mermaid-js/mermaid#3641 - [@avijit1258](https://togithub.com/avijit1258) made their first contribution in [mermaid-js/mermaid#3762 - [@MasonM](https://togithub.com/MasonM) made their first contribution in [mermaid-js/mermaid#3706 - [@endolith](https://togithub.com/endolith) made their first contribution in [mermaid-js/mermaid#3820 - [@dfinke](https://togithub.com/dfinke) made their first contribution in [mermaid-js/mermaid#3821 - [@craigmac](https://togithub.com/craigmac) made their first contribution in [mermaid-js/mermaid#3847 - [@DanInProgress](https://togithub.com/DanInProgress) made their first contribution in [mermaid-js/mermaid#3829 - [@MrCoder](https://togithub.com/MrCoder) made their first contribution in [mermaid-js/mermaid#3880 - [@huynhicode](https://togithub.com/huynhicode) made their first contribution in [mermaid-js/mermaid#3889 **Full Changelog**: mermaid-js/mermaid@v9.2.2...v9.3.0 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/BirthdayResearch/contented).  Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

weedySeaDragon added 16 commits November 15, 2022 13:47

accessibility.js -> ts; + set aria-roledescription; add spec

8d96518

diagrams: use a11y title,desc specific method (was renamed)

0d9566d

add "roledescription" to cSpell list of words (as in 'aria-roledescri…

d997076

…ption')

Merge remote-tracking branch 'MERMAID/develop' into feat/3626-aria-ro…

c331305

…ledescription-for-svg

(minor) fix typo

03a11e1

add error checking (empty diagramType, title, desc) to a11y methods

4d7496b

MockedD3: node() return Element; add selectAll()

8a3c4f6

move mocks specific to only seq spec files out of global d3 mock

1fc0294

d3 mock: use MockedD3; remove sequence specific mock code

1ad537b

add diagram renderer mocks

f62c5d9

put a11y into mermaidAPI render; add render spec (mock diagram render…

29efc11

…ers etc)

remove a11y from individual diagrams; now happens in mermaidAPI render

0adc6a6

doc: revise A11y: fix multi-line ex, +describedby, alpha sort examples

4fb4aa4

doc: adding diagrams: revise a11y section

9cc862b

(minor) fix typo, whitespace formatting

68b1805

set describeby to accessible description element id

b51759d

github-actions bot added the feature label Nov 18, 2022

weedySeaDragon added 2 commits November 17, 2022 16:51

format .md files

6952640

re-re-fixed the contributing doc

67a015c

aloisklink approved these changes Nov 20, 2022

View reviewed changes

weedySeaDragon and others added 2 commits November 20, 2022 12:17

use optional chaining check for get acc title and get acc description

2a98791

Co-authored-by: Alois Klink <alois@aloisklink.com>

export D3Element from mermaidAPI; use in accessibility

a9c3373

aloisklink mentioned this pull request Nov 22, 2022

Server Side Support #3650

Open

weedySeaDragon added 5 commits November 25, 2022 11:30

Merge remote-tracking branch 'MERMAID/develop' into feat/3626-aria-de…

626a474

…scBy-roledescription-mocks

(minor) fix comment, comment typo

7508cd7

use MockedD3, spies in util insertTitle spec (remove MockD3)

f1bc2de

add test for multi-line accDescr

6e486d3

update /docs

2030885

weedySeaDragon requested a review from aloisklink November 27, 2022 19:42

aloisklink approved these changes Nov 27, 2022

View reviewed changes

packages/mermaid/src/utils.spec.js Outdated Show resolved Hide resolved

packages/mermaid/src/utils.spec.js Outdated Show resolved Hide resolved

weedySeaDragon added 3 commits November 27, 2022 19:10

Merge remote-tracking branch 'MERMAID/develop' into feat/3626-aria-de…

e9d4372

…scBy-roledescription-mocks

make test title clearer

6044e9e

use camelCase

2bf753a

weedySeaDragon added 3 commits December 1, 2022 10:08

remove typeof

bfe3f30

Merge remote-tracking branch 'MERMAID/develop' into feat/3626-aria-de…

96996d0

…scBy-roledescription-mocks

sidharthv96 approved these changes Dec 7, 2022

View reviewed changes

sidharthv96 requested a review from knsv December 7, 2022 06:25

sidharthv96 assigned weedySeaDragon Dec 7, 2022

knsv reviewed Dec 7, 2022

View reviewed changes

knsv requested changes Dec 7, 2022

View reviewed changes

weedySeaDragon added 2 commits December 7, 2022 09:31

Merge remote-tracking branch 'MERMAID/develop' into feat/3626-aria-de…

b1dd000

…scBy-roledescription-mocks

common function for a11y; add to renderAsync; + renderAsync spec

1c9a559

weedySeaDragon requested a review from knsv December 7, 2022 18:47

knsv approved these changes Dec 8, 2022

View reviewed changes

knsv merged commit 90d9724 into mermaid-js:develop Dec 8, 2022

aloisklink mentioned this pull request Dec 8, 2022

Update accessibility.md #3895

Closed

3 tasks

aloisklink mentioned this pull request Nov 16, 2023

feat: Add packet diagram #4839

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: Add aria-describedby, aria-roledescription #3808

Feat: Add aria-describedby, aria-roledescription #3808

weedySeaDragon commented Nov 18, 2022

aloisklink left a comment •

edited

aloisklink Nov 20, 2022

weedySeaDragon Nov 20, 2022

sidharthv96 Dec 7, 2022

aloisklink Dec 7, 2022

aloisklink left a comment

weedySeaDragon commented Nov 30, 2022

aloisklink commented Nov 30, 2022

weedySeaDragon commented Dec 1, 2022

knsv left a comment

knsv Dec 7, 2022 •

edited

knsv left a comment

weedySeaDragon commented Dec 7, 2022

weedySeaDragon commented Dec 7, 2022

sidharthv96 commented Dec 8, 2022

knsv left a comment


		Let us take a look at the following example with a flowchart diagram:
		Support for accessible titles and descriptions is available for all diagrams/chart types. We have tried to keep the same keywords and format for all diagrams so that it is easy to understand and maintain.

Feat: Add aria-describedby, aria-roledescription #3808

Feat: Add aria-describedby, aria-roledescription #3808

Conversation

weedySeaDragon commented Nov 18, 2022

📑 Summary

📏 Design Decisions

📋 Tasks

aloisklink left a comment • edited

Choose a reason for hiding this comment

aloisklink Nov 20, 2022

Choose a reason for hiding this comment

weedySeaDragon Nov 20, 2022

Choose a reason for hiding this comment

sidharthv96 Dec 7, 2022

Choose a reason for hiding this comment

aloisklink Dec 7, 2022

Choose a reason for hiding this comment

aloisklink left a comment

Choose a reason for hiding this comment

weedySeaDragon commented Nov 30, 2022

aloisklink commented Nov 30, 2022

weedySeaDragon commented Dec 1, 2022

knsv left a comment

Choose a reason for hiding this comment

knsv Dec 7, 2022 • edited

Choose a reason for hiding this comment

knsv left a comment

Choose a reason for hiding this comment

weedySeaDragon commented Dec 7, 2022

weedySeaDragon commented Dec 7, 2022

sidharthv96 commented Dec 8, 2022

knsv left a comment

Choose a reason for hiding this comment

aloisklink left a comment •

edited

knsv Dec 7, 2022 •

edited