vue-grid-layout icon indicating copy to clipboard operation
vue-grid-layout copied to clipboard

Published 20 hours ago • verified publisher icon jbaysolutions

Keyboard navigation sequence with `tab` is lost after moving grid items

Open RVitaly1978 opened this issue 2 years ago • 9 comments

Software version (please complete the following information):

  • Browser: chrome
  • Vue Version: 2.6.14
  • vue-grid-layout Version: 2.3.12

Describe the bug

Keyboard navigation with tab is performed in the order in which the elements are passed to the layout object. Go to CodeSandbox Template.

To Reproduce Steps to reproduce the behavior:

  1. Go to CodeSandbox Template
  2. Navigate with "tab" through the buttons
  3. See error

Expected behavior Keyboard navigation with tab must be performed in the order in which the element is displayed on the screen.

RVitaly1978 avatar Nov 22 '22 11:11 RVitaly1978

The attached example is using react-grid-layout. Did you mean to post this in vue-grid-layout?

jvjvjv avatar Dec 17 '22 15:12 jvjvjv

Yes. Same issue in vue-grid-layout

RVitaly1978 avatar Dec 26 '22 08:12 RVitaly1978

Can you provide a more specific Expected Behaviour and the Actual Behaviour so I can understand what's wrong? Granted, I am not the developer, but what I see in the code sandbox looks expected already. Perhaps a more detailed description will help me understand your problem.

jvjvjv avatar Dec 27 '22 21:12 jvjvjv

Screenshot 2022-12-28 at 14 35 51

When I navigate with tab I expect the focus sequence shown in green numbers, but I get the focus shown in red numbers

RVitaly1978 avatar Dec 28 '22 11:12 RVitaly1978

I've tested this in Chrome using Vue 2.6.14 and vue-grid-layout 2.3.12 and I cannot reproduce. It is very likely a browser issue since you are not specifying tab indexes in your code, but since I cannot reproduce I cannot try adding tabindices to the grid layouts and see if that helps.

jvjvjv avatar Dec 28 '22 13:12 jvjvjv

Could you send me a link to the sandbox where you reproduce the problem?

RVitaly1978 avatar Dec 28 '22 14:12 RVitaly1978

I was unable to reproduce is the problem. Can you link a sandbox where you can reproduce this in vue-grid-layout and not react-grid-layout?

jvjvjv avatar Dec 28 '22 16:12 jvjvjv

https://codesandbox.io/s/vue-grid-layout-cy5qb1

  1. move cards
  2. navigate with tab

RVitaly1978 avatar Dec 29 '22 13:12 RVitaly1978

I still can't see the issue, even when comparing with Chrome in Windows vs Chrome on Mac. If you're experiencing the problem with both react and vue grid layout packages, then perhaps it's not a problem with either of these packages. Anyway, you can fix these by adding tabindexes to each grid box.

jvjvjv avatar Dec 31 '22 12:12 jvjvjv