fix(target-size): determine offset using clientRects if target is display:inline - #5012
Conversation
| const nodeRect = vNode.boundingClientRect; | ||
| const display = vNode.getComputedStylePropertyValue('display'); | ||
| const nodeRects = | ||
| display === 'inline' ? vNode.clientRects : [vNode.boundingClientRect]; |
There was a problem hiding this comment.
I THINK this should still use bounding rect... looking into it
| const largestInnerRect = getLargestUnobscuredArea( | ||
| vNode, | ||
| obscuredWidgets, | ||
| minSize |
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.
| // 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); |
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
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.
| ? obscuredNode.clientRects | ||
| : obscuredNode.boundingClientRect; | ||
| }) | ||
| .flat(Infinity); |
There was a problem hiding this comment.
What is this for? Why not just 2?
There was a problem hiding this comment.
Please pull this change. The rest looks right.
| ? overlappingVNode.clientRects | ||
| : overlappingVNode.boundingClientRect; | ||
| }) | ||
| .flat(Infinity); |
There was a problem hiding this comment.
Same here, this is 2 layers deep. Why give it Infinity?
…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
…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
### [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))
## [4.12.0](v4.11.4...v4.12.0) (2026-06-01) ### Features - add gather-internals.js external script ([#5099](#5099)) ([c61d58b](c61d58b)), closes [#5080](#5080) - **aria-allowed/prohibited-attr, aria-required-parent/children:** partially support element internals role ([#5080](#5080)) ([417b48a](417b48a)), closes [#5039](#5039) [#4259](#4259) - **axe.externalAPIs:** add public api for setting elementInternal data ([#5105](#5105)) ([63bab8f](63bab8f)) - **core:** expose normalizeRunOptions ([#4998](#4998)) ([b8e6a59](b8e6a59)) - expose axe.resetLocale() to restore the default locale ([#5108](#5108)) ([c2b5292](c2b5292)), closes [#5107](#5107) - **getRules:** include rule enabled state in returned objects ([#5118](#5118)) ([75bf772](75bf772)), closes [#5116](#5116) - **list,listitem:** support element internals role ([#5119](#5119)) ([7d9d696](7d9d696)) - **new-rule:** check that aria-tab have an accessible name ([#5001](#5001)) ([0d4e4e7](0d4e4e7)), closes [#4842](#4842) - **rules:** deprecate landmark-complementary-is-top-level rules ([#4992](#4992)) ([9e09139](9e09139)), closes [#4950](#4950) - **utils:** add `getElementInternals` function ([#5077](#5077)) ([1c15f82](1c15f82)) ### Bug Fixes - **aria-allowed-attr:** restrict br and wbr elements to aria-hidden only ([#4974](#4974)) ([c6245e7](c6245e7)) - **aria-conditional-attr:** add support for radio ([#5100](#5100)) ([8223c98](8223c98)) - **aria-valid-attr-value:** handle multiple aria-errormessage IDs ([#4973](#4973)) ([0489e30](0489e30)) - **aria:** prevent getOwnedVirtual from returning duplicate nodes ([#4987](#4987)) ([48ca955](48ca955)), closes [#4840](#4840) - **commons/text:** exclude natively hidden elements from aria-labelledby accessible name ([#5076](#5076)) ([ea7202c](ea7202c)), closes [#4704](#4704) - **DqElement:** avoid calling constructors with cloneNode ([#5013](#5013)) ([0281fa1](0281fa1)) - **existing-rule:** aria-busy now shows an error message for a use with unallowed children ([#5017](#5017)) ([2067b87](2067b87)) - **helpUrl:** ensure axe.configure always updates the help URLs ([#5114](#5114)) ([c4f60ff](c4f60ff)) - **label-content-name-mismatch:** match visible text with aria-label and exclude invisible text ([#5096](#5096)) ([3a012a1](3a012a1)) - **locale:** ensure all subtags are correctly set ([#5112](#5112)) ([13005ed](13005ed)) - **scrollable-region-focusable:** clarify the issue is in safari ([#4995](#4995)) ([4ec5211](4ec5211)), 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)) ([838707a](838707a)) - **target-size:** determine offset using clientRects if target is display:inline ([#5012](#5012)) ([a4b8091](a4b8091)) - **target-size:** ignore position: fixed elements that are offscreen when page is scrolled ([#5066](#5066)) ([1229a6e](1229a6e)), closes [#5065](#5065) - **target-size:** ignore widgets that are inline with other inline elements ([#5000](#5000)) ([a8dd81b](a8dd81b)) - **utils/getAncestry:** escape node name ([#5079](#5079)) ([d1fabaa](d1fabaa)), closes [#5078](#5078) - **utils:** Add null check to parseCrossOriginStylesheet, closes [#5074](#5074) ([#5075](#5075)) ([f12ef32](f12ef32)) - **utils:** update isShadowRoot to use spec-compliant custom element regex ([#5059](#5059)) ([edc6ce2](edc6ce2)), closes [#5030](#5030) This PR was opened by a robot 🤖 🎉
This pr does two things:
Closes: #4928