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

.changeset/calm-birds-skip.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': minor
+---
+
+Add localized Main and conditional Footer skip links to `ix-application`, including configurable Main targeting and accessible focus management.

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 skipLinkMainTargetId="main-content">
   <ix-application-header name="My Application">
     <div class="placeholder-logo" slot="logo"></div>
   </ix-application-header>
@@ -17,8 +17,9 @@
     <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>
+  <button slot="bottom">Footer action</button>
 </ix-application>

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 skipLinkMainTargetId="main-content">
   <ix-application-header name="My Application">
     <div class="placeholder-logo" slot="logo"></div>
   </ix-application-header>
@@ -17,8 +17,9 @@
     <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>
+  <button slot="bottom">Footer action</button>
 </ix-application>

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', 'disableSkipLinks', 'forceBreakpoint', 'i18nSkipToFooter', 'i18nSkipToMain', 'skipLinkMainTargetId', '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', 'disableSkipLinks', 'forceBreakpoint', 'i18nSkipToFooter', 'i18nSkipToMain', 'skipLinkMainTargetId', 'theme'],
   standalone: false
 })
 export class IxApplication {

packages/angular/standalone/src/components.ts

@@ -142,14 +142,14 @@ export declare interface IxActionCard extends Components.IxActionCard {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIxApplication,
-  inputs: ['appSwitchConfig', 'breakpoints', 'colorSchema', 'forceBreakpoint', 'theme']
+  inputs: ['appSwitchConfig', 'breakpoints', 'colorSchema', 'disableSkipLinks', 'forceBreakpoint', 'i18nSkipToFooter', 'i18nSkipToMain', 'skipLinkMainTargetId', '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', 'disableSkipLinks', 'forceBreakpoint', 'i18nSkipToFooter', 'i18nSkipToMain', 'skipLinkMainTargetId', 'theme'],
 })
 export class IxApplication {
   protected el: HTMLIxApplicationElement;

packages/core/component-api.json

@@ -132,6 +132,17 @@
           "required": false,
           "deprecated": false
         },
+        {
+          "name": "disableSkipLinks",
+          "attribute": "disable-skip-links",
+          "type": "boolean",
+          "mutable": false,
+          "reflectToAttribute": false,
+          "default": "false",
+          "optional": false,
+          "required": false,
+          "deprecated": false
+        },
         {
           "name": "forceBreakpoint",
           "attribute": "force-breakpoint",
@@ -142,6 +153,38 @@
           "required": false,
           "deprecated": false
         },
+        {
+          "name": "i18nSkipToFooter",
+          "attribute": "i18n-skip-to-footer",
+          "type": "string",
+          "mutable": false,
+          "reflectToAttribute": false,
+          "default": "'Skip to footer'",
+          "optional": false,
+          "required": false,
+          "deprecated": false
+        },
+        {
+          "name": "i18nSkipToMain",
+          "attribute": "i18n-skip-to-main",
+          "type": "string",
+          "mutable": false,
+          "reflectToAttribute": false,
+          "default": "'Skip to main content'",
+          "optional": false,
+          "required": false,
+          "deprecated": false
+        },
+        {
+          "name": "skipLinkMainTargetId",
+          "attribute": "skip-link-main-target-id",
+          "type": "string | undefined",
+          "mutable": false,
+          "reflectToAttribute": false,
+          "optional": true,
+          "required": false,
+          "deprecated": false
+        },
         {
           "name": "theme",
           "attribute": "theme",

packages/core/src/components.d.ts

@@ -176,10 +176,33 @@ export namespace Components {
           * @default 'system'
          */
         "colorSchema"?: ThemeVariant;
+        /**
+          * Disable the built-in links for bypassing repeated application content. Only disable them when an equivalent bypass mechanism is provided elsewhere.
+          * @since 6.0.0
+          * @default false
+         */
+        "disableSkipLinks": boolean;
         /**
           * Change the responsive layout of the menu structure
          */
         "forceBreakpoint": Breakpoint | undefined;
+        /**
+          * Localized text for the link that focuses the application footer.
+          * @since 6.0.0
+          * @default 'Skip to footer'
+         */
+        "i18nSkipToFooter": string;
+        /**
+          * Localized text for the link that bypasses repeated application content and focuses the main region.
+          * @since 6.0.0
+          * @default 'Skip to main content'
+         */
+        "i18nSkipToMain": string;
+        /**
+          * ID of a light-DOM descendant to focus when the Main skip link is activated. Falls back to the internal main region when the target cannot be used.
+          * @since 6.0.0
+         */
+        "skipLinkMainTargetId"?: string;
         /**
           * Application theme
          */
@@ -7049,10 +7072,33 @@ declare namespace LocalJSX {
           * @default 'system'
          */
         "colorSchema"?: ThemeVariant;
+        /**
+          * Disable the built-in links for bypassing repeated application content. Only disable them when an equivalent bypass mechanism is provided elsewhere.
+          * @since 6.0.0
+          * @default false
+         */
+        "disableSkipLinks"?: boolean;
         /**
           * Change the responsive layout of the menu structure
          */
         "forceBreakpoint"?: Breakpoint | undefined;
+        /**
+          * Localized text for the link that focuses the application footer.
+          * @since 6.0.0
+          * @default 'Skip to footer'
+         */
+        "i18nSkipToFooter"?: string;
+        /**
+          * Localized text for the link that bypasses repeated application content and focuses the main region.
+          * @since 6.0.0
+          * @default 'Skip to main content'
+         */
+        "i18nSkipToMain"?: string;
+        /**
+          * ID of a light-DOM descendant to focus when the Main skip link is activated. Falls back to the internal main region when the target cannot be used.
+          * @since 6.0.0
+         */
+        "skipLinkMainTargetId"?: string;
         /**
           * Application theme
          */
@@ -12193,6 +12239,10 @@ declare namespace LocalJSX {
         "theme": string;
         "colorSchema": ThemeVariant;
         "forceBreakpoint": Breakpoint | undefined;
+        "disableSkipLinks": boolean;
+        "i18nSkipToMain": string;
+        "i18nSkipToFooter": string;
+        "skipLinkMainTargetId": 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,43 @@
 
   @include component.ix-component;
 
+  .skip-links {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .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);
   }
@@ -61,9 +99,21 @@
     display: block;
     position: relative;
     width: 100%;
+
+    &[hidden] {
+      display: none;
+    }
   }
 }
 
+: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)