David/enhancement modebar

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,17 +146,22 @@ 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('tabindex', '0');
     button.setAttribute('rel', 'tooltip');
     button.className = 'modebar-btn';
-
+    
     var title = config.title;
     if(title === undefined) title = config.name;
     // 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);
 
@@ -175,6 +181,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);

src/css/_modebar.scss

@@ -1,70 +1,85 @@
 .modebar {
-    position: absolute;
-    top: 2px;
-    right: 2px;
+  position: absolute;
+  top: 2px;
+  right: 2px;
 }
 
 .ease-bg {
     @include vendor('transition', background-color 0.3s ease 0s);
 }
 
 .modebar--hover > :not(.watermark) {
-    opacity: 0;
+  opacity: 0;
     @include vendor('transition', opacity 0.3s ease 0s);
 }
 
 &:hover .modebar--hover .modebar-group {
-    opacity: 1;
+  opacity: 1;
+}
+
+&:focus-within .modebar--hover .modebar-group {
+  opacity: 1;
 }
 
 .modebar-group {
-    float: left;
-    display: inline-block;
-    box-sizing: border-box;
-    padding-left: 8px;
-    position: relative;
-    vertical-align: middle;
-    white-space: nowrap;
+  float: left;
+  display: inline-block;
+  box-sizing: border-box;
+  padding-left: 8px;
+  position: relative;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  a {
+    display: grid;
+    place-content: center;
+  }
 }
 
 .modebar-btn {
-    position: relative;
-    font-size: 16px;
-    padding: 3px 4px;
-    height: 22px;
-    /* display: inline-block; including this breaks 3d interaction in .embed mode. Chrome bug? */
-    cursor: pointer;
-    line-height: normal;
-    box-sizing: border-box;
+  position: relative;
+  font-size: 16px;
+  padding: 3px 4px;
+  height: 22px;
+  /* display: inline-block; including this breaks 3d interaction in .embed mode. Chrome bug? */
+  cursor: pointer;
+  line-height: normal;
+  box-sizing: border-box;
+  border: none;
+  background: transparent;
 
-    svg {
-        position: relative;
-        top: 2px;
-    }
+  svg {
+    position: relative;
+  }
 
-    &.modebar-btn--logo {
+  &:focus-visible {
+    outline: 1px solid black;
+    outline-offset: 1px;
+    border-radius: 3px;
+  }
 
-    }
+  &.modebar-btn--logo {
+  }
 }
 
 .modebar.vertical {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    align-content: flex-end;
-    max-height: 100%;
-    svg {
-      top: -1px;
-    }
-    .modebar-group {
-        display: block;
-        float: none;
-        padding-left: 0px;
-        padding-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-content: flex-end;
+  max-height: 100%;
+  svg {
+    top: -1px;
+  }
+  .modebar-group {
+    display: block;
+    float: none;
+    padding-left: 0px;
+    padding-bottom: 8px;
 
-        .modebar-btn {
-            display: block;
-            text-align: center;
-        }
+    .modebar-btn {
+      display: block;
+      text-align: center;
     }
+  }
 }