[Menu Item] Allow keyboard navigation to open href link

[dmbrinkman]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

Using a keyboard to open a link to a menu item does not open the link specified in href.

To reproduce: See code pen example and repro steps

Expected Behavior

Keyboard navigation opens the linked page.

Notes from Adam Tirella:
I think we just need to add case for when href is populated, do not prevent default on the rendered internal anchor for enter / space.

Reproduction Sample

https://codepen.io/dmbrinkman/pen/qBgRPxp?editors=1000

Reproduction Steps

1. Run the codepen example
2. Click on Link using mouse
3. Page opens in a new tab
4. Use the keyboard Enter or Space bar to select Link
5. Page does not open

Reproduction Version

1.10.0

Relevant Info

No response

Regression?

No response

Priority impact

p2 - want for current milestone

Impact

No response

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

N/A

[macandcheese]

@geospatialem could you confirm the expected a11y behavior here? Both space and enter key should Navigate to the href if populated?

[geospatialem]

@geospatialem could you confirm the expected a11y behavior here? Both space and enter key should Navigate to the href if populated?

@macandcheese You're spot on - we'd want to support both space and enter - it looks like the a element and role are setup already, so we'd just need to support the same functionality with the keys that's provided with a click event.

[macandcheese]

FYI for verification - After speaking with @geospatialem - this should match other elements that conditionally render button / anchor (button, link, etc.) and only the enter key should open the link, not space.

[github-actions]

Installed and assigned for verification.

[DitwanP]

🍰 Verified locally on 2.1.0-next.10