diff --git a/docs/components/application/code.mdx b/docs/components/application/code.mdx index 07db21dfb..6e7b44db7 100644 --- a/docs/components/application/code.mdx +++ b/docs/components/application/code.mdx @@ -18,29 +18,63 @@ The code snippet below shows an example of a combination of different components +## Skip links + +`ix-application` includes a skip-link list with no configuration required. The list is the first focusable content owned by `ix-application`; focusable document content rendered before the component remains before it in the tab order. The links remain visually hidden until they receive focus. Moving focus between them replaces the visible link at the same top-start position, and the list does not create an additional navigation landmark. + +The main link focuses the application's internal main region by default. Use `skip-link-main-target-id` to focus a specific content boundary instead: + +```html + + + ... + ... + + +``` + +Pass the target as a bare ID, not as `#main-content` or another CSS selector. The target must be a unique, usable light DOM descendant of the same `ix-application`. The component makes a non-interactive destination programmatically focusable when necessary and preserves an existing `tabindex`. If the target cannot be used, the component logs a warning and falls back to the internal main region. + +Activating the main link moves focus to its destination and scrolls it to the beginning. When the `bottom` slot contains meaningful content, a second “Skip to footer” link appears after the main link and updates automatically when the slot content changes. Activating it focuses the internal footer landmark without changing the main region's scroll position. Neither link changes the URL fragment or browser history. + +Use `i18n-skip-to-main` and `i18n-skip-to-footer` to translate the skip-link text. This example translates it into German: + +```html + + ... + +``` + +Empty localization values produce a warning and fall back to “Skip to main content” and “Skip to footer” so both links retain accessible names. + +Set `disable-skip-links` only when an equivalent document-level bypass mechanism is already available. + ## Breakpoints -## Application Switch +## Application switch The navigation to another application is implemented via `window.open` (https://developer.mozilla.org/en-US/docs/Web/API/Window/open). Therefore you can control if the navigation should happen inside the current browser context `target: '_self'` or inside a new tab `target: '_blank'` (more information about target can be found [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)) ```javascript - { +{ id: 'demo-app-2', - name: 'Calculator App', - description: 'Example description for Calculator App', - iconSrc: '...url to some icon', + name: 'Calculator App', + description: 'Example description for Calculator App', + iconSrc: '...url to some icon', - url: '...target url', - target: '_self', // Define the navigation context (e.g current browser context or new tab) + url: '...target url', + target: '_self', // Define the navigation context, e.g current browser context or new tab } ``` -## Application Advanced +## Application advanced diff --git a/docs/components/application/guide.md b/docs/components/application/guide.md index 4774e8824..53edd9d3c 100644 --- a/docs/components/application/guide.md +++ b/docs/components/application/guide.md @@ -9,7 +9,7 @@ Application is a technical and infrastructural component without a direct visual The component itself is designed with modularity in mind. It can be seamlessly integrated with other components such as [application header](/docs/components/application-header/guide.md), [application menu](/docs/components/application-menu/guide.md), [content](/docs/components/content/guide.md) and more. This modular approach allows you to mix and match components based on your specific application requirements, providing flexibility and customization options. -It's important to note that the application component focuses solely on layouting and does not dictate visual design. +The application component primarily manages layout and application-wide behavior. ## Application example @@ -39,12 +39,20 @@ We typically avoid opening the same application in multiple browser tabs. Instea ## Options -- **forceBreakpoint:** Forces a specific breakpoint "lg", "md" or "sm". This can be used to force a specific application behavior that ignores the current browser viewport width. +- **Breakpoint:** Use “lg”, “md” or “sm” to override responsive behavior regardless of the browser viewport width. +- **Skip link target:** Set a custom destination when users should bypass the application shell and land at a more specific content boundary. +- **Disable skip links:** Disable skip links only when you already provide an equivalent document-level bypass. -## Behavior +## Behavior in context -The application component automatically adapts, by default, to three breakpoints and changes the application layout accordingly: +- **Interaction:** The application component provides a skip-link list by default. “Skip to main content” is always the first focusable element within the application shell. “Skip to footer” follows when the application footer contains meaningful content. Skip links remain hidden until they receive keyboard focus and help users bypass repeated application content. We recommend keeping them enabled unless the page provides an equivalent bypass mechanism. +- **Responsiveness:** The application component automatically adapts to three breakpoints and changes the application layout accordingly: + - `lg` for large screens (min-width 62em) + - `md` for medium screens (min-width 48em) + - `sm` for small screens (min-width 36em) -- "lg" for large screens (min-width 62em) -- "md" for medium screens (min-width 48em) -- "sm" for small screens (min-width 36em) +## Related + +- [Accessibility](../../guidelines/accessibility) +- [WCAG 2.2: Bypass Blocks](https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html) +- [W3C Technique G1: Adding a link to main content](https://www.w3.org/WAI/WCAG22/Techniques/general/G1) diff --git a/docs/guidelines/accessibility/code.md b/docs/guidelines/accessibility/code.md index 24253a55a..9e05c0430 100644 --- a/docs/guidelines/accessibility/code.md +++ b/docs/guidelines/accessibility/code.md @@ -245,6 +245,8 @@ The `navigation` role can also be used instead of the `