Add support for hidden="until-found" for collapsibles components

[anthony-robin]

Currently, there is no way to search for content (using browser search feature) inside a collapsible component.
Using hidden="until-found" allows the browser to search inside and reveal these content improving UX and accessibility.

Could Daisy supports this strategy easily out of the box as a CSS only solution ?
Browser support is advanced, only Safari is late to the party ;)

Here are some references:

• https://developer.chrome.com/docs/css-ui/hidden-until-found
• https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/hidden#using_the_until-found_value

Thank you :)

[saadeghi]

Good idea 👍
I will work on it. Some early tests: https://play.tailwindcss.com/M3yw0Rrj6k

[pdanpdan]

I did some tests:

• for collapse hidden="until-found" is pointless (without JS)
• for details-collapse it will work by default (like it works for normal details)
• for focus-collapse and checkbox-collapse it cannot work because there is no selector to identify that some text is found by search inside

How hidden="until-found" works:

• applies content-visibility: hidden when it is present
• when text is found inside it triggers an event (beforematch) and removes the attribute from the element (so it's one-time)

Proposal:

• I'll create a PR with some cleanup for collapse (will use content-visibility on all variants)
• in docs it should be specified that:
  • details-collapse should not be used with .collapse-open and .collapse-close
  • details-collapse can be rendered initially open by adding open attribute
  • you should use details-collapse variant if you want the text inside collapse to be searcheable

https://play.tailwindcss.com/e1xWGNi26S?file=css

[anthony-robin]

Resolved in #4199