ActionPopover - opening with Up Arrow focuses first element rather than last

[robinzigmond]

Description

From the code in the ActionPopover component, it is apparent that pressing the up arrow key is supposed to open the menu with the last focusable item focused. We have:

• a unit test for this behaviour (which passes, although it does not when attempting to convert it to RTL - I am not sure why the test passes) https://github.com/Sage/carbon/blob/master/src/components/action-popover/action-popover.spec.tsx#L837
• a Playwright test (currently skipped due to presumably-unrelated focus flakiness) https://github.com/Sage/carbon/blob/master/src/components/action-popover/action-popover.pw.tsx#L164
• code within the component itself that is clearly designed to accomplish this (note the else if clause that this is inside) https://github.com/Sage/carbon/blob/master/src/components/action-popover/action-popover.component.tsx#L177

Yet not only does an RTL unit test for this behaviour fail, it fails when tested in the browser in our Storybook docs.

Reproduction

https://carbon.sage.com/?path=/docs/action-popover--docs

Steps to reproduce

Tab to menu button and open by pressing the up arrow. The first item is focused, rather than the last.

JIRA ticket numbers (Sage only)

No response

Suggested solution

Confirm with UX/accessibility whether this behaviour (focusing the last element) is actually wanted or not (there is a comment in the code referring to ARIA best practices and referencing https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/, but that example focuses the first element, not the last, when opened with the up arrow key).

If focus-last-element is correct, then we should fix the bug, and uncomment the commented-out RTL test that I am adding for this.

If focus-first-element is correct, then the existing code and tests which claim to implement this should be removed, and tests added to ensure that the first element is focused instead.

Carbon version

latest

Design tokens version

No response

Relevant browsers

Chrome

Relevant OSs

MacOS

Additional context

No response

Confidentiality

• I confirm there is no confidential or commercially sensitive information included.

[edleeks87]

@tempertemper @ljemmo @harpalsingh would you be able to steer on what the desired behaviour is here please?

[ljemmo]

@edleeks87 Having had a play around with other products and design systems, i think the desired behaviour would be to indeed open the last item as opposed to the first when the up arrow is pressed. Any objections @harpalsingh and @tempertemper?

[nicktitchmarsh]

FE-6793

[tempertemper]

On balance, I think removing the up/down-to-open the menu is perhaps the right direction. Just a simple button press (click, Enter, Space, etc.) to open/close.

The up/down behaviour was either left in or added as an enhancement to the standard keyboard behaviour (I was part of this conversation and saw no issue), but I wonder if we're trying too hard. Just let the button behave like a button.

That would also mean we're not hijacking scroll for keyboard users who focus on the button and don't want to interact with it, but instead want to scroll the page using the arrow keys (default behaviour).

[carbonci]

🎉 This issue has been resolved in version 143.2.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