ARIA MenuBar keyboard interaction improvements #477
Conversation
fcollonval
added
enhancement
|
Probably worth reviewing this PR with comments from the previous one: #465 |
|
|
||
| // End | ||
| if (kc === 35) { | ||
| this.activateLastItem(); |
There was a problem hiding this comment.
| this.activateLastItem(); | |
| this.activateLastItem(); | |
| return; |
| return; | ||
| } | ||
|
|
||
| // Home | ||
| if (kc === 36) { | ||
| this.activateFirstItem(); |
There was a problem hiding this comment.
| this.activateFirstItem(); | |
| this.activateFirstItem(); | |
| return; |
| this.activeIndex = ArrayExt.findFirstIndex( | ||
| this._items, | ||
| Private.canActivate, | ||
| 0, | ||
| this._items.length | ||
| ); |
There was a problem hiding this comment.
| 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.
| 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.
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.
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.
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.
| 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.
| // Home | |
| // Home - select (without opening) the first menu in the menubar |
| return; | ||
| } | ||
|
|
||
| // End |
There was a problem hiding this comment.
| // 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.