David/enhancement modebar

[davidangarita1]

Pull request to improve accessibility for the modebar.
This makes the modebar tab-able so that people using special interfaces can interact with the graph. Some functions require a mouse, but not all do.

[ayjayt]

So I'm wondering what are the configuration options for the modebar besides hover, and what actually changes the visibility during hover (is it just css? can we do the same thing for focus as hover).

Also looks like your editor did a bunch of reformatting, you should undo that

Also, if we use button, we don't need tabindex now, right?

[ayjayt]

Yeah, so, we have two options:

1. add accessibility manually w/ javascript (tabindex and onevent listener)

2. just use a button (but care for the styling changes)

I prefer 2 but we should do one or the other

[ayjayt]

what are the configuration options for the modebar? can we fix the formatting? can we choose one of two accessibility strategies?

[ayjayt]

also we need to fix the dist/ build/ folders, ill figure out who I should cc

[ayjayt]

@gvwilson this is an accessibility which makes the modebar tab-able (some of the buttons require a mouse but not all of them). Can someone on your team clarify for us what we need to run to fix the build/ and dist/ folders to submit the PR properly?

@davidangarita1, I'd like some help understand the modebar a little better. Do you understand how its configured and what its options are?

[ayjayt]

@ayjayt Here I share with you the explanation of the buttons on the mode bar

The order of explanation will be from the icon on the left to the one on the right.

Download plot as a PNG: Saves the chart as a PNG image file. Zoom: Click and drag to zoom into a specific area. Pan: Click and drag to move the view of the chart. Box Select: Select data points within a rectangular area. Lasso Select: Select data points within a freeform (lasso) shape. Zoom in: Incrementally zooms in on the plot. Zoom out: Incrementally zooms out of the plot. Autoscale: Automatically fits the data within the plot area. Reset axes: Resets zoom and axis limits to their original state. Plotly logo: Opens the Plotly homepage in a new tab. It doesn’t affect the chart.

I'm interested in changing the modebar through configuration

[davidangarita1]

@ayjayt here is the config an options:
https://plotly.com/javascript/configuration-options/#force-the-modebar-to-always-be-visible

[ayjayt]

Yeah so let's just make sure no options interfere with the accessibility setup and vice versa

[ayjayt]

just some questions

[ayjayt]

@davidangarita1 do we still use this?

[davidangarita1]

By converting the Anchor to Button they were misaligned, this style is to focus the Plotly logo into the mode bar

[ayjayt]

i mean the anchor tag, is there still an anchor tag?

edit: ok, i get it

[ayjayt]

@davidangarita1 why did we get rid of this?

[davidangarita1]

By converting the anchor to Button they are misaligned, this style is that the buttons icon is centered

[emilykl]

Thank you for this work @davidangarita1 ! This is huge!

In Chrome I was able to tab through the modebar buttons and use Enter/Space to activate the ones that don't require mouse input 🎉

Is there additional functionality I should try out?

Couple things I noticed, you can let me know if you see this behavior as well:

• "Autoscale" and "Home" buttons don't seem to do anything when I hit Enter/Space, even though they shouldn't require mouse input. Autoscale should fit the axes ranges to the data, and Home should reset to the initial axes ranges.
• Tabbing doesn't seem to work at all in Safari, at least the version I have on my machine (Safari 17)

BTW, in case it's helpful for testing, if you add this key/value pair to the plot's config object, it will add ALL the available modebar buttons to the chart. However note that some buttons will only appear on certain types of charts, for example the 3d buttons will only appear on 3D charts.

modeBarButtonsToAdd: ["sendDataToCloud", "editInChartStudio", "zoom2d", "pan2d", "select2d", "lasso2d", "drawclosedpath", "drawopenpath", "drawline", "drawrect", "drawcircle", "eraseshape", "zoomIn2d", "zoomOut2d", "autoScale2d", "resetScale2d", "hoverClosestCartesian", "hoverCompareCartesian", "zoom3d", "pan3d", "orbitRotation", "tableRotation", "resetCameraDefault3d", "resetCameraLastSave3d", "hoverClosest3d", "zoomInGeo", "zoomOutGeo", "resetGeo", "hoverClosestGeo", "hoverClosestGl2d", "hoverClosestPie", "resetViewSankey", "toggleHover", "resetViews", "toggleSpikelines", "resetViewMapbox", "resetViewMap", "zoomInMapbox", "zoomInMap", "zoomOutMapbox", "zoomOutMap"]

