Angular Plotly Treemap Accessibility

The plotly treemap does not come with the built-in accessibility feature and keyboard accessibility.
This package adds the keyboard navigation on angular plotly treemap along with the content recognition by screen reader (tested on NVDA).

Plotly is a very powerful charting tool created on top of d3.js. But due to lack of the accessibility many application can not use even if it is free.

Since we needed accessibility on plotly treemap, A small package has been created which adds accessibility and keyboard navigation. Works well with screen reader. Tooltip can be dismissed by ESC key. On next ESC key the focus is set out side of the graph. So that you dont need to go through each cell when data is large.

Dependency

This package adds keyboard navigation and other accessibility feature to angular plotly treemap. It has following dependency

- Plotly

- angular-plotly.js

- Angular 17 and above

How to add accessibility and keyboard navigation to plotly treemap

Install the package npm i plotly-a11y-enhancer

Import the TreemapInteractionService into your component where treemap is added

import { TreemapInteractionService } from 'plotly-a11y-enhancer';

Now add DI for TreemapInteractionService in your component.

constructor( private _interactionService: TreemapInteractionService,)

This service exposes two methods:

- addKeyboardInteractions(treemapSelector: string)

- cleanUpListeners()

The HTML part:

``


[data]="graph.data"

[layout]="graph.layout"

[config]="graph.config"

(afterPlot)="heatmapLoaded()">



`

Once treemap is loaded it calls the heatmapLoadedcallback.

Please add below code inside that function:

`

heatmapLoaded() {

this._interactionService.addKeyboardInteractions('plotly-plot');

}

`

And you are done.

Note: Make sure to call cleanUpListeners in ngOnDestroy to avoid any memory leaks.

`

ngOnDestroy() {

this._interactionService.cleanUpListeners(); // Note: This is important otherwise there will be memory leaks

}

``

Working demo

Please click below stackblitz link. It may take a few seconds to render as plotly is little heavy.

https://stackblitz.com/edit/stackblitz-starters-1vvg9f?file=src%2Fmain.ts