Page MenuHomePhabricator

Keyboard navigation does not always scroll the dropdown menu
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT

Description

What is the problem?

When the dropdown menu has a scroll, you cannot always scroll it using keyboard navigation. The focus goes out of view.

I can reproduce it with all the demo dropdown menus on https://doc.wikimedia.org/codex/latest/components/demos/lookup.html except for "With fetched results and infinite scroll" and "Form field".

Steps to reproduce problem
  1. Go to https://doc.wikimedia.org/codex/latest/components/demos/lookup.html#default
  2. (Without scrolling the viewport) In the first dropdown menu, type "a"
  3. Press the down arrow to try to select an item not currently visible

Expected behaviour: The menu is scrolled down to follow the focus
Observed behaviour: The focus goes out of view

Environment

Browser: Firefox 115 and Chromium 120 on Debian 11. Safari 17.3 Mac OS Sonoma. Chrome 123 on Windows 11.

Screenshots

Example from Chromium 120:


Acceptance Criteria

  • Keying up or down on a list of menu items should scroll the item into view.
    • Inside Menu.vue, the maybeScrollIntoView() function calls a Web API method called scrollIntoView().
    • Maintain the scroll index logic which says the scroll should start at the highlighted menu item when one exists, otherwise start at the top of the list (index 0).
  • Ensure the Menu and components that have a Menu behave as expected.
    • Check these components: Menu, Lookup, Select, MenuButton, Combobox, and TypeaheadSearch.
    • Note: TypeaheadSearch is an exception. It doesn't have a scrollable menu nor does it implement FloatingUI.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
CCiufo-WMF subscribed.

To be discussed at next sprint planning.

CCiufo-WMF set the point value for this task to 3.Apr 15 2024, 5:41 PM
CCiufo-WMF triaged this task as Medium priority.Apr 15 2024, 5:47 PM
CCiufo-WMF raised the priority of this task from Medium to High.
CCiufo-WMF lowered the priority of this task from High to Medium.May 13 2024, 6:27 PM
CCiufo-WMF lowered the priority of this task from Medium to Low.Aug 23 2024, 8:02 PM
CCiufo-WMF added a project: Accessibility.
CCiufo-WMF moved this task from Up Next to Needs Refinement on the Design-System-Team board.
CCiufo-WMF removed the point value for this task.

The Menu's scrolling behavior was not working because the maybeScrollIntoView() function had an early return, preventing the scroll from occurring. The early return prevented scrolling when certain conditions like visibleItemLimit or highlightedMenuItemIndex were missing. Refer to: https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/menu/Menu.vue#758

		/**
		 * If the menu is scrollable, and an item is highlighted, scroll the highlighted item
		 * into view.
		 */
		function maybeScrollIntoView(): void {
			if (
				!props.visibleItemLimit ||
				props.visibleItemLimit > props.menuItems.length ||
				highlightedMenuItemIndex.value === undefined
			) {
				return;
			}
			const scrollIndex = highlightedMenuItemIndex.value >= 0 ?
				highlightedMenuItemIndex.value :
				0;
			menuItemElements[ scrollIndex ].scrollIntoView( {
				behavior: 'smooth',
				block: 'nearest'
			} );
		}

We can refactor the maybeScrollIntoView() function while maintaining the scroll index logic by adjusting the return condition to ensure the scroll occurs even when no item is highlighted.

Note: The key navigation and focus behave correctly. You can Arrow up/Arrow down through the list of menu items and focus is not lost. The issue is that the scroll function returns early preventing the hidden menu items from being visible.

Change #1072820 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] [WIP] Menu: scroll menu items into view with keynav

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

Ensure the Menu and components that have a Menu behave as expected.

  • Check these components: Menu, Lookup, Select, MenuButton, Combobox, and TypeaheadSearch.

After checking all the demos on the Codex doc site, most but not all component's scroll behavior is correct. These are my findings:

ComponentDoes the scroll behavior work as intended?Notes
ComboboxYes-
LookupNoIn the demo "With initial selection and input", the scroll behavior works but it initially scrolls to the bottom of the page.
MenuYes-
MenuButtonYes-
SelectYes-
TypeaheadSearchNoThis is okay because the TaS menu is not scrollable and doesn't implement FloatingUI.

Change #1072820 merged by jenkins-bot:

[design/codex@main] Menu: scroll menu items into view with keynav

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

Change #1075945 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] Menu: scroll menu items into view with keynav

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

lwatson changed the task status from Open to In Progress.Sep 26 2024, 6:41 PM
lwatson updated the task description. (Show Details)

Change #1075945 merged by jenkins-bot:

[design/codex@main] Menu: key nav scrolls menu items into view

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

Change #1077085 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v1.13.0 to v1.13.0

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

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
http://patchdemo.wmcloud.org/wikis/f142db38be/w/

Change #1077085 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.13.0 to v1.13.1

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

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

http://patchdemo.wmcloud.org/wikis/f142db38be/w/