Add target size enhanced rule

[WilcoFiers]

Need for Call for Review: 2 weeks

---

How to Review And Approve

• Go to the “Files changed” tab
• Here you will have the option to leave comments on different lines.
• Once the review is completed, find the “Review changes” button in the top right, select “Approve” (if you are really confident in the rule) or "Request changes" and click “Submit review”.
• Make sure to also review the proposed Call for Review period. In case of disagreement, the longer period wins.

[dd8]

The lack of a CSS hit testing spec is listed as an open issue:
w3c/csswg-drafts#2325

Hit testing doesn't seem fully interoperable. - though things may have improved since this was written:
https://lists.w3.org/Archives/Public/www-style/2010Aug/0407.html

There's a W3 Wiki article here detailing the hit testing in IE:
https://www.w3.org/wiki/Hit_Testing

Here's the code for handling touch events in Chromium:
https://github.com/chromium/chromium/blob/be0d3937d6ccc1a4e0d27315d2e827151850d3fa/android_webview/renderer/aw_render_frame_ext.cc#L233
(so Chrome actually does hit testing on rects, rather than the circle used in WCAG 2.2 2.5.8)

Edit: elements with opacity:0 are clickable. You can try this out with the "back to top" link at bottom right of https://www.w3.org/WAI/ (it sets opacity:0 when scroll thumb is at top of document - but you can still click on it in Chrome/FF/Safari)

Edit: SVG strokes/fills/markers are only clickable if they have a color specified, so the borders of the following rect are clickable, but the middle isn't due to fill=none:

    <svg height="400px" width="400px" viewBox="-5 -5 30 30">
    <a href="https://example.com"><rect x="0" y="0" width="20" height="10" stroke="black" stroke-width="3" fill="none"></rect></a>
    </svg>

In SVG 2.0 this is controlled by the pointer-events property, but it's unclear if any browsers have implemented this:
https://www.w3.org/TR/SVG2/interact.html#PointerEventsProperty

[Jym77]

@dd8 Been trying another direction with the rule. See also https://w3ccommunity.slack.com/archives/C01167KLA73/p1700745811381929 for details.
I'd appreciate if you could get a look at the current state and test cases. You have both the technical expertise and tool insight to figure out whether this is going anywhere.

[carlosapaduarte]

Want to consider also open dialogs?
https://html.spec.whatwg.org/multipage/interactive-elements.html#attr-dialog-open

[Jym77]

I'm not sure exactly what you mean 🤔

Is it about elements "behind" the modal being blocked by it when it's opened (even if they are visible)?
I think that this is covered because in that case, their "clickable area" would be empty (the blocked elements are never topmost target, until the modal is closed and stops blocking them).

[Jym77]

I've updated the rule with comments for review, and cleaned it a bit. It now starts to look like an actual rule 🎉

• Ultimately, I've ditched the "weird shape" exceptions. These are only really needed for the 2.5.8 rule (due to distance), and there was no real need to restrict this rule because of that. I made sure that the examples do not rely on the weird shape (i.e., no 50×50 button clipped to 40×40), so that automated tools who rely on border boxes or getBoundingClientRect can still claim a consistent implementation (and added a note to explain that).
• Also simplified a bit some of the definitions…

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

---

Carlos Duarte seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}