Re: [csswg-drafts] [css-box] increase pointer target size independently of element layout (#4708)

I was thinking about this proposed CSS property after coming across https://github.com/openui/open-ui/issues/1104. It would be useful in that context, because interactive elements nested inside a block link would likely need their hit targets to be enlarged.

Another idea I was thinking about was the possibility of specifying a "minimum hit target size". While it wouldn't provide the same level of granular control as `hit-margin`, I think it would be very valuable just for being an easy way of increasing baseline accessibility. Maybe this property could even be inheritable, which would make it easy to implement different "densities".

<details><summary>Example</summary>

```css
input[type="checkbox"] {
  width: 16px;
  height: 16px;

  /* ensures the hit target size of checkbox is 24px, even though visually it's 16px */
  hit-size: 24px;
}

html {
  &[data-density="compact"] {
    /* ensures the hit target size of all clickable elements is least 24px */
    hit-size: 24px;
  }
  &[data-density="comfortable"] {
    /* ensures the hit target size of all clickable elements is least 48px */
    hit-size: 48px;
  }
}
```

</details> 


-- 
GitHub Notification of comment by mayank99
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4708#issuecomment-2406245291 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 10 October 2024 23:54:28 UTC