Created by: andrewborstein
Closes #1013 (closed)
Permalink Example
Visitors on the Checklist page can now
- Expose the URL to an individual checklist item by pressing its associated "Permalink" anchor element
- 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
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-describedbysufficiently 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 | slugifyto a local variable but couldn't figure out how. I don't have a ton of Nunjucks / 11ty experience, so insight there is appreciated!