Check elements with mouse event handlers

[tricinel]

HTMLElements (excluding <a> and <button) that use mouse event handlers without accompanying keyboard handlers and proper HTML attributes can be unreachable via the keyboard.

This fails Success Criterion 1.3.1 and 2.1.1.

A demo of the change is in this Codepen.

Thank you so much to @alvaromontoro for the assist in figuring out the proper combination of selectors to check for to ensure a div could be made accessible.

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

When HTMLElements use mouse event handlers such as onclick, ondblclick, onmouseup/down, onmouseenter/leave or onmouseover, without providing the proper alternatives (i.e. onkeydown/up/press, no or wrong tabindex and no or wrong role), they could become unreachable via the keyboard.

We therefore should warn users of the danger, but it is ultimately up to them if they want to ignore it because they might have, for example, provided some alternative way of doing the same action.

This PR fixes #59

Link(s)

• Success Criterion 1.3.1 and 2.1.1.

Screenshot(s)

The warnings look like this:

Checklist:

• I have thoroughly read the CONTRIBUTING guidelines.
• I understand my pull request will be thoroughly reviewed at high detail.
• I understand the work in my pull request will only be available in the next version release of Checka11y.css and not in the current version release.
• I confirm the work in this pull request is valid according to my findings and is not something for anything personal.
• I have updated the README and/or features.md where and if applicable (still put an x if you have considered this but thought there was nothing to add or modify).
• I have added myself to the contributors section in package.json (still put an x if you have considered this but decided not to add yourself).
• I have checked I have not committed any accidental files.
• I have tested all the main modern browsers (I.e. Chrome, Firefox, Edge, Safari - please leave this unchecked if there were any browsers listed you could not test and list them in the help section with details why you couldn't test that browser)
• All new and existing a11y checks still work correctly (compare your local test/index.html to the test/index.html in the master branch).

Help

[jackdomleo7]

Awesome!