feat(core/application): Add skip links to ix-application component

.changeset/calm-birds-skip.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': minor
+---
+
+Add a default-on skip link to `ix-application` for bypassing repeated application-shell content, including configurable destination targeting with focus and scroll management, localized link text, and an explicit opt-out for applications that provide their own bypass mechanism.

packages/angular-standalone-test-app/src/preview-examples/application.html

@@ -7,7 +7,7 @@
 LICENSE file in the root directory of this source tree.
 -->
 
-<ix-application>
+<ix-application skipLinkTargetId="main-content">
   <ix-application-header name="My Application">
     <div class="placeholder-logo" slot="logo"></div>
   </ix-application-header>
@@ -17,7 +17,7 @@
     <ix-menu-item>Item 2</ix-menu-item>
   </ix-menu>
 
-  <ix-content>
+  <ix-content id="main-content">
     <ix-content-header slot="header" header-title="My Content Page">
     </ix-content-header>
   </ix-content>

packages/angular-test-app/src/preview-examples/application.html

@@ -7,7 +7,7 @@
 LICENSE file in the root directory of this source tree.
 -->
 
-<ix-application>
+<ix-application skipLinkTargetId="main-content">
   <ix-application-header name="My Application">
     <div class="placeholder-logo" slot="logo"></div>
   </ix-application-header>
@@ -17,7 +17,7 @@
     <ix-menu-item>Item 2</ix-menu-item>
   </ix-menu>
 
-  <ix-content>
+  <ix-content id="main-content">
     <ix-content-header slot="header" header-title="My Content Page">
     </ix-content-header>
   </ix-content>

packages/angular/src/components.ts

