From a9573357710777f8d7c6b89c96ac564b1a2c9943 Mon Sep 17 00:00:00 2001
From: "Dmytro H." <dmytro.halimov@gmail.com>
Date: Fri, 31 Jul 2026 09:46:16 +0300
Subject: [PATCH] feat(core/application): Adjust skip link

---
 apps/angular-starter/src/app/app.html         |   3 +-
 apps/angular-starter/src/styles.css           |  16 ---
 apps/react-starter/src/App.css                |  16 ---
 apps/react-starter/src/App.tsx                | 119 +++++++++---------
 apps/vue-starter/src/App.vue                  |   3 +-
 apps/vue-starter/src/styles/global.css        |  16 ---
 .../src/app/app.html                          |   3 +-
 .../src/styles.css                            |  16 ---
 .../template-ix-react-starter/src/App.css     |  16 ---
 .../template-ix-react-starter/src/App.tsx     | 119 +++++++++---------
 .../template-ix-vue-starter/src/App.vue       |   3 +-
 .../src/styles/global.css                     |  16 ---
 12 files changed, 118 insertions(+), 228 deletions(-)

diff --git a/apps/angular-starter/src/app/app.html b/apps/angular-starter/src/app/app.html
index bf7fdab..3df86c8 100644
--- a/apps/angular-starter/src/app/app.html
+++ b/apps/angular-starter/src/app/app.html
@@ -1,5 +1,4 @@
-<a href="#main-content" class="skip-link">Skip to main content</a>
-<ix-application>
+<ix-application skipLinkTargetId="main-content">
   <ix-application-header name="Siemens Industrial Experience Starter App">
     @if (showLogo) {
       <app-company-logo slot="logo"></app-company-logo>
diff --git a/apps/angular-starter/src/styles.css b/apps/angular-starter/src/styles.css
index 88ca8ae..a2192aa 100644
--- a/apps/angular-starter/src/styles.css
+++ b/apps/angular-starter/src/styles.css
@@ -10,22 +10,6 @@ body {
   outline: var(--theme-color-focus-bdr);
 }
 
-.skip-link {
-  position: absolute;
-  top: -40px;
-  left: 0;
-  background: var(--theme-color-1);
-  color: var(--theme-color-std-text);
-  padding: 8px 16px;
-  z-index: 10000;
-  text-decoration: none;
-  font-weight: 600;
-}
-
-.skip-link:focus {
-  top: 0;
-}
-
 .sr-only {
   position: absolute;
   width: 1px;
diff --git a/apps/react-starter/src/App.css b/apps/react-starter/src/App.css
index 09d4265..c5b7dbb 100644
--- a/apps/react-starter/src/App.css
+++ b/apps/react-starter/src/App.css
@@ -11,22 +11,6 @@ body,
   outline: var(--theme-color-focus-bdr);
 }
 
-.skip-link {
-  position: absolute;
-  top: -40px;
-  left: 0;
-  background: var(--theme-color-1);
-  color: var(--theme-color-std-text);
-  padding: 8px 16px;
-  z-index: 10000;
-  text-decoration: none;
-  font-weight: 600;
-}
-
-.skip-link:focus {
-  top: 0;
-}
-
 .sr-only {
   position: absolute;
   width: 1px;
diff --git a/apps/react-starter/src/App.tsx b/apps/react-starter/src/App.tsx
index 4729f33..c1c03aa 100644
--- a/apps/react-starter/src/App.tsx
+++ b/apps/react-starter/src/App.tsx
@@ -23,70 +23,65 @@ function App() {
   const isActive = (path: string): boolean => location.pathname === path;
 
   return (
-    <>
-      <a href="#main-content" className="skip-link">
-        Skip to main content
-      </a>
-      <IxApplication>
-        <IxApplicationHeader name="Siemens Industrial Experience Starter App">
-          <CompanyLogo />
-          <IxAvatar initials="JD" aria-label="User avatar: JD" />
-        </IxApplicationHeader>
+    <IxApplication skipLinkTargetId="main-content">
+      <IxApplicationHeader name="Siemens Industrial Experience Starter App">
+        <CompanyLogo />
+        <IxAvatar initials="JD" aria-label="User avatar: JD" />
+      </IxApplicationHeader>
 
-        <IxMenu enableToggleTheme aria-label="Main navigation">
-          <IxMenuItem
-            icon={iconHome}
-            active={isActive('/')}
-            onClick={e => {
-              e.preventDefault();
-              navigate('/');
-            }}
-          >
-            Get Started
-          </IxMenuItem>
-          <IxMenuItem
-            icon={iconTextDocument}
-            active={isActive('/forms')}
-            onClick={e => {
-              e.preventDefault();
-              navigate('/forms');
-            }}
-          >
-            Forms
-          </IxMenuItem>
-          <IxMenuItem
-            icon={iconPiechart}
-            active={isActive('/charts')}
-            onClick={e => {
-              e.preventDefault();
-              navigate('/charts');
-            }}
-          >
-            Charts
-          </IxMenuItem>
-          <IxMenuItem
-            icon={iconTable}
-            active={isActive('/grids')}
-            onClick={e => {
-              e.preventDefault();
-              navigate('/grids');
-            }}
-          >
-            Grids
-          </IxMenuItem>
-        </IxMenu>
+      <IxMenu enableToggleTheme aria-label="Main navigation">
+        <IxMenuItem
+          icon={iconHome}
+          active={isActive('/')}
+          onClick={e => {
+            e.preventDefault();
+            navigate('/');
+          }}
+        >
+          Get Started
+        </IxMenuItem>
+        <IxMenuItem
+          icon={iconTextDocument}
+          active={isActive('/forms')}
+          onClick={e => {
+            e.preventDefault();
+            navigate('/forms');
+          }}
+        >
+          Forms
+        </IxMenuItem>
+        <IxMenuItem
+          icon={iconPiechart}
+          active={isActive('/charts')}
+          onClick={e => {
+            e.preventDefault();
+            navigate('/charts');
+          }}
+        >
+          Charts
+        </IxMenuItem>
+        <IxMenuItem
+          icon={iconTable}
+          active={isActive('/grids')}
+          onClick={e => {
+            e.preventDefault();
+            navigate('/grids');
+          }}
+        >
+          Grids
+        </IxMenuItem>
+      </IxMenu>
 
-        <IxContent id="main-content">
-          <Routes>
-            <Route path="/" element={<GetStarted />} />
-            <Route path="/forms" element={<Forms />} />
-            <Route path="/charts" element={<Charts />} />
-            <Route path="/grids" element={<Grids />} />
-            <Route path="*" element={<GetStarted />} />
-          </Routes>
-        </IxContent>
-      </IxApplication>
-    </>
+      <IxContent id="main-content">
+        <Routes>
+          <Route path="/" element={<GetStarted />} />
+          <Route path="/forms" element={<Forms />} />
+          <Route path="/charts" element={<Charts />} />
+          <Route path="/grids" element={<Grids />} />
+          <Route path="*" element={<GetStarted />} />
+        </Routes>
+      </IxContent>
+    </IxApplication>
   );
 }
 
diff --git a/apps/vue-starter/src/App.vue b/apps/vue-starter/src/App.vue
index 4fa127f..e454767 100644
--- a/apps/vue-starter/src/App.vue
+++ b/apps/vue-starter/src/App.vue
@@ -16,8 +16,7 @@ const route = useRoute();
 </script>
 
 <template>
-  <a href="#main-content" class="skip-link">Skip to main content</a>
-  <IxApplication>
+  <IxApplication skipLinkTargetId="main-content">
     <IxApplicationHeader name="Siemens Industrial Experience Starter App">
       <CompanyLogo />
       <IxAvatar initials="JD" aria-label="User avatar: JD" />
diff --git a/apps/vue-starter/src/styles/global.css b/apps/vue-starter/src/styles/global.css
index 76e71a0..b2adcdf 100644
--- a/apps/vue-starter/src/styles/global.css
+++ b/apps/vue-starter/src/styles/global.css
@@ -11,22 +11,6 @@ body,
   outline: var(--theme-color-focus-bdr);
 }
 
-.skip-link {
-  position: absolute;
-  top: -40px;
-  left: 0;
-  background: var(--theme-color-1);
-  color: var(--theme-color-std-text);
-  padding: 8px 16px;
-  z-index: 10000;
-  text-decoration: none;
-  font-weight: 600;
-}
-
-.skip-link:focus {
-  top: 0;
-}
-
 .sr-only {
   position: absolute;
   width: 1px;
diff --git a/packages/create-siemens-web/template-ix-angular-starter/src/app/app.html b/packages/create-siemens-web/template-ix-angular-starter/src/app/app.html
index bf7fdab..3df86c8 100644
--- a/packages/create-siemens-web/template-ix-angular-starter/src/app/app.html
+++ b/packages/create-siemens-web/template-ix-angular-starter/src/app/app.html
@@ -1,5 +1,4 @@
-<a href="#main-content" class="skip-link">Skip to main content</a>
-<ix-application>
+<ix-application skipLinkTargetId="main-content">
   <ix-application-header name="Siemens Industrial Experience Starter App">
     @if (showLogo) {
       <app-company-logo slot="logo"></app-company-logo>
diff --git a/packages/create-siemens-web/template-ix-angular-starter/src/styles.css b/packages/create-siemens-web/template-ix-angular-starter/src/styles.css
index 0cf1c61..f518176 100644
--- a/packages/create-siemens-web/template-ix-angular-starter/src/styles.css
+++ b/packages/create-siemens-web/template-ix-angular-starter/src/styles.css
@@ -10,22 +10,6 @@ body {
   outline: var(--theme-color-focus-bdr);
 }
 
-.skip-link {
-  position: absolute;
-  top: -40px;
-  left: 0;
-  background: var(--theme-color-1);
-  color: var(--theme-color-std-text);
-  padding: 8px 16px;
-  z-index: 10000;
-  text-decoration: none;
-  font-weight: 600;
-}
-
-.skip-link:focus {
-  top: 0;
-}
-
 .sr-only {
   position: absolute;
   inline-size: 1px;
diff --git a/packages/create-siemens-web/template-ix-react-starter/src/App.css b/packages/create-siemens-web/template-ix-react-starter/src/App.css
index 4b64469..a86d483 100644
--- a/packages/create-siemens-web/template-ix-react-starter/src/App.css
+++ b/packages/create-siemens-web/template-ix-react-starter/src/App.css
@@ -11,22 +11,6 @@ body,
   outline: var(--theme-color-focus-bdr);
 }
 
-.skip-link {
-  position: absolute;
-  top: -40px;
-  left: 0;
-  background: var(--theme-color-1);
-  color: var(--theme-color-std-text);
-  padding: 8px 16px;
-  z-index: 10000;
-  text-decoration: none;
-  font-weight: 600;
-}
-
-.skip-link:focus {
-  top: 0;
-}
-
 .sr-only {
   position: absolute;
   inline-size: 1px;
diff --git a/packages/create-siemens-web/template-ix-react-starter/src/App.tsx b/packages/create-siemens-web/template-ix-react-starter/src/App.tsx
index 4729f33..c1c03aa 100644
--- a/packages/create-siemens-web/template-ix-react-starter/src/App.tsx
+++ b/packages/create-siemens-web/template-ix-react-starter/src/App.tsx
@@ -23,70 +23,65 @@ function App() {
   const isActive = (path: string): boolean => location.pathname === path;
 
   return (
-    <>
-      <a href="#main-content" className="skip-link">
-        Skip to main content
-      </a>
-      <IxApplication>
-        <IxApplicationHeader name="Siemens Industrial Experience Starter App">
-          <CompanyLogo />
-          <IxAvatar initials="JD" aria-label="User avatar: JD" />
-        </IxApplicationHeader>
+    <IxApplication skipLinkTargetId="main-content">
+      <IxApplicationHeader name="Siemens Industrial Experience Starter App">
+        <CompanyLogo />
+        <IxAvatar initials="JD" aria-label="User avatar: JD" />
+      </IxApplicationHeader>
 
-        <IxMenu enableToggleTheme aria-label="Main navigation">
-          <IxMenuItem
-            icon={iconHome}
-            active={isActive('/')}
-            onClick={e => {
-              e.preventDefault();
-              navigate('/');
-            }}
-          >
-            Get Started
-          </IxMenuItem>
-          <IxMenuItem
-            icon={iconTextDocument}
-            active={isActive('/forms')}
-            onClick={e => {
-              e.preventDefault();
-              navigate('/forms');
-            }}
-          >
-            Forms
-          </IxMenuItem>
-          <IxMenuItem
-            icon={iconPiechart}
-            active={isActive('/charts')}
-            onClick={e => {
-              e.preventDefault();
-              navigate('/charts');
-            }}
-          >
-            Charts
-          </IxMenuItem>
-          <IxMenuItem
-            icon={iconTable}
-            active={isActive('/grids')}
-            onClick={e => {
-              e.preventDefault();
-              navigate('/grids');
-            }}
-          >
-            Grids
-          </IxMenuItem>
-        </IxMenu>
+      <IxMenu enableToggleTheme aria-label="Main navigation">
+        <IxMenuItem
+          icon={iconHome}
+          active={isActive('/')}
+          onClick={e => {
+            e.preventDefault();
+            navigate('/');
+          }}
+        >
+          Get Started
+        </IxMenuItem>
+        <IxMenuItem
+          icon={iconTextDocument}
+          active={isActive('/forms')}
+          onClick={e => {
+            e.preventDefault();
+            navigate('/forms');
+          }}
+        >
+          Forms
+        </IxMenuItem>
+        <IxMenuItem
+          icon={iconPiechart}
+          active={isActive('/charts')}
+          onClick={e => {
+            e.preventDefault();
+            navigate('/charts');
+          }}
+        >
+          Charts
+        </IxMenuItem>
+        <IxMenuItem
+          icon={iconTable}
+          active={isActive('/grids')}
+          onClick={e => {
+            e.preventDefault();
+            navigate('/grids');
+          }}
+        >
+          Grids
+        </IxMenuItem>
+      </IxMenu>
 
-        <IxContent id="main-content">
-          <Routes>
-            <Route path="/" element={<GetStarted />} />
-            <Route path="/forms" element={<Forms />} />
-            <Route path="/charts" element={<Charts />} />
-            <Route path="/grids" element={<Grids />} />
-            <Route path="*" element={<GetStarted />} />
-          </Routes>
-        </IxContent>
-      </IxApplication>
-    </>
+      <IxContent id="main-content">
+        <Routes>
+          <Route path="/" element={<GetStarted />} />
+          <Route path="/forms" element={<Forms />} />
+          <Route path="/charts" element={<Charts />} />
+          <Route path="/grids" element={<Grids />} />
+          <Route path="*" element={<GetStarted />} />
+        </Routes>
+      </IxContent>
+    </IxApplication>
   );
 }
 
diff --git a/packages/create-siemens-web/template-ix-vue-starter/src/App.vue b/packages/create-siemens-web/template-ix-vue-starter/src/App.vue
index 4fa127f..e454767 100644
--- a/packages/create-siemens-web/template-ix-vue-starter/src/App.vue
+++ b/packages/create-siemens-web/template-ix-vue-starter/src/App.vue
@@ -16,8 +16,7 @@ const route = useRoute();
 </script>
 
 <template>
-  <a href="#main-content" class="skip-link">Skip to main content</a>
-  <IxApplication>
+  <IxApplication skipLinkTargetId="main-content">
     <IxApplicationHeader name="Siemens Industrial Experience Starter App">
       <CompanyLogo />
       <IxAvatar initials="JD" aria-label="User avatar: JD" />
diff --git a/packages/create-siemens-web/template-ix-vue-starter/src/styles/global.css b/packages/create-siemens-web/template-ix-vue-starter/src/styles/global.css
index d82fa51..7e5ab0f 100644
--- a/packages/create-siemens-web/template-ix-vue-starter/src/styles/global.css
+++ b/packages/create-siemens-web/template-ix-vue-starter/src/styles/global.css
@@ -11,22 +11,6 @@ body,
   outline: var(--theme-color-focus-bdr);
 }
 
-.skip-link {
-  position: absolute;
-  top: -40px;
-  left: 0;
-  background: var(--theme-color-1);
-  color: var(--theme-color-std-text);
-  padding: 8px 16px;
-  z-index: 10000;
-  text-decoration: none;
-  font-weight: 600;
-}
-
-.skip-link:focus {
-  top: 0;
-}
-
 .sr-only {
   position: absolute;
   inline-size: 1px;