fix(target-size): determine offset using clientRects if target is display:inline#5012
Merged
fix(target-size): determine offset using clientRects if target is display:inline#5012
Conversation
WilcoFiers
previously requested changes
Feb 18, 2026
Comment on lines
-16
to
+18
| const nodeRect = vNode.boundingClientRect; | ||
| const display = vNode.getComputedStylePropertyValue('display'); | ||
| const nodeRects = | ||
| display === 'inline' ? vNode.clientRects : [vNode.boundingClientRect]; |
Contributor
There was a problem hiding this comment.
I THINK this should still use bounding rect... looking into it
straker
commented
Feb 18, 2026
| const largestInnerRect = getLargestUnobscuredArea( | ||
| vNode, | ||
| obscuredWidgets, | ||
| minSize |
Contributor
Author
There was a problem hiding this comment.
This was a bug were we didn't pass minSize into the largest rect calculation so no rect would pass min size check and it would default to picking the largest area rect.
chutchins25
reviewed
Feb 19, 2026
| // subtract the radius of the circle from the distance to center to get distance to edge of the neighbor circle | ||
| const centerDistance = | ||
| pointDistance(targetCenter, neighborCenter) - minRadiusNeighbour; | ||
| const neighborBoundingBox = neighborRects.reduce(getBoundingRect); |
Contributor
There was a problem hiding this comment.
Curious. There are several const variables in this .reduce() loop. Does each pass through the loop alter these in any way? Might be a minor gain in performance but I was just curious if there was a way to move them out of the targetRects.reduce() loop.
chutchins25
previously approved these changes
Feb 19, 2026
Contributor
chutchins25
left a comment
There was a problem hiding this comment.
Seems good to me. Just was curious about those const variables within a loop but that is not a show stopper to me.
WilcoFiers
requested changes
Feb 19, 2026
| ? obscuredNode.clientRects | ||
| : obscuredNode.boundingClientRect; | ||
| }) | ||
| .flat(Infinity); |
Contributor
There was a problem hiding this comment.
What is this for? Why not just 2?
Contributor
There was a problem hiding this comment.
Please pull this change. The rest looks right.
| ? overlappingVNode.clientRects | ||
| : overlappingVNode.boundingClientRect; | ||
| }) | ||
| .flat(Infinity); |
Contributor
There was a problem hiding this comment.
Same here, this is 2 layers deep. Why give it Infinity?
WilcoFiers
approved these changes
Feb 20, 2026
WilcoFiers
pushed a commit
that referenced
this pull request
Mar 30, 2026
…play:inline (#5012) This pr does two things: 1. For target size we decided to calculate the visible unobscured rects by taking the bounding rect of the target and subtracting the client rects of the obscurer if the obscurer is inline. This is because an inline element only accepts pointer events on the client rects and not the bounding rect. For the target we still take the bounding rect and not the client rects if the target is inline because we both agreed that the goal of the target size rule is to prevent clicking on the wrong target and not that the target itself is large enough to click on. So an inline element with multiple lines would have dead pointer zones within it, but accidentally clicking on a dead zone is not a failure of target size. 2. This also applies using client rects for inline elements for the spacing exception for the same reasons as above. What this does is allow checking multiple target rects for inline nodes and makes sure each rect passes the spacing exception. If at least one rect does not pass the rule fails for that element. Closes: #4928
straker
added a commit
that referenced
this pull request
Mar 30, 2026
…play:inline (#5012) This pr does two things: 1. For target size we decided to calculate the visible unobscured rects by taking the bounding rect of the target and subtracting the client rects of the obscurer if the obscurer is inline. This is because an inline element only accepts pointer events on the client rects and not the bounding rect. For the target we still take the bounding rect and not the client rects if the target is inline because we both agreed that the goal of the target size rule is to prevent clicking on the wrong target and not that the target itself is large enough to click on. So an inline element with multiple lines would have dead pointer zones within it, but accidentally clicking on a dead zone is not a failure of target size. 2. This also applies using client rects for inline elements for the spacing exception for the same reasons as above. What this does is allow checking multiple target rects for inline nodes and makes sure each rect passes the spacing exception. If at least one rect does not pass the rule fails for that element. Closes: #4928
WilcoFiers
added a commit
that referenced
this pull request
Mar 31, 2026
### [4.11.2](v4.11.1...v4.11.2) (2026-03-30) ### Bug Fixes - **aria-valid-attr-value:** handle multiple aria-errormessage IDs ([#4973](#4973)) ([9322148](9322148)) - **aria:** prevent getOwnedVirtual from returning duplicate nodes ([#4987](#4987)) ([99d1e77](99d1e77)), closes [#4840](#4840) - **DqElement:** avoid calling constructors with cloneNode ([#5013](#5013)) ([88bc57f](88bc57f)) - **existing-rule:** aria-busy now shows an error message for a use with unallowed children ([#5017](#5017)) ([dded75a](dded75a)) - **scrollable-region-focusable:** clarify the issue is in safari ([#4995](#4995)) ([2567afd](2567afd)), closes [WebKit#190870](https://github.com/dequelabs/WebKit/issues/190870) [WebKit#277290](https://github.com/dequelabs/WebKit/issues/277290) - **scrollable-region-focusable:** do not fail scroll areas when all content is visible without scrolling ([#4993](#4993)) ([240f8b5](240f8b5)) - **target-size:** determine offset using clientRects if target is display:inline ([#5012](#5012)) ([69d81c1](69d81c1)) - **target-size:** ignore widgets that are inline with other inline elements ([#5000](#5000)) ([cf8a3c0](cf8a3c0))
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pr does two things:
Closes: #4928