Hide 'skip to main content' link from visual users in Safari

[michaelchadwick]

Fixes ilios/ilios#7095

Safari needs the ember-a11y-skip-link element to be hidden by either clip (deprecated) or clip-path to be truly hidden. Also, there may be some kind of issue with the focus-ring applied to the element when clicking the page, which causes it to "drift" down the page.

[netlify]

✅ Deploy Preview for ilios-frontend ready!

Name	Link
🔨 Latest commit	15dc6b9
🔍 Latest deploy log	https://app.netlify.com/projects/ilios-frontend/deploys/69fa8fa77c86810008317d9e
😎 Deploy Preview	https://deploy-preview-9306--ilios-frontend.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[michaelchadwick]

NTS: change skipLink to true, and add our own with our own styles

Not ready yet

[jrjohnson]

Test failure is legit, need to fix the tab order of this new skip link.

[github-actions]

✅ Visual Diff Approved

❌ Visual Diff Report — FAILED

884 images compared: 812 different · 72 identical

Details

Differences (812)

File	Diff %	Notes
desktop-Acceptance _ Admin _ can search for users _ default.png	0.02%
desktop-Acceptance _ Admin _ can search for users _ search results dropdown.png	0.02%
desktop-Acceptance _ API Version Check _ No warning shows up when api versions match _ .png	0.02%
desktop-Acceptance _ API Version Check _ Warning shows up when api versions do not match _ .png	0.01%
desktop-Acceptance _ assign students _ visiting _admin_assignstudents _ .png	0.02%
desktop-Acceptance _ Course - Cohorts _ manage cohorts _ .png	0.01%
desktop-Acceptance _ Course - Competencies _ collapsed competencies renders _ .png	0.01%
desktop-Acceptance _ Course - Leadership _ collapsed leadership _ .png	0.01%
desktop-Acceptance _ Course - Leadership _ list leadership _ .png	0.01%
desktop-Acceptance _ Course - Learning Materials _ list double linked learning materials _ .png	0.01%
desktop-Acceptance _ Course - Multiple Objective Parents _ initial view _ .png	0.01%
desktop-Acceptance _ Course - Objective List _ list objectives _ .png	0.01%
desktop-Acceptance _ Course - Objective List _ long objective _ .png	0.01%
desktop-Acceptance _ Course - Objective Mesh Descriptors _ cancel changes _ default background color.png	0.01%
desktop-Acceptance _ Course - Objective Mesh Descriptors _ cancel changes _ managed background color.png	0.01%
desktop-Acceptance _ Course - Objective Mesh Descriptors _ manage terms _ default background color.png	0.01%
desktop-Acceptance _ Course - Objective Mesh Descriptors _ manage terms _ managed background color.png	0.01%
desktop-Acceptance _ Course - Objective Mesh Descriptors _ save terms _ default background color.png	0.01%
desktop-Acceptance _ Course - Objective Mesh Descriptors _ save terms _ managed background color.png	0.01%
desktop-Acceptance _ Course - Objective Parents _ cancel changes _ default background color.png	0.01%
desktop-Acceptance _ Course - Objective Parents _ cancel changes _ managed background color.png	0.01%
desktop-Acceptance _ Course - Objective Parents _ save changes _ objective list.png	0.01%
desktop-Acceptance _ Course - Objective Parents _ save changes _ objective manager.png	0.01%
desktop-Acceptance _ Course - Objective Parents - Faded Status Sync _ objective description and parent objectives faded statuses are synced _ 1st objective list item collapsed again.png	0.01%
desktop-Acceptance _ Course - Objective Parents - Faded Status Sync _ objective description and parent objectives faded statuses are synced _ 1st objective list item collapsed.png	0.01%
… and 787 more

Download the results.

[jrjohnson]

grumble grumble, would rather use our own ID and not theirs for this, but not so much that I need to stop the work.

[dartajax]

nice fix - sketchy bug - tested on Safari