Consider adding tabindex="0" to dt elements

[nikolov-tmw]

Hi there,

I randomly stumbled across your plugin("SO Clean Up Yoast SEO" was shown as a suggestion in the Add New plugin interface of WordPress 😃 and that's how I got to your site) and I though it's pretty cool.

However I noticed that clicking on the images doesn't keep them visible(instead it defaults back to the first image). I experimented a bit and it seems like adding tabindex="0" to all of the <dt> elements, allows the user to both tab through the different thumbnails and for the element to remain focused after it was clicked on.

I'd create a pull request if you want, but I feel like that's a pretty straight forward solution that you can add very quickly.

I'm not sure if there are going to be any side effects from this fix. This site http://webaim.org/techniques/keyboard/tabindex says the following about tabindex=0 :

tabindex="0" and tabindex="-1" have special meaning and provide distinct functionality in HTML. A value of 0 indicates that the element should be placed in the default navigation order. This allows elements that are not natively focusable (such as <div>, <span>, and <p>) to receive keyboard focus. Of course one should generally use links and form controls for all interactive elements, but this does allow other elements to be focusable and trigger interaction.

[senlin]

Hi Nikolov,
Thanks for your suggestion.
It is nice indeed, although I am wondering a bit why or how it would be useful to add this to the plugin.
Something else I noticed when adding the tabindex is that the titles of the images become entangled. To illustrate that please see a screenshot below.

If you have a way to solve that, then you can send me a PR which I then can merge :)

Thanks,
Piet

[nikolov-tmw]

Good catch! Sadly that might not be possible to implement 😞

I tried here - paiyakdev/so-simple-gallery@d02f36c , but that didn't fully solve the issue. It only works when you hover over an image that's before the focused image(since there's no way to select previous sibling elements in pure CSS).

My main points for having this were to aim keyboard users(since without it, they can't utilize the gallery at all) and to allow the selected image to remain in view even when the cursor is moved away.

Unless you can think of another way to implement this with CSS, feel free to close the issue.

[senlin]

Thanks for trying to get this working. I think I will keep it open for now and maybe make it an option for people. The reason I think we can use it as an option is because when people don't add image titles, the entangling conflict is not there and then indeed is it not only cool, but also handy :)

[nikolov-tmw]

Sounds good! The same problem would probably show up if the images are of different heights, since the focused image doesn't get hidden(just like it's title).