Merge pull request #7492 from plotly/david-enhancement-modebar-emilykl

feat: Improve keyboard navigation of modebar (by @davidangarita1)

Author: emilykl

build/plotcss.js

@@ -34,9 +34,12 @@ var rules = {
     "X .ease-bg": "-webkit-transition:background-color .3s ease 0s;-moz-transition:background-color .3s ease 0s;-ms-transition:background-color .3s ease 0s;-o-transition:background-color .3s ease 0s;transition:background-color .3s ease 0s;",
     "X .modebar--hover>:not(.watermark)": "opacity:0;-webkit-transition:opacity .3s ease 0s;-moz-transition:opacity .3s ease 0s;-ms-transition:opacity .3s ease 0s;-o-transition:opacity .3s ease 0s;transition:opacity .3s ease 0s;",
     "X:hover .modebar--hover .modebar-group": "opacity:1;",
+    "X:focus-within .modebar--hover .modebar-group": "opacity:1;",
     "X .modebar-group": "float:left;display:inline-block;box-sizing:border-box;padding-left:8px;position:relative;vertical-align:middle;white-space:nowrap;",
-    "X .modebar-btn": "position:relative;font-size:16px;padding:3px 4px;height:22px;cursor:pointer;line-height:normal;box-sizing:border-box;",
-    "X .modebar-btn svg": "position:relative;top:2px;",
+    "X .modebar-group a": "display:grid;place-content:center;",
+    "X .modebar-btn": "position:relative;font-size:16px;padding:3px 4px;height:22px;cursor:pointer;line-height:normal;box-sizing:border-box;border:none;background:rgba(0,0,0,0);",
+    "X .modebar-btn svg": "position:relative;",
+    "X .modebar-btn:focus-visible": "outline:1px solid #000;outline-offset:1px;border-radius:3px;",
     "X .modebar.vertical": "display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-end;max-height:100%;",
     "X .modebar.vertical svg": "top:-1px;",
     "X .modebar.vertical .modebar-group": "display:block;float:none;padding-left:0px;padding-bottom:8px;",

draftlogs/7492_add.md

@@ -0,0 +1 @@
+- Make modebar keyboard-accessible via tabbing [[#7492](https://github.com/plotly/plotly.js/pull/7492)], with thanks to @davidangarita1 for the contribution!

src/components/modebar/modebar.js

@@ -43,9 +43,10 @@ proto.update = function(graphInfo, buttons) {
     var modeBarId = 'modebar-' + fullLayout._uid;
 
     this.element.setAttribute('id', modeBarId);
-    this._uid = modeBarId;
+    this.element.setAttribute('role', 'toolbar');
 
-    this.element.className = 'modebar';
+    this._uid = modeBarId;
+    this.element.className = 'modebar modebar--custom';
     if(context.displayModeBar === 'hover') this.element.className += ' modebar--hover ease-bg';
 
     if(fullLayout.modebar.orientation === 'v') {
@@ -145,8 +146,9 @@ proto.createGroup = function() {
  */
 proto.createButton = function(config) {
     var _this = this;
-    var button = document.createElement('a');
+    var button = document.createElement('button');
 
+    button.setAttribute('type', 'button');
     button.setAttribute('rel', 'tooltip');
     button.className = 'modebar-btn';
 
@@ -155,7 +157,10 @@ proto.createButton = function(config) {
     // for localization: allow title to be a callable that takes gd as arg
     else if(typeof title === 'function') title = title(this.graphInfo);
 
-    if(title || title === 0) button.setAttribute('data-title', title);
+    if(title || title === 0) {
+        button.setAttribute('data-title', title)
+        button.setAttribute("aria-label", title)
+    };
 
     if(config.attr !== undefined) button.setAttribute('data-attr', config.attr);
 

src/css/_modebar.scss

@@ -8,7 +8,7 @@
     @include vendor('transition', background-color 0.3s ease 0s);
 }
 
-.modebar--hover > :not(.watermark) {
+.modebar--hover> :not(.watermark) {
     opacity: 0;
     @include vendor('transition', opacity 0.3s ease 0s);
 }
@@ -17,6 +17,10 @@
     opacity: 1;
 }
 
+&:focus-within .modebar--hover .modebar-group {
+    opacity: 1;
+}
+
 .modebar-group {
     float: left;
     display: inline-block;
@@ -25,6 +29,11 @@
     position: relative;
     vertical-align: middle;
     white-space: nowrap;
+
+    a {
+        display: grid;
+        place-content: center;
+    }
 }
 
 .modebar-btn {
@@ -36,15 +45,20 @@
     cursor: pointer;
     line-height: normal;
     box-sizing: border-box;
+    border: none;
+    background: transparent;
 
     svg {
         position: relative;
-        top: 2px;
     }
 
-    &.modebar-btn--logo {
-
+    &:focus-visible {
+        outline: 1px solid black;
+        outline-offset: 1px;
+        border-radius: 3px;
     }
+
+    &.modebar-btn--logo {}
 }
 
 .modebar.vertical {
@@ -53,9 +67,11 @@
     flex-wrap: wrap;
     align-content: flex-end;
     max-height: 100%;
+
     svg {
-      top: -1px;
+        top: -1px;
     }
+
     .modebar-group {
         display: block;
         float: none;
@@ -67,4 +83,4 @@
             text-align: center;
         }
     }
-}
+}

test/jasmine/tests/modebar_test.js

@@ -69,15 +69,15 @@ describe('ModeBar', function() {
     }
 
     function countButtons(modeBar) {
-        return d3Select(modeBar.element).selectAll('a.modebar-btn').size();
+        return d3Select(modeBar.element).selectAll('button.modebar-btn, a.modebar-btn').size();
     }
 
     function countLogo(modeBar) {
         return d3Select(modeBar.element).selectAll('a.plotlyjsicon').size();
     }
 
     function checkBtnAttr(modeBar, index, attr) {
-        var buttons = d3Select(modeBar.element).selectAll('a.modebar-btn');
+        var buttons = d3Select(modeBar.element).selectAll('button.modebar-btn, a.modebar-btn');
         return d3Select(buttons[0][index]).attr(attr);
     }
 
@@ -1676,7 +1676,7 @@ describe('ModeBar', function() {
         it('add predefined shape drawing and hover buttons via layout.modebar.add', function(done) {
             function countButtons() {
                 var modeBarEl = gd._fullLayout._modeBar.element;
-                return d3Select(modeBarEl).selectAll('a.modebar-btn').size();
+                return d3Select(modeBarEl).selectAll('button.modebar-btn, a.modebar-btn').size();
             }
 
             var initial = 10;
@@ -1761,7 +1761,7 @@ describe('ModeBar', function() {
         it('remove buttons using exact (camel case) and short (lower case) names via layout.modebar.remove and template', function(done) {
             function countButtons() {
                 var modeBarEl = gd._fullLayout._modeBar.element;
-                return d3Select(modeBarEl).selectAll('a.modebar-btn').size();
+                return d3Select(modeBarEl).selectAll('button.modebar-btn, a.modebar-btn').size();
             }
 
             var initial = 10;
@@ -1842,7 +1842,7 @@ describe('ModeBar', function() {
         it('add buttons using template', function(done) {
             function countButtons() {
                 var modeBarEl = gd._fullLayout._modeBar.element;
-                return d3Select(modeBarEl).selectAll('a.modebar-btn').size();
+                return d3Select(modeBarEl).selectAll('button.modebar-btn, a.modebar-btn').size();
             }
 
             var initial = 10;
@@ -1865,7 +1865,7 @@ describe('ModeBar', function() {
             it('add ' + t + ' button if removed by layout and added by config', function(done) {
                 function countButtons() {
                     var modeBarEl = gd._fullLayout._modeBar.element;
-                    return d3Select(modeBarEl).selectAll('a.modebar-btn').size();
+                    return d3Select(modeBarEl).selectAll('button.modebar-btn, a.modebar-btn').size();
                 }
 
                 var initial = 10;
@@ -1886,7 +1886,7 @@ describe('ModeBar', function() {
         it('remove button if added by layout and removed by config', function(done) {
             function countButtons() {
                 var modeBarEl = gd._fullLayout._modeBar.element;
-                return d3Select(modeBarEl).selectAll('a.modebar-btn').size();
+                return d3Select(modeBarEl).selectAll('button.modebar-btn, a.modebar-btn').size();
             }
 
             var initial = 10;