Skip to content
GitLab

Close #1013: Add permalink to checklist items

Merged Administrator requested to merge github/fork/andrewborstein/add-permalink-to-checklist-items into main

Created by: andrewborstein

Closes #1013 (closed)

Permalink Example

Visitors on the Checklist page can now

  1. Expose the URL to an individual checklist item by pressing its associated "Permalink" anchor element
  2. Visit a checklist item permalink URL like /checklist/#validate-your-html, which scrolls the item into view and (when JS is enabled) opens its details
a11yproject.com checklist item opened and featuring new permalink

Notes and Questions

  • I'm open to other UI suggestions! I wanted to aim for something simple, conventional, and matching existing styles. But I'm unsure if this link could benefit from some other visual distinction, particularly from the checklist item citation link.
  • Is "Permalink" too jargony? I also considered copy like "Share Link" or "Shareable URL".
  • Does associating the link to its checklist item via aria-describedby sufficiently meet 2.4.4 Link Purpose (In Context)? Including the entire title in the visible link text seemed liked overkill and rendering visually hidden text seemed unnecessary when the text already exists and could be linked using this technique.
  • I noticed a bug in Chrome where continually refreshing the page with a permalink URL in place continues scrolling further and further down the page instead of reloading the same scroll position. The issue doesn't occur when visiting the URL in new tabs or windows, or in Firefox or Safari. It might be related to this bug 🤷 , but doesn't seem like a critical user flow that needs to be supported above and beyond the first page visit always working.
  • I wanted to extract checklist.title | slugify to a local variable but couldn't figure out how. I don't have a ton of Nunjucks / 11ty experience, so insight there is appreciated!