clickdelegatefor
Used to delegate click to another element. This is useful to make elements that cannot be focused, such as a <div>, clickable without changing their semantic meaning.
Based on these:
- https://open-ui.org/components/link-area-delegation-explainer/
- https://github.com/openui/open-ui/issues/1104
Usage
You add data-clickdelegatefor to an element, and set the value to the id of the element you want to delegate the click to.
When should I use data-clickdelegatefor?
Use data-clickdelegatefor when you have an element that cannot be focused, but you want it to be clickable and perform an action. This is especially useful for elements like <div>, <span>, or other non-interactive elements that you want to make interactive without changing their semantic meaning.
In the example above, we make a card (<div>) clickable by delegating the click to a link (<a>). This means that screen reader users get standard focus on the link, but the entire card will be clickable, improving the user experience without compromising accessibility.
Nested clickable elements
If you add other clickable elements inside the card, such as a button, data-clickdelegatefor will not delegate the click when you click on the button. This applies to all interactive elements.
CSS
The element that receives the delegated click will get the class .\:click-delegate-hover when you hover over the element with data-clickdelegatefor. This allows you to style what should be clickable, for example by adding a hover effect.