8

I'm using Vimium on Firefox and Chrome and it helps me a lot https://github.com/philc/vimium

I noticed that some divs can be clicked and I found that class='demo-button' is one of them

<div class='demo-button'>demo-button</div>
<div class='demobutton'>demobutton</div>
<div class='demobuttonnn'>demobuttonn</div>
<div class='demobutto'>demobutto</div>

Here is a screenshot of Vimium links https://jsfiddle.net/qnvujfs6/

enter image description here

As you can see, only the last div demobutto can not be clicked using Vimium. I tried to search Vimium source for demo-button or demobutton but no results.

Does anyone have an idea why there is a difference between this demo button div-s ?

I want to be able to click on some generated elements using bootstrap plugins, for example Bootstrap Toggle. Here is code for two toggles, but only second one can be clicked because it contains demo-button class

https://codepen.io/duleorlovic/pen/VqWaEg

enter image description here

Ivar
  • 6,138
  • 12
  • 49
  • 61
duleorlovic
  • 432
  • 4
  • 15

1 Answers1

14

The first three are clickable because the class attribute contains the word "button" (See source).

For usability purposes it preferred to simply use the elements that are meant to do that job. For instance anchors (<a>) and buttons (<button>).

But if that is not possible (which seems to be the case here) you can also add the role attribute to the element. Elements with the attribute role with one of the following values will also be considered clickable:

  • button
  • tab
  • link
  • checkbox
  • menuitem
  • menuitemcheckbox
  • menuitemradio

(Source)

So if your div elements represent check boxes, your code would look like this:

<div class="demo-button" role="checkbox">demo-button</div>
<div class="demobutton" role="checkbox">demobutton</div>
<div class="demobuttonnn" role="checkbox">demobuttonn</div>
<div class="demobutto" role="checkbox">demobutto</div>

In this case you are not depending on specific class names, which are by the extension considered "as unreliable".

Ivar
  • 6,138
  • 12
  • 49
  • 61
  • Great, so I can keep fingers on my keyboard :) I will use class names since that is provided as an option to plugins, and I will submit pull requests to add those `role` attributes. Btw on this plugin demo https://stephanwagner.me/jBox I discovered that I can click on divs, quite accidentally because, as you explained, it contains 'button' in the class name. – duleorlovic Dec 25 '18 at 13:30