Accessibility: no focus on hider-menu after opening with keyboard

[MandyMeindersma]

1. Tab to a button that opens a dgrid-hider-menu
2. Press space or enter
3. Hider-menu opens
4. Currently: press tab and you tab to the next item on the page (behind the hider-menu)
   Expected: press tab and you will be focused on the hider menu and anything inside of it (the rows, checkboxes, anything)

Happens in chrome and safari (and maybe more I haven't tested)

dgrid version: 0.3

[MandyMeindersma]

I mean after looking through the code this should do what I want but it doesn't? https://github.com/SitePen/dgrid/blob/master/extensions/ColumnHider.js#L183

[dylans]

@MandyMeindersma have you tried looking at a more recent version of dgrid than 0.3 to see if this is still an issue? If there's a fix in 0.4.x, 1.0.x, 1.1.x, or 1.2.x, we could look into backporting it to 0.3 if you need to stay on that version.

[MandyMeindersma]

Unfortunately we can not upgrade.

But even if you look at the 0.3 version the fix looks like it should be there, just it is not working properly. https://github.com/SitePen/dgrid/blob/dev-0.3/extensions/ColumnHider.js#L158

[edhager]

Hi @MandyMeindersma!

I did some investigation and here is what I found...

The column hider button no longer acts as a tab stop in newer versions of dgrid thanks to me. I fixed some iOS issues and broke the tab stop. Here is the commit 4da0f2a. I'll write up a ticket for that.

When I try out the column hider with the dev-0.3 branch, it works as expected. Here is a codepen: https://codepen.io/edhager/pen/xJNwLY I'm using the latest version of Dojo in the codepen. Fork it and change it to your version to see if that makes a difference.

This line of code focuses the first checkbox when the column hider pop-up appears: https://github.com/SitePen/dgrid/blob/dev-0.3/extensions/ColumnHider.js#L268. The line of code you reference (https://github.com/SitePen/dgrid/blob/dev-0.3/extensions/ColumnHider.js#L158), focuses the column hider button when you use the escape key to close the popup.

Fork my codepen and see if you can make it reproduce the behavior that you are seeing. That will help me figure out what's wrong.

[edhager]

The no-longer-a-tab-stop ticket: #1426.

[msssk]

Using the dgrid/test/extensions/ColumnHider.html test file with dgrid 0.3.9 this seems to be working correctly. Can you share a specific browser and dgrid release you are seeing this issue with?

[MandyMeindersma]

I reported this issue back when I was an intern. I no longer work there so I can't check and test for you 😂 sorry!

[msssk]

@MandyMeindersma thanks for checking back! Closing this now - if anyone can provide detailed and reproducible instructions to cause the bug we will investigate further.