Skip to content

Andrew/anchor not button aria #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 4 commits into
base: david/enhancement-modebar
Choose a base branch
from
Draft

Andrew/anchor not button aria #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1858a3b
Change button back to anchor
ayjayt Jun 17, 2025
2f5e6df
Fix indentation for spaces
davidangarita1 Jun 4, 2025
6627552
Merge remote-tracking branch 'origin/master' into andrew/anchor-not-b…
ayjayt Jun 17, 2025
933247b
Re-add deleted files from dist
davidangarita1 Jun 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions build/plotcss.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;",
Expand Down
20 changes: 17 additions & 3 deletions src/components/modebar/modebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand Down Expand Up @@ -147,6 +148,7 @@ proto.createButton = function(config) {
var _this = this;
var button = document.createElement('a');

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

Expand All @@ -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);

Expand All @@ -175,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);
Expand Down
28 changes: 22 additions & 6 deletions src/css/_modebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -17,6 +17,10 @@
opacity: 1;
}

&:focus-within .modebar--hover .modebar-group {
opacity: 1;
}

.modebar-group {
float: left;
display: inline-block;
Expand All @@ -25,6 +29,11 @@
position: relative;
vertical-align: middle;
white-space: nowrap;

a {
display: grid;
place-content: center;
}
}

.modebar-btn {
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -67,4 +83,4 @@
text-align: center;
}
}
}
}
Loading