[Tree-item] No focus present when navigating via keyboard

[rpanichakit9541]

Summary

When using keyboard navigation, the tree and tree-item components do not have a focus present.

Actual Behavior

No focus present on the components.

Expected Behavior

A focus should be present on the tree and tree-item components.

Reproduction Sample

https://codepen.io/rpanichakit/pen/wvxEJvG

Reproduction Steps

Use your keyboard to navigate through the calcite-tree-item, and notice that there's no focus present.

Reproduction Version

1.0.3

Working W3C Example/Tutorial

No response

Relevant Info

No response

Regression?

beta.99

Esri team

ArcGIS Online

[geospatialem]

@rpanichakit9541 Thanks for reaching out! Accessibility for tree structures follows the tree role, which would expand/collapse tree-items with the Arrow right/Arrow left keys respectively. We've documented a similar keyboard navigation in the components keyboard navigation.

However, there does seem to be a different with the component's focus, which occurred somewhere between beta.99 and 1.0.3. @jcfranco This might be a good one to tackle either in the upcoming patch of February release - WDYT?

Example behavior with focus below:

beta.99

1.0.3

[rpanichakit9541]

@geospatialem - Thank you for the quick reply. I apologize I missed that keyboard navigation section. Feel free to reuse this for the focus issue or close it.

[geospatialem]

Updated the issue labels, as the focus functionality works as-expected in Firefox, but does not display in Chrome or Microsoft Edge. Identified when @Elijbet was working through a fix.

[github-actions[bot]]

Installed and assigned for verification.

[geospatialem]

Verified in Storybook with Chrome, Edge, and Firefox.