clickdelegatefor
This is useful if you want to make an entire table row clickable, or a card clickable without the whole card content becoming the link text for screen readers.
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 interactive element such as a, button or input[type="checkbox"], but you want to extend the clickable area. This is especially useful for table rows (<tr>) and cards (<div>).
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.