target-size should account for the size of its descendants

[WilcoFiers]

The new target-size rule looks at the area of the focusable element to determine its size and position relative to other elements. This is making the incorrect assumption that the clickable area of an element cannot exceed its bounding box. This is correct. Any descendant of a link is also clickable, and will activate that parent link. There are numerous ways in which descendants can be positioned outside the boundary of its parent, and so result in a much larger target area than the original link has. One such example is the axe-con logo in the side navigation:

https://www.deque.com/axe-con/sessions/changing-the-way-you-think-and-work-agile-accessibility-audits-in-the-product-life-cycle/

Solving this could be pretty complicated. I can think of a few scenarios here:

• If there is no overlap, we could test the widget and the descendants separately, and make sure at least one of them passes
• If the descendant completely encloses the widget, we could test the descendant instead of the widget
• I don't know what to do in case of partial overlap like in axe-con's logo, where the link is wide but small, and the image is less wide, but tall.

[dylanb]

How about if they overlap, test them each independently first, if they do NOT pass (i.e. none is, on its own, the required size), then take the largest common rectangle or largest rectangle in a closed contour and test that. I assume that this satisfies the intent of the S.C.

[padmavemulapati]

Validated with the latest code base,
for the test script, seeing incomplete results when targets have overflowing content.

<a href="#" id="target"><img width="24" height="24"></a>
  <a href="#" id="target" style="font-size:24px;"><img width="24" height="24"></a>

  <a href="#" id="target" style="font-size:24px;">
     <img width="24" height="36" style="vertical-align: bottom;">
    </a><br>
    <a href="" style="margin-top:-10px; position:absolute; width:24px;">&nbsp;</a>

    <a href="#" id="target" style="font-size:24px;">
     <img width="24" height="36" style="vertical-align: bottom;">
      </a><br>
      <a href="" style="margin-top:-2px; position:absolute; width:24px;">&nbsp;</a>

      <a href="#" id="target" style="font-size:24px;">
        <img width="24" height="36" style="vertical-align: bottom;">
        </a><br>
        <a href="" style="margin-top:-40px; position:absolute; width:100px; height:100px;">&nbsp;</a>

        <p>
          <!-- These links touch, images overflow on the left and right -->
          <a href="#" id="incomplete5"
            >&nbsp;
            <img
              src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C"
              width="50"
              height="33"
              alt="M1"
              style="float: left"
            />
          </a>
          <a href="#" id="incomplete6"
            >&nbsp;
            <img
              src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C"
              width="50"
              height="33"
              alt="M4"
              style="position: absolute"
            />
          </a>
        </p>
        
        <p>
          <!-- These links touch, images overflow on the top and bottom -->
          <a href="#" id="incomplete7">
            <img
              src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C"
              width="50"
              height="33"
              alt="M3"
            />
          </a>
          <br />
          <a href="#" id="incomplete8" style="display: inline-block; height: 18px">
            <img
              src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C"
              width="50"
              height="33"
              alt="M2"
            />
          </a>
        </p>