Feature: Add direct permalinks for each checklist item

Created by: andrewborstein

Background

I often link to https://www.a11yproject.com/checklist when I want to share concise and easily digestable documentation about accessibility with my teammates. But I would love if there were a way to easily share a link directly to a specific checklist item, instead of the entire list or a section of the list.

Currently my workaround is to grab the unique id value from the <summary> element in the DOM and manually append it to the URL. For example, https://www.a11yproject.com/checklist#dont-skip-heading-levels will link directly to that checklist item.

From A11y Project:

Screenshot of a specific checklist item scrolled to the top of the viewport at a11yproject.com

Potential implentation

One related technique that could be a source of inspiration is linkable headings.

Heading text wrapped in a link

From A11y Style Guide:

Screensot of linkable heading at a11y-style-guide.com

Underlying markup (simplified):

<h2>
  <a href="#kssref-structure-lists">
    Lists
  </a>
</h2>

Example link: https://a11y-style-guide.com/style-guide/section-structure.html#kssref-structure-lists

Heading with icon link appended

From Andy Bell's blog:

Underlying markup (simplified):

<h2 id="heading-size-scales-ftw">
  Size scales FTW
  <a href="#heading-size-scales-ftw">
    <span class="visually-hidden"> permalink</span>
    <svg aria-hidden="true" focusable="false"><path d="M9.199 ..."></path></svg>
  </a>
</h2>

Example link: https://hankchizljaw.com/wrote/fluid-scale-and-tokens:-a-match-made-in-heaven/#heading-size-scales-ftw

Other implementation thoughts

If the anchor link approach is appealing, I think it might need to live outside of the <summary> element, so it doesn't interfere with the normal open/close behavior. Or maybe there's a simple progressively enhanced JS solution that would work here, too, where opening a checklist item appends the #unique-id to the URL and visiting said URL can automatically open the item details if JS is enabled.

Is there any interest in adding a feature like this? If so, I'd love to discuss potential implementation ideas and would also be happy to take the lead on a pull request!

BTW, love the redesign 🙌