From 884b639a83d6e17a7c37b8ebf2a2a814502f83c4 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Tue, 28 Apr 2026 16:18:06 -0700
Subject: [PATCH 1/4] hide 'skip to main content' link from visual users

---
 packages/frontend/app/styles/layout/_layout.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/frontend/app/styles/layout/_layout.scss b/packages/frontend/app/styles/layout/_layout.scss
index 96f01baa4e..403e52293f 100644
--- a/packages/frontend/app/styles/layout/_layout.scss
+++ b/packages/frontend/app/styles/layout/_layout.scss
@@ -23,6 +23,11 @@
 
   & > header {
     grid-area: header;
+
+    // make sure "Skip to main content" link is not visible on Safari
+    .ember-a11y-refocus-skip-link {
+      clip-path: inset(100%);
+    }
   }
 
   & > nav {

From 1fa2c750dc4b11880d89d9bcc4c693a2accd6c4a Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Thu, 30 Apr 2026 23:50:07 -0700
Subject: [PATCH 2/4] remove custom style; instead turn off auto-skipLink and
 create our own with our own visually-hidden existing style

---
 packages/frontend/app/components/ilios-header.gjs | 4 ++++
 packages/frontend/app/styles/layout/_layout.scss  | 5 -----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/app/components/ilios-header.gjs b/packages/frontend/app/components/ilios-header.gjs
index 51fabe8c10..3c9f676333 100644
--- a/packages/frontend/app/components/ilios-header.gjs
+++ b/packages/frontend/app/components/ilios-header.gjs
@@ -74,8 +74,12 @@ export default class IliosHeaderComponent extends Component {
       <NavigationNarrator
         @navigationText={{t "general.navigationCompleteText"}}
         @skipText={{t "general.skipToMainContent"}}
+        @skipLink={{false}}
         @routeChangeValidator={{this.checkRouteChange}}
       />
+      <a href="#main" class="visually-hidden">
+        {{t "general.skipToMainContent"}}
+      </a>
       <h1 class="visually-hidden" data-test-title>
         {{this.pageTitle.title}}
       </h1>
diff --git a/packages/frontend/app/styles/layout/_layout.scss b/packages/frontend/app/styles/layout/_layout.scss
index 403e52293f..96f01baa4e 100644
--- a/packages/frontend/app/styles/layout/_layout.scss
+++ b/packages/frontend/app/styles/layout/_layout.scss
@@ -23,11 +23,6 @@
 
   & > header {
     grid-area: header;
-
-    // make sure "Skip to main content" link is not visible on Safari
-    .ember-a11y-refocus-skip-link {
-      clip-path: inset(100%);
-    }
   }
 
   & > nav {

From 4ceb0e260bb1cd940511c3eaec2e707ff7ce9023 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Tue, 5 May 2026 10:55:13 -0700
Subject: [PATCH 3/4] remove unused NavigationNarrator skipText argument

---
 packages/frontend/app/components/ilios-header.gjs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/frontend/app/components/ilios-header.gjs b/packages/frontend/app/components/ilios-header.gjs
index 3c9f676333..1a2df67ec9 100644
--- a/packages/frontend/app/components/ilios-header.gjs
+++ b/packages/frontend/app/components/ilios-header.gjs
@@ -73,7 +73,6 @@ export default class IliosHeaderComponent extends Component {
     <header class="ilios-header" data-test-ilios-header ...attributes>
       <NavigationNarrator
         @navigationText={{t "general.navigationCompleteText"}}
-        @skipText={{t "general.skipToMainContent"}}
         @skipLink={{false}}
         @routeChangeValidator={{this.checkRouteChange}}
       />

From 15dc6b9cf3a156eb5b74256dc839c28221b4d1ec Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Tue, 5 May 2026 17:47:11 -0700
Subject: [PATCH 4/4] add back id to skip link to avoid test breaking

---
 packages/frontend/app/components/ilios-header.gjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/app/components/ilios-header.gjs b/packages/frontend/app/components/ilios-header.gjs
index 1a2df67ec9..de1b605d04 100644
--- a/packages/frontend/app/components/ilios-header.gjs
+++ b/packages/frontend/app/components/ilios-header.gjs
@@ -76,7 +76,7 @@ export default class IliosHeaderComponent extends Component {
         @skipLink={{false}}
         @routeChangeValidator={{this.checkRouteChange}}
       />
-      <a href="#main" class="visually-hidden">
+      <a href="#main" id="ember-a11y-refocus-skip-link" class="visually-hidden">
         {{t "general.skipToMainContent"}}
       </a>
       <h1 class="visually-hidden" data-test-title>