@@ -31,14 +31,14 @@ export declare interface IxActionCard extends Components.IxActionCard {}
 
 
 @ProxyCmp({
-  inputs: ['appSwitchConfig', 'breakpoints', 'colorSchema', 'forceBreakpoint', 'theme']
+  inputs: ['appSwitchConfig', 'breakpoints', 'colorSchema', 'disableSkipLink', 'forceBreakpoint', 'i18nSkipToContent', 'skipLinkTargetId', 'theme']
 })
 @Component({
   selector: 'ix-application',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['appSwitchConfig', 'breakpoints', 'colorSchema', 'forceBreakpoint', 'theme'],
+  inputs: ['appSwitchConfig', 'breakpoints', 'colorSchema', 'disableSkipLink', 'forceBreakpoint', 'i18nSkipToContent', 'skipLinkTargetId', 'theme'],
   standalone: false
 })
 export class IxApplication {

packages/angular/standalone/src/components.ts

@@ -141,14 +141,14 @@ export declare interface IxActionCard extends Components.IxActionCard {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIxApplication,
-  inputs: ['appSwitchConfig', 'breakpoints', 'colorSchema', 'forceBreakpoint', 'theme']
+  inputs: ['appSwitchConfig', 'breakpoints', 'colorSchema', 'disableSkipLink', 'forceBreakpoint', 'i18nSkipToContent', 'skipLinkTargetId', 'theme']
 })
 @Component({
   selector: 'ix-application',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['appSwitchConfig', 'breakpoints', 'colorSchema', 'forceBreakpoint', 'theme'],
+  inputs: ['appSwitchConfig', 'breakpoints', 'colorSchema', 'disableSkipLink', 'forceBreakpoint', 'i18nSkipToContent', 'skipLinkTargetId', 'theme'],
 })
 export class IxApplication {
   protected el: HTMLIxApplicationElement;

packages/core/src/components.d.ts

@@ -174,10 +174,27 @@ export namespace Components {
           * @default 'system'
          */
         "colorSchema"?: ThemeVariant;
+        /**
+          * Disable the built-in link for bypassing repeated application content. Only disable it when an equivalent bypass mechanism is provided elsewhere.
+          * @since 5.2.0
+          * @default false
+         */
+        "disableSkipLink": boolean;
         /**
           * Change the responsive layout of the menu structure
          */
         "forceBreakpoint": Breakpoint | undefined;
+        /**
+          * Localized text for the link that bypasses repeated application content.
+          * @since 5.2.0
+          * @default 'Skip to main content'
+         */
+        "i18nSkipToContent": string;
+        /**
+          * ID of a light-DOM descendant to focus when the skip link is activated. Falls back to the internal main region when the target cannot be used.
+          * @since 5.2.0
+         */
+        "skipLinkTargetId"?: string;
         /**
           * Application theme
          */
@@ -6931,10 +6948,27 @@ declare namespace LocalJSX {
           * @default 'system'
          */
         "colorSchema"?: ThemeVariant;
+        /**
+          * Disable the built-in link for bypassing repeated application content. Only disable it when an equivalent bypass mechanism is provided elsewhere.
+          * @since 5.2.0
+          * @default false
+         */
+        "disableSkipLink"?: boolean;
         /**
           * Change the responsive layout of the menu structure
          */
         "forceBreakpoint"?: Breakpoint | undefined;
+        /**
+          * Localized text for the link that bypasses repeated application content.
+          * @since 5.2.0
+          * @default 'Skip to main content'
+         */
+        "i18nSkipToContent"?: string;
+        /**
+          * ID of a light-DOM descendant to focus when the skip link is activated. Falls back to the internal main region when the target cannot be used.
+          * @since 5.2.0
+         */
+        "skipLinkTargetId"?: string;
         /**
           * Application theme
          */
@@ -11977,6 +12011,9 @@ declare namespace LocalJSX {
         "theme": string;
         "colorSchema": ThemeVariant;
         "forceBreakpoint": Breakpoint | undefined;
+        "disableSkipLink": boolean;
+        "i18nSkipToContent": string;
+        "skipLinkTargetId": string;
     }
     interface IxApplicationHeaderAttributes {
         "name": string;

packages/core/src/components/application/application.scss

@@ -8,6 +8,7 @@
  */
 
 @use 'mixins/shadow-dom/component';
+@use 'mixins/fonts';
 
 :host {
   display: flex;
@@ -19,6 +20,37 @@
 
   @include component.ix-component;
 
+  .skip-link {
+    @include fonts.typography-body;
+
+    position: absolute;
+    inset-block-start: -100%;
+    inset-inline-start: calc(
+      var(--ix-safe-area-inset-left, 0rem)
+        + var(--theme-focus--border-thickness)
+        + var(--theme-btn--focus--outline-offset)
+    );
+    z-index: calc(var(--theme-z-index-fixed) + 1);
+    padding: var(--theme-space-1) var(--theme-space-3);
+    background-color: var(--theme-color-2);
+    color: var(--theme-color-primary);
+    white-space: nowrap;
+
+    &:focus {
+      inset-block-start: calc(
+        var(--ix-safe-area-inset-top, 0rem)
+          + var(--theme-focus--border-thickness)
+          + var(--theme-btn--focus--outline-offset)
+      );
+    }
+
+    &:focus-visible {
+      outline: var(--theme-focus--border-thickness) solid
+        var(--theme-color-focus-bdr);
+      outline-offset: var(--theme-btn--focus--outline-offset);
+    }
+  }
+
   ix-application-header {
     z-index: calc(var(--theme-z-index-sticky) + 1);
   }
@@ -64,6 +96,14 @@
   }
 }
 
+:host(:dir(rtl)) .skip-link {
+  inset-inline-start: calc(
+    var(--ix-safe-area-inset-right, 0rem)
+      + var(--theme-focus--border-thickness)
+      + var(--theme-btn--focus--outline-offset)
+  );
+}
+
 :host(.breakpoint-md) {
   --ix-application-menu-margin-left: calc(
     3.25rem + var(--ix-application-menu-safe-area-left, 0rem)