Cannot change list style with keyboard

[LukaszGudel]

📝 Provide detailed reproduction steps (if any)

1. Go to https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/features/lists/lists.html#demo-2
2. Focus the editor and press Alt+F10.
3. Use keyboard arrows to navigate to list styles dropdown.
4. Open dropdown with space or enter key.
5. Try to select a different list style with arrows.

✔️ Expected result

You are able to use arrows to choose a different style.

❌ Actual result

After opening the dropdown you are unable to change the style with arrows.

Notes:

• this scenario works on https://ckeditor.com/docs/ckeditor5/latest/features/lists/lists.html#demo-2 demo
• regression on current master branch, possibly related to recent changes to list styles

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[Reinmar]

Today:

ckeditor5/packages/ckeditor5-list/src/ui/listpropertiesview.js

Lines 139 to 145 in 82ce2e9

	actions: {
	// Navigate #children backwards using the <kbd>Shift</kbd> + <kbd>Tab</kbd> keystroke.
	focusPrevious: 'shift + tab',
	// Navigate #children forwards using the <kbd>Tab</kbd> key.
	focusNext: 'tab'
	}

Previously, we used toolbar view which supports arrows:

ckeditor5/packages/ckeditor5-ui/src/toolbar/toolbarview.js

Lines 182 to 188 in 82ce2e9

	actions: {
	// Navigate toolbar items backwards using the arrow[left,up] keys.
	focusPrevious: [ isRtl ? 'arrowright' : 'arrowleft', 'arrowup' ],
	// Navigate toolbar items forwards using the arrow[right,down] keys.
	focusNext: [ isRtl ? 'arrowleft' : 'arrowright', 'arrowdown' ]
	}

This means that the behavior changed – currently you need to use the Tab key, previously arrows worked. I think that arrows should still work, but it requires a deeper analysis of what should Tab do and what arrows in this entire panel.

[bbenjamin]

Tabs don't work for me, that results in focus leaving the toolbar entirely. I also think that's a reasonable expectation for tab and the arrow support should come back. Aside from it being a good pattern to expect, it's also what how highlighter currently works and it's probably best if there's consistency even if there are potential future changes to keyboard navigation https://ckeditor.com/docs/ckeditor5/latest/examples/builds-custom/full-featured-editor.html

[mlewand]

Arrows should definitely be handled - that's the first thing that should work for grid-like components (like list styles). Regarding the tab we need to investigate it further to see what would be the most optimal solution.

[wimleers]

FYI: tracking this at https://www.drupal.org/project/drupal/issues/3283800 😊