-
-
Notifications
You must be signed in to change notification settings - Fork 6.9k
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
feat(VMenu): add jump to first/last item keyboard navigation #12348
feat(VMenu): add jump to first/last item keyboard navigation #12348
Conversation
pressing HOME in a v-menu selects the first selectable list item, END the last
9f9b474
to
6a1e306
Compare
@@ -432,7 +452,7 @@ export default baseMixins.extend({ | |||
this.$nextTick(() => activator && activator.focus()) | |||
} else if ( | |||
!this.isActive && | |||
[keyCodes.up, keyCodes.down].includes(e.keyCode) | |||
[keyCodes.up, keyCodes.down, keyCodes.home, keyCodes.end].includes(e.keyCode) |
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.
https://www.w3.org/TR/wai-aria-practices/#menubutton only mentions up/down, and none of the sections you linked explicitly state that home/end should also open the menu.
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.
You are absolutely correct! While focusing a select, home and end should only select the first/last selectable item and should not open the menu.
Sorry for the inconvenience. I will fix this as soon as I can.
@@ -424,6 +428,22 @@ export default baseMixins.extend({ | |||
this.listIndex-- | |||
if (tile.tabIndex === -1) this.prevTile() | |||
}, | |||
lastTile () { | |||
const tile = this.tiles[this.tiles.length - 1] |
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.
const tile = this.tiles[this.tiles.length - 1] | |
const tile = this.tiles[this.tiles.length - 1] | |
if (tile.tabIndex === -1) this.prevTile() | ||
}, | ||
firstTile () { | ||
const tile = this.tiles[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.
const tile = this.tiles[0] | |
const tile = this.tiles[0] | |
I incorporated the feedback. When you test the changes, you might notice a bug: The select loses the focus after up/down/home/end was pressed. This problem was not introduced by my changes. |
Co-authored-by: Kael <kaelwd@gmail.com>
pressing HOME in a v-menu selects the first selectable list item, END the last
Description
I am not aware of any related open issues.
Motivation and Context
VSelect uses the VMenu component. On long lists it is convenient to use HOME/END to navigate to the top/bottom. This is an optional behaviour according to the W3C and is implemented in their examples. The
<select>
HTML element as implemented in Chrome/Firefox (Windows/Linux) provides this functionality too.Moreover, a menu as defined by the W3C is required to be navigable using these two buttons.
How Has This Been Tested?
A new unit test was created for checking the new behaviour.
Markup:
Types of changes
Checklist:
master
for bug fixes and documentation updates,dev
for new features and backwards compatible changes andnext
for non-backwards compatible changes).The last checklist item is not necessary in my opinion. Please correct me if I am wrong.