Skip to content

David/enhancement modebar #7429

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

Open
wants to merge 17 commits into
base: master
Choose a base branch
from
Open

David/enhancement modebar #7429

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
54d1253
Add role="toolbar" to enhance accessibility semantics
davidangarita1 May 28, 2025
318530e
Add tabindex="0" to buttons
davidangarita1 May 28, 2025
ebb7b12
Add custom CSS class "modebar--custom"
davidangarita1 May 28, 2025
8748342
Add aria label
davidangarita1 May 29, 2025
fd9ad69
Add modebar tabindex 0
davidangarita1 May 29, 2025
e2c6615
Add listener of Intro key for Modebar buttons
davidangarita1 May 29, 2025
a2fa286
Move button listener
davidangarita1 May 29, 2025
06d3d1f
Add style for focus in modebar
davidangarita1 May 29, 2025
e557ee1
Change "a" tag for "button" tag
davidangarita1 Jun 3, 2025
9386b15
Add styles for focus in button
davidangarita1 Jun 3, 2025
6dc49c9
Change the indentation to the correct format
davidangarita1 Jun 3, 2025
905cab1
Update build
davidangarita1 Jun 3, 2025
363a873
Fix scss indentation
davidangarita1 Jun 4, 2025
165dffe
Remove unnecessary js for the button
davidangarita1 Jun 4, 2025
904e64a
Fix indentation for spaces
davidangarita1 Jun 4, 2025
605c627
Merge remote-tracking branch 'origin/master' into david/enhancement-m…
davidangarita1 Jun 4, 2025
663dbf1
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
13 changes: 9 additions & 4 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 @@ -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';

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 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 {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@davidangarita1 do we still use this?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

@ayjayt ayjayt Jun 5, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

edit: ok, i get it

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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@davidangarita1 why did we get rid of this?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

}

&.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;
}
}
}
}