elm-mdc icon indicating copy to clipboard operation
elm-mdc copied to clipboard

Chips keyboard navigation

Open berenddeboer opened this issue 3 years ago • 1 comments

The MDC chips code has keyboard navigation, but their demo is still on v4.0.0 so it's a bit hard to see how this works. But once the demo is updated, hopefully we have some visuals to see how this is supposed to work.

berenddeboer avatar Jul 15 '20 04:07 berenddeboer

Hi @berenddeboer, I have recently implemented keyboard navigation in the material-components-web-elm demo. I just wanted to let you know, in case that helps. I am also struggeling sometimes that the MDC Web demo does not seem to update very quickly with releases.

If I recall correctly, keyboard navigation consists of arrow up/ down and arrow left/ right advancing focus forward or backwards, and keys pos1 and end advance to the start or to the end respectively. The last chip that had focus should retain focus-capability in the chip set so that if you press "Tab" you get back to the chip that you last interacted with. All other chips in the chip set lose focus-capability, so that pressing "Tab" again moves focus out of the chip set instead of to the second last interacted with chip.

If you have not interacted with any chip yet, the first selected chip should have focus-capability. Or the first chip overall, if there is no selected chip.

aforemny avatar Jul 15 '20 08:07 aforemny