Check elements with mouse event handlers

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 excludes <a> and <button> elements.

fixes jackdomleo7#59

checka11y.css

@@ -18,7 +18,7 @@
           box-shadow: 0 0 0 0.25rem var(--border-error);
 }
 
-button button::after, button details::after, button label::after, button:not([aria-label]):not([aria-labelledby]):empty::after, [dir]:not([dir="rtl"]):not([dir="ltr"]):not([dir="auto"])::after, h1:empty::after, h2:empty::after, h3:empty::after, h4:empty::after, h5:empty::after, h6:empty::after, h1 [aria-hidden]::after, h2 [aria-hidden]::after, h3 [aria-hidden]::after, h4 [aria-hidden]::after, h5 [aria-hidden]::after, h6 [aria-hidden]::after, html:not([lang]) body::before, html[lang=""] body::before, a button::after, a details::after, a label::after, a[href]:not([aria-label]):not([aria-labelledby]):empty::after, ol > *:not(li)::after, ul > *:not(li)::after, dl > *:not(dt):not(dd)::after, nav:not([aria-label]):not([aria-labelledby]) ~ nav::after, nav ~ nav:not([aria-label]):not([aria-labelledby])::after, a[href][tabindex="-1"]::after, area[href][tabindex="-1"]::after, input:not([disabled])[tabindex="-1"]::after, select:not([disabled])[tabindex="-1"]::after, textarea:not([disabled])[tabindex="-1"]::after, button:not([disabled])[tabindex="-1"]::after, iframe[tabindex="-1"]::after, [contentEditable="true"][tabindex="-1"]::after, [accesskey]::after, [style*="!important"]::after, a[target="_blank"]::after, u::after {
+button button::after, button details::after, button label::after, button:not([aria-label]):not([aria-labelledby]):empty::after, [dir]:not([dir="rtl"]):not([dir="ltr"]):not([dir="auto"])::after, h1:empty::after, h2:empty::after, h3:empty::after, h4:empty::after, h5:empty::after, h6:empty::after, h1 [aria-hidden]::after, h2 [aria-hidden]::after, h3 [aria-hidden]::after, h4 [aria-hidden]::after, h5 [aria-hidden]::after, h6 [aria-hidden]::after, html:not([lang]) body::before, html[lang=""] body::before, a button::after, a details::after, a label::after, a[href]:not([aria-label]):not([aria-labelledby]):empty::after, ol > *:not(li)::after, ul > *:not(li)::after, dl > *:not(dt):not(dd)::after, nav:not([aria-label]):not([aria-labelledby]) ~ nav::after, nav ~ nav:not([aria-label]):not([aria-labelledby])::after, a[href][tabindex="-1"]::after, area[href][tabindex="-1"]::after, input:not([disabled])[tabindex="-1"]::after, select:not([disabled])[tabindex="-1"]::after, textarea:not([disabled])[tabindex="-1"]::after, button:not([disabled])[tabindex="-1"]::after, iframe[tabindex="-1"]::after, [contentEditable="true"][tabindex="-1"]::after, [accesskey]::after, [onclick]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [onclick][onkeyup]:not([tabindex]):not(a):not(button)::after, [onclick][onkeyup][tabindex="-1"]:not(a):not(button)::after, [onclick][onkeydown]:not([tabindex]):not(a):not(button)::after, [onclick][onkeydown][tabindex="-1"]:not(a):not(button)::after, [onclick][onkeypress]:not([tabindex]):not(a):not(button)::after, [onclick][onkeypress][tabindex="-1"]:not(a):not(button)::after, [ondblclick]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [ondblclick][onkeyup]:not([tabindex]):not(a):not(button)::after, [ondblclick][onkeyup][tabindex="-1"]:not(a):not(button)::after, [ondblclick][onkeydown]:not([tabindex]):not(a):not(button)::after, [ondblclick][onkeydown][tabindex="-1"]:not(a):not(button)::after, [ondblclick][onkeypress]:not([tabindex]):not(a):not(button)::after, [ondblclick][onkeypress][tabindex="-1"]:not(a):not(button)::after, [onmousedown]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [onmousedown][onkeyup]:not([tabindex]):not(a):not(button)::after, [onmousedown][onkeyup][tabindex="-1"]:not(a):not(button)::after, [onmousedown][onkeydown]:not([tabindex]):not(a):not(button)::after, [onmousedown][onkeydown][tabindex="-1"]:not(a):not(button)::after, [onmousedown][onkeypress]:not([tabindex]):not(a):not(button)::after, [onmousedown][onkeypress][tabindex="-1"]:not(a):not(button)::after, [onmouseup]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [onmouseup][onkeyup]:not([tabindex]):not(a):not(button)::after, [onmouseup][onkeyup][tabindex="-1"]:not(a):not(button)::after, [onmouseup][onkeydown]:not([tabindex]):not(a):not(button)::after, [onmouseup][onkeydown][tabindex="-1"]:not(a):not(button)::after, [onmouseup][onkeypress]:not([tabindex]):not(a):not(button)::after, [onmouseup][onkeypress][tabindex="-1"]:not(a):not(button)::after, [onmouseover]:not(a):not(button)::after, [onmouseenter]:not(a):not(button)::after, [onmouseleave]:not(a):not(button)::after, [style*="!important"]::after, a[target="_blank"]::after, u::after {
   display: block;
   font-size: 1.2rem;
   font-weight: 700;
@@ -32,7 +32,7 @@ button button::after, button details::after, button label::after, button:not([ar
   background-color: var(--bg-error);
 }
 
-[accesskey]::after, [style*="!important"]::after, a[target="_blank"]::after, u::after {
+[accesskey]::after, [onclick]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [onclick][onkeyup]:not([tabindex]):not(a):not(button)::after, [onclick][onkeyup][tabindex="-1"]:not(a):not(button)::after, [onclick][onkeydown]:not([tabindex]):not(a):not(button)::after, [onclick][onkeydown][tabindex="-1"]:not(a):not(button)::after, [onclick][onkeypress]:not([tabindex]):not(a):not(button)::after, [onclick][onkeypress][tabindex="-1"]:not(a):not(button)::after, [ondblclick]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [ondblclick][onkeyup]:not([tabindex]):not(a):not(button)::after, [ondblclick][onkeyup][tabindex="-1"]:not(a):not(button)::after, [ondblclick][onkeydown]:not([tabindex]):not(a):not(button)::after, [ondblclick][onkeydown][tabindex="-1"]:not(a):not(button)::after, [ondblclick][onkeypress]:not([tabindex]):not(a):not(button)::after, [ondblclick][onkeypress][tabindex="-1"]:not(a):not(button)::after, [onmousedown]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [onmousedown][onkeyup]:not([tabindex]):not(a):not(button)::after, [onmousedown][onkeyup][tabindex="-1"]:not(a):not(button)::after, [onmousedown][onkeydown]:not([tabindex]):not(a):not(button)::after, [onmousedown][onkeydown][tabindex="-1"]:not(a):not(button)::after, [onmousedown][onkeypress]:not([tabindex]):not(a):not(button)::after, [onmousedown][onkeypress][tabindex="-1"]:not(a):not(button)::after, [onmouseup]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [onmouseup][onkeyup]:not([tabindex]):not(a):not(button)::after, [onmouseup][onkeyup][tabindex="-1"]:not(a):not(button)::after, [onmouseup][onkeydown]:not([tabindex]):not(a):not(button)::after, [onmouseup][onkeydown][tabindex="-1"]:not(a):not(button)::after, [onmouseup][onkeypress]:not([tabindex]):not(a):not(button)::after, [onmouseup][onkeypress][tabindex="-1"]:not(a):not(button)::after, [onmouseover]:not(a):not(button)::after, [onmouseenter]:not(a):not(button)::after, [onmouseleave]:not(a):not(button)::after, [style*="!important"]::after, a[target="_blank"]::after, u::after {
   color: var(--text-warning);
   border: 0.4rem solid var(--border-warning);
   background-color: var(--bg-warning);
@@ -80,6 +80,10 @@ button:not([aria-label]):not([aria-labelledby]):empty::after {
   content: "ERROR: The dir attribute can only have the values, ltr, rtl and auto." !important;
 }
 
+[onclick]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [onclick][onkeyup]:not([tabindex]):not(a):not(button)::after, [onclick][onkeyup][tabindex="-1"]:not(a):not(button)::after, [onclick][onkeydown]:not([tabindex]):not(a):not(button)::after, [onclick][onkeydown][tabindex="-1"]:not(a):not(button)::after, [onclick][onkeypress]:not([tabindex]):not(a):not(button)::after, [onclick][onkeypress][tabindex="-1"]:not(a):not(button)::after, [ondblclick]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [ondblclick][onkeyup]:not([tabindex]):not(a):not(button)::after, [ondblclick][onkeyup][tabindex="-1"]:not(a):not(button)::after, [ondblclick][onkeydown]:not([tabindex]):not(a):not(button)::after, [ondblclick][onkeydown][tabindex="-1"]:not(a):not(button)::after, [ondblclick][onkeypress]:not([tabindex]):not(a):not(button)::after, [ondblclick][onkeypress][tabindex="-1"]:not(a):not(button)::after, [onmousedown]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [onmousedown][onkeyup]:not([tabindex]):not(a):not(button)::after, [onmousedown][onkeyup][tabindex="-1"]:not(a):not(button)::after, [onmousedown][onkeydown]:not([tabindex]):not(a):not(button)::after, [onmousedown][onkeydown][tabindex="-1"]:not(a):not(button)::after, [onmousedown][onkeypress]:not([tabindex]):not(a):not(button)::after, [onmousedown][onkeypress][tabindex="-1"]:not(a):not(button)::after, [onmouseup]:not(a):not(button):not([onkeydown]):not([onkeyup]):not([onkeypress])::after, [onmouseup][onkeyup]:not([tabindex]):not(a):not(button)::after, [onmouseup][onkeyup][tabindex="-1"]:not(a):not(button)::after, [onmouseup][onkeydown]:not([tabindex]):not(a):not(button)::after, [onmouseup][onkeydown][tabindex="-1"]:not(a):not(button)::after, [onmouseup][onkeypress]:not([tabindex]):not(a):not(button)::after, [onmouseup][onkeypress][tabindex="-1"]:not(a):not(button)::after, [onmouseover]:not(a):not(button)::after, [onmouseenter]:not(a):not(button)::after, [onmouseleave]:not(a):not(button)::after {
+  content: "WARNING: Potentially inaccessible click event used on non-clickable element. Ensure you have an accessible alternative." !important;
+}
+
 h1:empty::after, h2:empty::after, h3:empty::after, h4:empty::after, h5:empty::after, h6:empty::after {
   content: "ERROR: Headings must not be empty." !important;
 }

features.md

@@ -46,4 +46,5 @@ A list of every a11y concern Checka11y.css will check for and highlight with lin
   - `<button>`: Read about [Success Criterion 2.4.4 Link Purpose (In Context)](https://www.w3.org/TR/WCAG21/#link-purpose-in-context)
 - Checks that the alt attributes have meaningful content
 - Checks and warns about the use of <u> element: [Read about this and alternative elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u#Other_elements_to_consider_using)
+- Checks and warns about using mouse event handlers on HTML elements that are potentially not reachable from the keyboard: [Read more about Success Criterion 1.3.1 and 2.1.1](https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F42)
 ---

src/checka11y.scss

@@ -7,6 +7,7 @@
 @import "./features/autoplay";
 @import "./features/buttons";
 @import "./features/dir";
+@import "./features/handlers";
 @import "./features/headings";
 @import "./features/html";
 @import "./features/iframe";

src/features/_handlers.scss

@@ -0,0 +1,37 @@
+/*
+  HTMLElements other than <a> and <button> that have mouse event handlers without the appropriate keyboard handlers are not accessible
+*/
+[onclick]:not( a ):not( button ):not( [onkeydown] ):not( [onkeyup] ):not( [onkeypress] )::after,
+[onclick][onkeyup]:not( [tabindex] ):not( a ):not( button )::after,
+[onclick][onkeyup][tabindex = "-1"]:not( a ):not( button )::after,
+[onclick][onkeydown]:not( [tabindex] ):not( a ):not( button )::after,
+[onclick][onkeydown][tabindex = "-1"]:not( a ):not( button )::after,
+[onclick][onkeypress]:not( [tabindex] ):not( a ):not( button )::after,
+[onclick][onkeypress][tabindex = "-1"]:not( a ):not( button )::after,
+[ondblclick]:not( a ):not( button ):not( [onkeydown] ):not( [onkeyup] ):not( [onkeypress] )::after,
+[ondblclick][onkeyup]:not( [tabindex] ):not( a ):not( button )::after,
+[ondblclick][onkeyup][tabindex = "-1"]:not( a ):not( button )::after,
+[ondblclick][onkeydown]:not( [tabindex] ):not( a ):not( button )::after,
+[ondblclick][onkeydown][tabindex = "-1"]:not( a ):not( button )::after,
+[ondblclick][onkeypress]:not( [tabindex] ):not( a ):not( button )::after,
+[ondblclick][onkeypress][tabindex = "-1"]:not( a ):not( button )::after,
+[onmousedown]:not( a ):not( button ):not( [onkeydown] ):not( [onkeyup] ):not( [onkeypress] )::after,
+[onmousedown][onkeyup]:not( [tabindex] ):not( a ):not( button )::after,
+[onmousedown][onkeyup][tabindex = "-1"]:not( a ):not( button )::after,
+[onmousedown][onkeydown]:not( [tabindex] ):not( a ):not( button )::after,
+[onmousedown][onkeydown][tabindex = "-1"]:not( a ):not( button )::after,
+[onmousedown][onkeypress]:not( [tabindex] ):not( a ):not( button )::after,
+[onmousedown][onkeypress][tabindex = "-1"]:not( a ):not( button )::after,
+[onmouseup]:not( a ):not( button ):not( [onkeydown] ):not( [onkeyup] ):not( [onkeypress] )::after,
+[onmouseup][onkeyup]:not( [tabindex] ):not( a ):not( button )::after,
+[onmouseup][onkeyup][tabindex = "-1"]:not( a ):not( button )::after,
+[onmouseup][onkeydown]:not( [tabindex] ):not( a ):not( button )::after,
+[onmouseup][onkeydown][tabindex = "-1"]:not( a ):not( button )::after,
+[onmouseup][onkeypress]:not( [tabindex] ):not( a ):not( button )::after,
+[onmouseup][onkeypress][tabindex = "-1"]:not( a ):not( button )::after,
+[onmouseover]:not( a ):not( button )::after,
+[onmouseenter]:not( a ):not( button )::after,
+[onmouseleave]:not( a ):not( button )::after {
+  @extend %contentWarning;
+  @include contentMessage(warning, "Potentially inaccessible click event used on non-clickable element. Ensure you have an accessible alternative.");
+}

test/index.html

@@ -299,5 +299,14 @@ <h2>Avoid using <code>&lt;u&gt;</code> element as it could look like a link</h2>
         <em><b>I am a bold <code>&lt;em&gt;</code> element to denote stress emphasis</b></em>
       </div>
     </section>
+    <section>
+      <h2>Avoide using mouse event handlers without the appropriate keyboard alternative on HTML Elements</h2>
+      <div>
+        <div onclick="">A div with onclick</div>
+        <div onclick="" onkeydown="">A div with onclick and onkeydown</div>
+        <div onclick="" onkeydown="" role="button">A div with with onclick, onkeydown and role=button</div>
+        <div onclick="" onkeydown="" role="button" tabindex="-1">A div with onclick, onkeydown, role=button and tabindex=-1</div>
+      </div>
+    </section>
   </body>
 </html>