-
-
Notifications
You must be signed in to change notification settings - Fork 126
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.
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
ARIA MenuBar keyboard interaction improvements #477
base: main
Are you sure you want to change the base?
Conversation
Probably worth reviewing this PR with comments from the previous one: #465 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm loving these UX improvements!
Sorry it took me so long to get around to reviewing this PR. I never saw the notification from my at-mention.
This PR is in draft mode because... you're planning on adding tests?
|
||
// End | ||
if (kc === 35) { | ||
this.activateLastItem(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this.activateLastItem(); | |
this.activateLastItem(); | |
return; |
return; | ||
} | ||
|
||
// Home | ||
if (kc === 36) { | ||
this.activateFirstItem(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this.activateFirstItem(); | |
this.activateFirstItem(); | |
return; |
this.activeIndex = ArrayExt.findFirstIndex( | ||
this._items, | ||
Private.canActivate, | ||
0, | ||
this._items.length | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this.activeIndex = ArrayExt.findFirstIndex( | |
this._items, | |
Private.canActivate, | |
0, | |
this._items.length | |
); | |
this.activeIndex = ArrayExt.findFirstIndex( | |
this._items, | |
Private.canActivate | |
); |
this.activeIndex = ArrayExt.findFirstIndex( | ||
this._items, | ||
Private.canActivate, | ||
this._items.length, | ||
0 | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this.activeIndex = ArrayExt.findFirstIndex( | |
this._items, | |
Private.canActivate, | |
this._items.length, | |
0 | |
); | |
this.activeIndex = ArrayExt.findLastIndex( | |
this._items, | |
Private.canActivate | |
); |
* Set the parent MenuBar, if the Menu is contained within one. | ||
*/ | ||
set parentMenuBar(value: MenuBar) { | ||
this._parentMenuBar = value; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Probably need to set this to null
in the dispose
method.
closeMenu(): void { | ||
// Bail if the menu is not attached. | ||
if (!this.isAttached) { | ||
return; | ||
} | ||
|
||
// Cancel the pending timers. | ||
this._cancelOpenTimer(); | ||
this._cancelCloseTimer(); | ||
|
||
// Close the root menu before executing the command. | ||
this.rootMenu.close(); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure I'm familiar enough with the Menu class to adequately review this method.
const recentMenu = new Menu({ commands: commands }); | ||
recentMenu.title.label = 'Open Recent'; | ||
addMenuItem( | ||
commands, | ||
recentMenu, | ||
'file1', | ||
'File1.txt', | ||
'File > Open Recent > File1.txt' | ||
); | ||
addMenuItem( | ||
commands, | ||
recentMenu, | ||
'file2', | ||
'File2.md', | ||
'File > Open Recent > File2.md' | ||
); | ||
addMenuItem( | ||
commands, | ||
recentMenu, | ||
'file3', | ||
'File3.xml', | ||
'File > Open Recent > File3.xml' | ||
); | ||
addMenuItem( | ||
commands, | ||
recentMenu, | ||
'file4', | ||
'File4.txt', | ||
'File > Open Recent > File4.txt' | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Readability:
const recentMenu = new Menu({ commands: commands }); | |
recentMenu.title.label = 'Open Recent'; | |
addMenuItem( | |
commands, | |
recentMenu, | |
'file1', | |
'File1.txt', | |
'File > Open Recent > File1.txt' | |
); | |
addMenuItem( | |
commands, | |
recentMenu, | |
'file2', | |
'File2.md', | |
'File > Open Recent > File2.md' | |
); | |
addMenuItem( | |
commands, | |
recentMenu, | |
'file3', | |
'File3.xml', | |
'File > Open Recent > File3.xml' | |
); | |
addMenuItem( | |
commands, | |
recentMenu, | |
'file4', | |
'File4.txt', | |
'File > Open Recent > File4.txt' | |
); | |
const recentMenu = createRecentSubmenu(); |
@@ -29,6 +29,7 @@ import { | |||
VirtualDOM, | |||
VirtualElement | |||
} from '@lumino/virtualdom'; | |||
import { MenuBar } from './menubar'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
import { MenuBar } from './menubar'; | |
import type { MenuBar } from './menubar'; |
This lets the code reader know that we're not actually creating MenuBar
instances in this file, just using it for type definitions.
return; | ||
} | ||
|
||
// Home |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// Home | |
// Home - select (without opening) the first menu in the menubar |
return; | ||
} | ||
|
||
// End |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// End | |
// End - select (without opening) the last menu in the menubar |
Thanks for the comments. I haven't had any time to progress this and won't get around to replying until next week, so no worries about the delay. As you said, the PR is in draft form, because I have no tests yet. |
@scmmmh would you mind if I take over this PR? |
Yes please. It has been hovering over my head, but I just haven't been able to allocate time to it. |
This is an extension of my previous work on improving the MenuBar keyboard navigation ARIA compliance. This should now implement all the required keyboard interaction patterns. I've not created any test cases for this yet, but that is the next step.
@gabalafou If you have time to have a look, that would be great. Then I'll do some more work on getting some test-cases set up for this.