[a11y]: Keyboard operation for menu on pagination component

[thefirstartist]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

v11

React version

v1.38

Automated testing tool and ruleset

n/a

Assistive technology

No response

Description

1. It seems the dropdowns are opened with Space or with up or down arrows only. However, ARIA APG suggests using Enter key as the default key and the Space as optional to open the menu. (ARIA Guidance). We also use Enter key to open the menu in Carbon's Dropdown component. Shouldn't we do the same here to be consistent?
2. When the menu is opened, pressing Tab key should be able to close the menu and move the focus to the next focusable item.
3. A pagination contains multiple menu items and navigation buttons. It is a composite widgets as described in the practice for Keyboard Navigation Inside Components, similar to a menubar or toolbar. I think it makes more sense to move the focus with arrow keys, instead of the tab key, inside the component.

WCAG 2.1 Violation

WCAG 2.2.1 Keyboard

Reproduction/example

n/a

Steps to reproduce

[Component live demo]()

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems

[tw15egan]

We are using the browser default Select under the hood in Pagination, without any additional keyboard handling. The two implementations (Select and Pagination) should match:

Pagination Select

I am unable to open a browser default Select element with Enter, and I am not seeing focus move from one Select to the next on Tab press when a menu is open. https://stackblitz.com/edit/github-xdecs2?file=src%2FApp.jsx

Dropdown is a custom Carbon listbox that is powered by Downshift under the hood.

I'd like to know what @mbgower thinks about this one, and if the browser default Select element needs additional handlers.

[mbgower]

As @tw15egan points out, what you folks are encountering is the native HTML select component behaviour on a Mac. While I agree with Sam that it would be nice if it behaved like a dropdown and opened on Enter, the fact is that it does not. Note that if you are on a Windows system, you can Tab away from an open select (or, more accurately, pressing Tab will collapse an open select, populating it with the item with focus, and then you press Tab again to move). But the same open-with-spacebar limitation exists on the Windows system. It also won't open with down arrow on either OS (it simply cycles through the choices without opening).

So this isn't a bug. It is expected behaviour.

In regard to the request to make arrow keys move between components, it would be technically very difficult to do here, and I don't see it as necessary or even better. The values in a Select are cycled with both the up/down arrow keys AND the left/right arrow keys. So how would you be able to move away from a select with an arrow key? The normal way of moving away from an input is Tab, and that works fine here.

[thefirstartist]

Yes, it would be nice if it behaved like a dropdown and expand on Enter. It's an expected behavior for a dropdown, accordion, and most elements with a chevron icon. I understand the native HTML select component does not support Enter on a Mac, but it looks like a defect from users' perspective. Enter key expands and collapses dropdowns on Gmail, Yahoo mail, Google, and it also works on Oracle, Salesforce, and pretty much everywhere I familiar with.

[tw15egan]

We purposely do not override any of the browser defaults for the Select component. All of these functionalities should exist in the Dropdown component, so outside of the Pagination component, you can use that.

I believe the reason we use Select in the Pagination component is because it is better suited to handle large lists of numbers (we've gotten issues that people have hundreds of items in their Pagination select), and will overlay any containers with overflow: hidden it is contained inside. Once the floating-ui improvements have been made (https://github.com/carbon-design-system/carbon/issues/14139), we can take a look and see if it is possible to refactor the Pagination to use Dropdown. For right now, however, we don't plan on making any changes to the behavior.