plotly-a11y-enhancer
v1.0.4
Published
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).
Downloads
13
Maintainers
Readme
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
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:
<plotly-plot
[data]="graph.data"
[layout]="graph.layout"
[config]="graph.config"
(afterPlot)="heatmapLoaded()">
</plotly-plot>
Once treemap is loaded it calls the heatmapLoaded
callback.
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