search

uswds / uswds

The U.S. Web Design System helps the federal government build fast, accessible, mobile-friendly websites.
https://designsystem.digital.gov
Other
6.83k stars 934 forks source link

USA Accordion: Prototype hidden-until-found attr for SEO #4799

Open mejiaj opened 2 years ago

mejiaj commented 2 years ago

The hidden=until-found attribute for accordion body allow content to be findable with in-page search.

Issue created from USWDS Slack thread.

DK1999 commented 2 years ago

Some more info: https://developer.chrome.com/articles/hidden-until-found/

cherrypj commented 1 year ago

Seems like it's now hidden="until-found" and is in action on this USDA.gov page (do an in-page search for "1200" [works in Chrome]).

mejiaj commented 1 year ago

Thanks for sharing that guidance. It seems there are two possible techniques:

  1. The hidden="until-found" attribute in HTML. MDN →
  2. Using CSS content-visibility property. MDN →

The 2nd technique seems better supported, would be less tedious to users, and could be a progressive enhancement to the existing component.

brunerae commented 6 months ago

@mejiaj what does this Issue need to be closed?

ajfarkas commented 4 months ago

I would really love to see this implemented. Mainly, I'm looking forward to this change in the linked PR.

We would like to link to an id inside an accordion, so that we can direct developers to a specific part of our documentation. hidden="until-found" would allow that, which is currently not possible.

mejiaj commented 4 months ago

Todo

Need to explore ways to add this feature in a way that minimizes impacts to accordions. For example, resolving spacing issues in live site.