[Combobox] Using keyboard, cannot navigate Chip with arrow keys initially #6776

macandcheese · 2023-04-13T00:29:42Z

Actual Behavior

Similar to but slightly distinct from: #6750

After tabbing into the group of Chips - I cannot use the arrows to navigate the chip's close button. I need to advance to the end of the tab row using tab until I can begin to use the arrows.

Expected Behavior

I would immediately be able to use Arrow Right to navigate through group of Chips

Reproduction Sample

https://codepen.io/mac_and_cheese/pen/MWPKWXY?editors=1000

Screen.Recording.2023-04-12.at.5.23.16.PM.mov

Reproduction Steps

Open Codepen

Use Tab to focus Combobox - first chip's close button will be focused first.
Try to use Right Arrow to attempt to advance through Chip Close Buttons
Notice that the focus doesn't change
Use left arrow key, or tab again, and the right arrow will work.

Reproduction Version

1.2

Relevant Info

No response

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

@paulcpederson could you confirm if this is expected or a bug?

Esri team

Calcite (design)

geospatialem · 2023-07-19T19:04:18Z

Related and could be approached together, possibly with chip-group as a refactor #6750 + #6777

driskull · 2024-06-14T22:33:05Z

Once you type something into the input, the arrow keys no longer function. You can't go back to edit a character without deleting one. Is this intentional? Seems like a usability/accessibility issue? cc @geospatialem

tab or use arrow keys into the combobox
Keep tabbing or using arrow keys until you get to the input
type something
try to use arrow keys to edit what you typed. (failure)

Would this be a separate or related issue?

driskull · 2024-06-17T16:01:34Z

This is a component that could benefit from aria-activedescendant as well.

If we expect combobox to behave like a single component, then tabindex should only be active on a single element within it at any time. Arrow keys should be the primary form of navigation. I think this component needs some refactoring to handle that.

paulcpederson · 2024-06-17T16:26:15Z

@paulcpederson could you confirm if this is expected or a bug?

Sorry I missed this, I think the behavior you discussed is a bug. I would expect to land on the input first when tabbing to the combobox with active tabs. Then arrows should always change the active element. That's just my 2¢, not sure if that is per the aria spec.

Certainly when you have text entered into the input the arrow keys should either work as normal in an input or change the focus, in the pen they don't do either.

This is a component that could benefit from aria-activedescendant as well.

Yeah the combobox already uses active descendant, so likely would just be about extending that to encompass the chips. Unless browsers have updated since this was built, the challenge will be associating the active descendant id signifier across the shadow dom. That was impossible when this was built, but I haven't followed up in a while.

driskull · 2024-06-17T16:32:41Z

Sorry I missed this, I think the behavior you discussed is a bug. I would expect to land on the input first when tabbing to the combobox with active tabs. Then arrows should always change the active element. That's just my 2¢, not sure if that is per the aria spec.

I think we need to discuss the expected behavior of the combobox. I think what Paul said here makes sense but that would mean taking away tabindex from the chips and using some sort of aria to let screen readers know which chip or dropdown element is selected.

Currently, calling setFocus on the combobox will always focus the text input. However, we may want to consider focusing the first focusable element which in some cases would be the first chip because it has a tabindex. So we should discuss removing these tabindexes so this isn't an issue because focusing the input by default makes the most sense. The inconsistency here is because tabbing into the combobox produces different results than calling setFocus.

Yeah the combobox already uses active descendant, so likely would just be about extending that to encompass the chips. Unless browsers have updated since this was built, the challenge will be associating the active descendant id signifier across the shadow dom. That was impossible when this was built, but I haven't followed up in a while.

Yeah that still may be an issue with the shadowDOM.

…ted. #6776

driskull · 2024-06-17T17:20:20Z

I think a roving tabindex might just be the solution here. Needs to have the chips tabindex set to -1 by default and make sure only one tabindex is 0 when navigating via keyboard.

driskull · 2024-06-17T17:26:37Z

