feat(core/application): Add skip links to ix-application component - #2670
Open
dmytro-halimov wants to merge 3 commits into
Open
feat(core/application): Add skip links to ix-application component#2670dmytro-halimov wants to merge 3 commits into
dmytro-halimov wants to merge 3 commits into
Conversation
🦋 Changeset detectedLatest commit: 6b4864c The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for ix-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthrough
ChangesApplication skip-link support
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant ix_application
participant SkipLinkTarget
participant MainRegion
User->>ix_application: Focus and activate skip link
ix_application->>SkipLinkTarget: Resolve and validate configured target
ix_application->>SkipLinkTarget: Focus and scroll usable target
ix_application->>MainRegion: Focus internal main region on fallback
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
dmytro-halimov
marked this pull request as ready for review
July 24, 2026 12:56
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/core/src/components/application/application.scss`:
- Around line 33-36: Remove the empty line between the z-index and padding
declarations in the application styles so padding immediately follows z-index
and satisfies the declaration-empty-line-before lint rule.
- Around line 28-32: Update the multiline calc() expressions in the application
styles, including the inset-inline-start declarations near the referenced
sections, to place each + operator at the beginning of the following line rather
than leaving it at the end of the preceding line. Preserve the existing values
and formatting otherwise so stylelint no longer reports
scss/operator-no-newline-after violations.
In `@packages/core/src/components/application/application.tsx`:
- Around line 213-251: Update focusCustomSkipLinkTarget and
restoreTemporaryTargetFocusability so each temporary target’s blur listener
captures and restores that specific target rather than reading the shared
temporaryFocusTarget at event time. Ensure switching focus from one custom
target to another cleans up the previous target independently, removes only its
own listener and temporary tabindex, and preserves the current target’s cleanup
state.
- Around line 193-211: Update findCustomSkipLinkTarget to query only elements
matching the requested targetId using a properly escaped attribute selector,
while preserving the existing isOwnedLightDomDescendant check, uniqueness
validation, usability validation, warning, and fallback behavior.
In `@packages/core/src/components/application/test/application.ct.ts`:
- Around line 86-89: Update the outlineInset calculation in the link.evaluate
callback to use Number.parseFloat for both style.outlineWidth and
style.outlineOffset, replacing the global parseFloat calls without changing the
calculation.
In `@testing/visual-testing/tests/application/application.e2e.ts`:
- Around line 13-26: Update the focused skip-link regression test to execute for
theme-classic-light, theme-classic-dark, and the brand theme, reusing the
existing navigation, viewport, focus assertions, and screenshot configuration
for each variant.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: d62d2310-3d28-499d-8ce3-1e82d6479d08
⛔ Files ignored due to path filters (5)
packages/angular/standalone/src/components.tsis excluded by!packages/angular/standalone/src/components.tspackages/react/src/components/components.server.tsis excluded by!packages/react/src/components/**packages/vue/src/components/ix-application.tsis excluded by!packages/vue/src/components/**testing/visual-testing/__screenshots__/tests/application/application.e2e.ts/focused-skip-link-1-chromium---classic-dark-linux.pngis excluded by!**/*.pngtesting/visual-testing/__screenshots__/tests/application/application.e2e.ts/focused-skip-link-1-chromium---classic-light-linux.pngis excluded by!**/*.png
📒 Files selected for processing (27)
.changeset/calm-birds-skip.mdpackages/angular-standalone-test-app/src/preview-examples/application.htmlpackages/angular-test-app/src/preview-examples/application.htmlpackages/angular/src/components.tspackages/core/src/components.d.tspackages/core/src/components/application/application.scsspackages/core/src/components/application/application.tsxpackages/core/src/components/application/test/application.ct.tspackages/core/src/components/menu-category/test/menu-category.ct.tspackages/core/src/components/menu/test/menu.ct.tspackages/html-test-app/src/preview-examples/application.htmlpackages/react-test-app/src/preview-examples/application.tsxpackages/vue-test-app/src/preview-examples/application.vuetesting/framework-tests/__snapshots__/about-and-legal-aria-snapshot.yamltesting/framework-tests/__snapshots__/application-advanced-aria-snapshot.yamltesting/framework-tests/__snapshots__/application-app-switch-aria-snapshot.yamltesting/framework-tests/__snapshots__/application-aria-snapshot.yamltesting/framework-tests/__snapshots__/application-breakpoints-aria-snapshot.yamltesting/framework-tests/__snapshots__/application-header-aria-snapshot.yamltesting/framework-tests/__snapshots__/menu-category-aria-snapshot.yamltesting/framework-tests/__snapshots__/popover-news-aria-snapshot.yamltesting/framework-tests/__snapshots__/settings-aria-snapshot.yamltesting/framework-tests/tests/application-skip-link-axe.spec.tstesting/framework-tests/tests/application-skip-link.spec.tstesting/framework-tests/tests/working-with-axe.spec.tstesting/framework-tests/tests/working.spec.tstesting/visual-testing/tests/application/application.e2e.ts
|
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/core/src/components/application/application.tsx (1)
92-95: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winUse the correct
@sinceversion for these newix-applicationprops.
@siemens/ixis currently5.1.1, and the changeset for this skip-link API is aminorchange, so the newdisableSkipLink,i18nSkipToContent, andskipLinkTargetIdprops should use the next released minor version, not5.2.0.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/components/application/application.tsx` around lines 92 - 95, Update the JSDoc `@since` annotations for the new ix-application props disableSkipLink, i18nSkipToContent, and skipLinkTargetId to use the next released minor version based on the current 5.1.1 package version and minor changeset, replacing 5.2.0 with the correct version consistently.Source: Path instructions
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@packages/core/src/components/application/application.tsx`:
- Around line 92-95: Update the JSDoc `@since` annotations for the new
ix-application props disableSkipLink, i18nSkipToContent, and skipLinkTargetId to
use the next released minor version based on the current 5.1.1 package version
and minor changeset, replacing 5.2.0 with the correct version consistently.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 93fcd3c4-5a7c-49cf-9753-7695732d4bce
📒 Files selected for processing (3)
packages/core/src/components/application/application.scsspackages/core/src/components/application/application.tsxpackages/core/src/components/application/test/application.ct.ts
This was referenced Jul 29, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Docs PR: siemens/ix-docs#271
Starter: siemens/ix-starter#191
🆕 What is the new behavior?
Add a default-on skip link to
ix-applicationfor 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.🏁 Checklist
A pull request can only be merged if all of these conditions are met (where applicable):
pnpm test)pnpm lint)pnpm build, changes pushed)👨💻 Help & support
Summary by CodeRabbit
New Features
Accessibility