search

SitePen / dgrid

A lightweight, mobile-ready, data-driven, modular grid widget designed for use with dstore
http://dgrid.io/
Other
628 stars 295 forks source link

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

Closed MandyMeindersma closed 4 years ago

MandyMeindersma commented 6 years ago
  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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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 4da0f2a295f9b9a4a4f81c23188850636384328a. 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 commented 6 years ago

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

msssk commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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