~~There seems to be no way to keyboard to the clear button on the combobox either. :(~~

Nevermind, escape key can clear it.

…ted (#9613) **Related Issue:** #6776 ## Summary - When a chip is focused, the activeChipIndex is updated - Only allow tabindex on one chip or the input. - Adds tests

github-actions · 2024-06-17T18:46:30Z

Installed and assigned for verification.

DitwanP · 2024-06-17T21:12:22Z

Screen.Recording.2024-06-17.at.2.12.45.PM.mov

@driskull Once tabbed in I can immediately navigate with the arrow keys, but when I type I can't move between letters with arrow keys like you can elsewhere. If this is what we want then its good to go, just LMK.

driskull · 2024-06-17T21:14:54Z

@DitwanP that is how it currently is. This issue was created #9614

https://codepen.io/driskull/pen/zYQpgvq?editors=1000

DitwanP · 2024-06-17T21:17:53Z

🍭 Verified locally on dev I can now use arrow keys to navigate immediately after tabbing into combobox.

macandcheese added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Apr 13, 2023

github-actions bot added Calcite (design) Issues logged by Calcite designers. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive labels Apr 13, 2023

macandcheese added the c-combobox Issues that pertain to the calcite-combobox and related components label Apr 13, 2023

geospatialem added p - low Issue is non core or affecting less that 10% of people using the library and removed needs triage Planning workflow - pending design/dev review. labels Jul 19, 2023

geospatialem added this to the 2023 December Priorities milestone Jul 19, 2023

geospatialem mentioned this issue Jul 19, 2023

[Combobox] Unexpected keyboard navigation with arrow keys #6750

Closed

geospatialem mentioned this issue Jul 19, 2023

[Combobox] While focusing on Chip's close button, spacebar opens Combobox menu #6777

Closed

geospatialem added the a11y Issues related to Accessibility fixes or improvements. label Oct 23, 2023

brittneytewks modified the milestones: 2023 December Priorities, 2024 January Priorities - Main release, 2024 February Priorities - Maintenance Release Nov 14, 2023

brittneytewks modified the milestones: 2024-02-27 - Feb Maintenance Release, Dev Backlog Jan 17, 2024

geospatialem modified the milestones: Dev Backlog, 2024-07-30 - Jul Release Jan 29, 2024

driskull self-assigned this Jun 17, 2024

driskull added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Jun 17, 2024

driskull added a commit that referenced this issue Jun 17, 2024

fix(combobox): fix navigating initially when multiple items are selec…

dd7b571

…ted. #6776

driskull mentioned this issue Jun 17, 2024

fix(combobox): fix navigating initially when multiple items are selected #9613

Merged

driskull removed their assignment Jun 17, 2024

driskull 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 Jun 17, 2024

github-actions bot assigned geospatialem and DitwanP Jun 17, 2024

DitwanP closed this as completed Jun 17, 2024

DitwanP 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 Jun 17, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Combobox] Using keyboard, cannot navigate Chip with arrow keys initially #6776

[Combobox] Using keyboard, cannot navigate Chip with arrow keys initially #6776

macandcheese commented Apr 13, 2023 •

edited

Loading

geospatialem commented Jul 19, 2023

driskull commented Jun 14, 2024

driskull commented Jun 17, 2024

paulcpederson commented Jun 17, 2024 •

edited

Loading

driskull commented Jun 17, 2024

driskull commented Jun 17, 2024

driskull commented Jun 17, 2024 •

edited

Loading

github-actions bot commented Jun 17, 2024

DitwanP commented Jun 17, 2024 •

edited

Loading

driskull commented Jun 17, 2024 •

edited

Loading

DitwanP commented Jun 17, 2024

[Combobox] Using keyboard, cannot navigate Chip with arrow keys initially #6776

[Combobox] Using keyboard, cannot navigate Chip with arrow keys initially #6776

Comments

macandcheese commented Apr 13, 2023 • edited Loading

Actual Behavior

Expected Behavior

Reproduction Sample

Reproduction Steps

Reproduction Version

Relevant Info

Regression?

Priority impact

Impact

Esri team

geospatialem commented Jul 19, 2023

driskull commented Jun 14, 2024

driskull commented Jun 17, 2024

paulcpederson commented Jun 17, 2024 • edited Loading

driskull commented Jun 17, 2024

driskull commented Jun 17, 2024

driskull commented Jun 17, 2024 • edited Loading

github-actions bot commented Jun 17, 2024

DitwanP commented Jun 17, 2024 • edited Loading

driskull commented Jun 17, 2024 • edited Loading

DitwanP commented Jun 17, 2024

macandcheese commented Apr 13, 2023 •

edited

Loading

paulcpederson commented Jun 17, 2024 •

edited

Loading

driskull commented Jun 17, 2024 •

edited

Loading

DitwanP commented Jun 17, 2024 •

edited

Loading

driskull commented Jun 17, 2024 •

edited

Loading