[davidangarita1]

@emilykl Thank you so much for the thoughtful feedback — I really appreciate it!

Regarding the "Autoscale" and "Home" buttons: those should reset the chart when zooming or panning has occurred. So if you zoom into the plot, pressing those buttons (via Enter/Space or mouse) should restore the axes to their default ranges. Let me know if that's not happening for you!

Great point as well about testing with all the modebar buttons. When enabling all of them, keep in mind that some — like "Draw closed freeform" — are not keyboard-accessible even if they receive focus. That’s because their functionality depends on direct mouse interaction to draw on the chart, so triggering them via keyboard won’t result in any visible action.

As for Safari, I’ll look into compatibility with the version you mentioned (Safari 17) to see if recent changes are working properly there.

Thanks again for testing this so thoroughly — it's super helpful!

[emilykl]

Regarding the "Autoscale" and "Home" buttons: those should reset the chart when zooming or panning has occurred. So if you zoom into the plot, pressing those buttons (via Enter/Space or mouse) should restore the axes to their default ranges.

Hah, I swear I was already doing this, but in any case, it's working now!

Have you been able to test in Safari? Still not working for me in Safari, but Chrome and Firefox work great (on Mac). I'll try updating to the latest Safari and see if that changes anything.

@davidangarita1 @ayjayt Do you want me to look into the failing Jasmine tests?

[ayjayt]

@emilykl, Davids on vacation at the moment, I'm burning the candle from both ends coming up for a launch, and all the accessibility stuff is pro bono (which david might do on vaca anyway), but any help is appreciated.

we need to get some better mac testing in our office in general, so any help there is definitely appreciated since we have a gap.

[emilykl]

@davidangarita1 If you pull commit b6e4865 onto your branch it should fix the jasmine tests.

@davidangarita1 I'm also wondering if you know what additional code would be required if we were to keep the modebar buttons as <a> elements rather than switching to <button> elements.

It's probably OK to make the change, and I'm a fan of the simplicity, but I'm just thinking about unintended consequences, for example breaking custom CSS that people may have added to their pages. So just want to make sure I understand the alternative.

(I realize you're on vacation right now so no rush, this can wait until you get back!)

[ayjayt]

@emilykl we built both, there's some javascript that more or less changes the <a> tag to imitate the <button> tag

[emilykl]

@ayjayt Oh cool! Would you mind pushing that code to a separate branch so I could take a look?

Again I realize you're in crunch time so no rush on this one.

[ayjayt]

Here's the diff to this branch:

ajp@lenovo-arch ~/projects/PLOTLY/plotly.js % git diff david/enhancement-modebar -- '*.css' '*.scss' '*.js' ':!dist/*'
diff --git a/src/components/modebar/modebar.js b/src/components/modebar/modebar.js
index 4a2ce19ff..4f99bef9e 100644
--- a/src/components/modebar/modebar.js
+++ b/src/components/modebar/modebar.js
@@ -146,9 +146,9 @@ proto.createGroup = function() {
  */
 proto.createButton = function(config) {
     var _this = this;
-    var button = document.createElement('button');
+    var button = document.createElement('a');

-    button.setAttribute('type', 'button');
+    button.setAttribute('tabindex', '0');
     button.setAttribute('rel', 'tooltip');
     button.className = 'modebar-btn';

@@ -180,6 +180,15 @@ proto.createButton = function(config) {
             // only needed for 'hoverClosestGeo' which does not call relayout
             _this.updateActiveButton(ev.currentTarget);
         });
+        button.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter' || e.key === ' ') {
+                const activeButton = e.target.closest('.modebar-btn');
+                if (activeButton) {
+                    activeButton.click();
+                    e.preventDefault();
+                }
+            }
+        });
     }

     button.setAttribute('data-toggle', config.toggle || false);

It's here: https://github.com/geopozo/plotly.js/tree/andrew/anchor-not-button-aria

I tried to visualize it (the diff) with github but github didn't do it well.

[ayjayt]

geopozo#3

I have like 8 remotes in my local right now and I want to nuke everything.