Make permalinks accessible

[geoffrich]

This updates how permalinks are rendered to resolve some of the Axe violations in sveltejs/svelte#5678.

Summary of changes:

• Remove aria-hidden from permalinks. This fixes the Axe violation ARIA hidden element must not contain focusable elements
• Add visually hidden text to each permalink so assistive tech knows what the link is
• Move permalink code into a Svelte component and a markdown helper for dependent sites to consume (e.g. svelte.dev)
• Make focus visible when focusing permalinks and edit links. Previously there was either no focus outline (on edit links) or the element still had opacity 0 (permalinks)
• CSS cleanup
  • Remove commented out CSS
  • Remove non-standard zoom property. Including this property logs a console warning on firefox and is only needed for an IE bug
  • Remove rules related to linkify. I searched the project and it seems like linkify is no longer used. I can put these back if I'm wrong.

I'll be opening a separate PR for the svelte.dev site that is dependent on these changes.

[benmccann]

the indentation looks different here than elsewhere. it looks like you're using spaces while the existing files use tabs

[geoffrich]

Oops, fixed now

[benmccann]

spaces -> tabs

[geoffrich]

Fixed with latest commit

[benmccann]

FYI, we're moving this repo to https://github.com/sveltejs/sites/tree/master/packages/site-kit. That location is currently used only for the SvelteKit docs, but we hope to eventually use it for all docs

[geoffrich]

@benmccann sounds good -- should I re-create this PR over in that repo?

[benmccann]

yeah, that'd be great. And I have merge rights in that repo, so if you close this one and open a new one there I can get it merged 😉

[geoffrich]

Moved the PR to the new repo, so I'm closing this.