From 6a817b076c1a0b4ef462135ef6c1acb4319e01a3 Mon Sep 17 00:00:00 2001
From: Bogdan Lazar <bogdan@bogdanlazar.com>
Date: Wed, 21 Oct 2020 15:11:14 +0200
Subject: [PATCH] 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 #59
---
 checka11y.css               |  8 ++++++--
 features.md                 |  1 +
 src/checka11y.scss          |  1 +
 src/features/_handlers.scss | 37 +++++++++++++++++++++++++++++++++++++
 test/index.html             |  9 +++++++++
 5 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 src/features/_handlers.scss

diff --git a/checka11y.css b/checka11y.css
index 9979182..4aea41e 100644
--- a/checka11y.css
+++ b/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;
 }
diff --git a/features.md b/features.md
index 7e9dbbc..0a50a8c 100644
--- a/features.md
+++ b/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)
 ---
diff --git a/src/checka11y.scss b/src/checka11y.scss
index ea5cf8b..e92c1dd 100644
--- a/src/checka11y.scss
+++ b/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";
diff --git a/src/features/_handlers.scss b/src/features/_handlers.scss
new file mode 100644
index 0000000..2a6a728
--- /dev/null
+++ b/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.");
+}
diff --git a/test/index.html b/test/index.html
index 5a87907..1e81826 100644
--- a/test/index.html
+++ b/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>