Page MenuHomePhabricator

Page up/down, home and end don't work for navigating select lists in OOUI
Open, Needs TriagePublicBUG REPORT

Description

List of steps to reproduce (step by step, including full links if applicable):

  • Open https://commons.wikimedia.org/ while logged out
  • Open the "Language select" menu
  • Try using page up/down, home and end to navigate the list
  • Close that menu
  • Click "What links here"
  • Click "What links here"
  • Open the "Namespace" menu
  • Try using page up/down, home and end to navigate the list

What happens?:
In an unstyled menu like the language selector, page up/down, home and end can be used for navigating the list. In styled menus, like the one on Special:WhatLinksHere, page up/down, home and end navigate the page instead.

What should have happened instead?:
Page up/down, home and end should navigate through styled lists in the same way they do for unstyled lists.

Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc.:

Event Timeline

matmarex added a subscriber: matmarex.

I'm very surprised OOUI didn't have it, we even have type-to-search in select lists, but apparently we forgot about these navigation keys.

I want to note that the desired behavior of page up/down is not obvious. Browsers treat them differently, and in some cases it's pretty silly. Testing on my Windows 10 laptop, I see the following behavior for page up/down on the attached demo page:

ChromeFirefoxInternet Explorer
While dropdown is openMoves up/down by exactly 19 items (regardless of the height of the dropdown)Moves up/down by one page, but maximum height of the dropdown is limited, so never more than 19 itemsMoves up/down by one page, but maximum height of the dropdown is limited, so never more than 29 items
While dropdown is focused, but closedMoves up/down by 3 itemsMoves up/down by 19 itemsMoves up/down by 29 items

(I am not joking, they really behave exactly like this. If anyone would like to try this out on a different operating systems and browsers, it might be interesting to compare the results.)

I'm going to make page up/down for OOUI dropdowns always move by exactly 10 items. It might seem more intuitive to make it move by one page, but it's not obvious what we should do for closed dropdowns in that case, and I think that it'd be weird if two dropdowns on the page acted differently just because we have more or less space to display their select lists. I picked 10 because I like it, but I'm happy to change it if anyone can make a case for a different number.

Also, as I was working on this, I realized that our handling of arrow keys is different from the browsers. Arrow keys would not change the selection while dropdown is closed (they opened it instead), and they would wrap around at the beginning and end of the list. I'm going to change this as well.

Change 805229 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[oojs/ui@master] SelectWidget: Add Home/End/PageUp/PageDown support, tweak arrow keys wrapping

https://gerrit.wikimedia.org/r/805229

@Nikki You can try out the new behavior at https://patchdemo.wmflabs.org/wikis/9a29514b6d/wiki/Special:WhatLinksHere (and other pages on that wiki), I'd appreciate if you could check if everything is as expected.