Thanks to visit codestin.com
Credit goes to github.com

Skip to content

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

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

Merged
merged 22 commits into from
Jul 25, 2025
Merged

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

Changes from 1 commit
Commits
Show all changes
22 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
b17b7f0
Merge remote-tracking branch 'origin/master' into david/enhancement-m…
ayjayt Jun 17, 2025
0f7e1e5
Merge branch 'master' into david-enhancement-modebar-emilykl
emilykl Jul 23, 2025
dbd4594
update jasmine tests
emilykl Jun 17, 2025
b250897
add draftlog
emilykl Jul 24, 2025
4698ac6
Update 7492_add.md
emilykl Jul 25, 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
Prev Previous commit
Next Next commit
Change the indentation to the correct format
  • Loading branch information
@davidangarita1
davidangarita1 committed Jun 3, 2025
commit 6dc49c9e5fe12768f122eaa8d8842822d3e6a153
109 changes: 55 additions & 54 deletions src/css/_modebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,85 +1,86 @@
.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;
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;
}
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;
border: none;
background: transparent;

svg {
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;

&:focus-visible {
outline: 1px solid black;
outline-offset: 1px;
border-radius: 3px;
}
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;
}
}
}
}