Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
rpanichakit9541 opened this issue Jan 30, 2023 · 5 comments
Closed

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

rpanichakit9541 opened this issue Jan 30, 2023 · 5 comments
Assignees
Labels
4 - verified Issues that have been released and confirmed resolved. a11y Issues related to Accessibility fixes or improvements. ArcGIS Online Issues logged by ArcGIS Online team members. browser-chrome Issues tied to the last 2 versions of Chrome browser. browser-edge Issues tied to the last 2 versions of Edge browser. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. p - high Issue should be addressed in the current milestone, impacts component or core functionality regression Issues that are caused by changes in a release, but were working before that.

Comments

@rpanichakit9541
Copy link
Contributor

rpanichakit9541 commented Jan 30, 2023

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

@rpanichakit9541 rpanichakit9541 added 0 - new New issues that need assignment. a11y Issues related to Accessibility fixes or improvements. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. needs triage Planning workflow - pending design/dev review. p - high Issue should be addressed in the current milestone, impacts component or core functionality labels Jan 30, 2023
@github-actions github-actions bot added the ArcGIS Online Issues logged by ArcGIS Online team members. label Jan 30, 2023
@rpanichakit9541 rpanichakit9541 changed the title [Tree-item] Cannot expand/collapse parent tree node with keyboard [Tree-item] Cannot expand/collapse parent calcite-tree-item node with keyboard Jan 30, 2023
@geospatialem
Copy link
Member

@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

beta 99-tree

1.0.3

1 0 3-tree

@geospatialem geospatialem changed the title [Tree-item] Cannot expand/collapse parent calcite-tree-item node with keyboard [Tree-item] No focus present when navigating via keyboard Jan 30, 2023
@rpanichakit9541
Copy link
Contributor Author

@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 geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Jan 30, 2023
@geospatialem geospatialem added the regression Issues that are caused by changes in a release, but were working before that. label Jan 30, 2023
@Elijbet Elijbet added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Feb 4, 2023
@alisonailea alisonailea assigned geospatialem and unassigned Elijbet Feb 4, 2023
@geospatialem geospatialem added browser-edge Issues tied to the last 2 versions of Edge browser. browser-chrome Issues tied to the last 2 versions of Chrome browser. labels Feb 6, 2023
@geospatialem geospatialem assigned Elijbet and unassigned geospatialem Feb 6, 2023
@geospatialem
Copy link
Member

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.

Elijbet added a commit that referenced this issue Feb 6, 2023
…ng with keyboard (#6424)

**Related Issue:** #6376

## Summary
Reverses regression to bring back focus when navigating with the
keyboard and a small cleanup on the existing code.
@Elijbet Elijbet added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Feb 6, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Feb 6, 2023

Installed and assigned for verification.

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Feb 7, 2023
@geospatialem
Copy link
Member

Verified in Storybook with Chrome, Edge, and Firefox.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
4 - verified Issues that have been released and confirmed resolved. a11y Issues related to Accessibility fixes or improvements. ArcGIS Online Issues logged by ArcGIS Online team members. browser-chrome Issues tied to the last 2 versions of Chrome browser. browser-edge Issues tied to the last 2 versions of Edge browser. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. p - high Issue should be addressed in the current milestone, impacts component or core functionality regression Issues that are caused by changes in a release, but were working before that.
Projects
None yet
Development

No branches or pull requests

3 participants