Repository navigation
feat(app-ui): add SkipLink and Main - #856
Merged
Merged
Conversation
Preview stand statusStand was demolished |
exromany
force-pushed
the
feat/app-ui-skip-link
branch
from
October 21, 2026 08:42
1f4a63d to
697bb48
Compare
cakeinpanic
requested changes
Oct 21, 2026
cakeinpanic
left a comment
cakeinpanic
left a comment
Contributor
There was a problem hiding this comment.
Story for main is missing
+
Maybe consider creating some story or smth alike for all layout components together to display how they are supposed to be used.
exromany
force-pushed
the
feat/app-ui-skip-link
branch
2 times, most recently
from
October 24, 2026 16:12
6686c3c to
9653ea2
Compare
exromany
force-pushed
the
feat/app-ui-skip-link
branch
from
October 27, 2026 09:22
4f61383 to
078444e
Compare
There was a problem hiding this comment.
🟡 Changes recommended
The skip-link implementation permanently removes naturally focusable targets from the normal Tab sequence by assigning tabindex="-1", disrupting keyboard navigation.
1 open issue
What changed in this PR
Adds keyboard skip navigation and a matching main-content landmark to lido-app-ui, integrating both into the library’s exports, tests, and Storybook documentation.
Changes:
- Adds
SkipLinkwith focus handling, custom targets, and focus-revealed styling. - Adds
Mainwith a default target ID and flexible sizing for page layouts. - Adds component tests, usage stories, smoke coverage, and a popover shadow token.
| File | Description |
|---|---|
packages/lido-app-ui/styles/tokens.css |
Adds the popover shadow token. |
packages/lido-app-ui/src/smoke.test.tsx |
Adds smoke coverage for both components. |
packages/lido-app-ui/src/skip-link/SkipLink.tsx |
Implements skip navigation and target focus handling. |
packages/lido-app-ui/src/skip-link/SkipLink.test.tsx |
Tests targeting, focus, fallback behavior, and props. |
packages/lido-app-ui/src/skip-link/SkipLink.stories.tsx |
Demonstrates keyboard activation. |
packages/lido-app-ui/src/skip-link/SkipLink.module.css |
Styles the focus-revealed link with reduced-motion support. |
packages/lido-app-ui/src/skip-link/index.ts |
Exports SkipLink and its props. |
packages/lido-app-ui/src/page-layout/Main.tsx |
Adds the main landmark with a default ID. |
packages/lido-app-ui/src/page-layout/Main.test.tsx |
Tests props and SkipLink integration. |
packages/lido-app-ui/src/page-layout/Main.stories.tsx |
Demonstrates page layouts and custom target IDs. |
packages/lido-app-ui/src/page-layout/Main.module.css |
Adds flexible sizing and suppresses the landmark focus outline. |
packages/lido-app-ui/src/page-layout/index.ts |
Exports Main and its props. |
packages/lido-app-ui/src/index.ts |
Exposes SkipLink through the package entry point. |
Review effort: Balanced
exromany
force-pushed
the
feat/app-ui-skip-link
branch
from
October 28, 2026 16:39
56f69d8 to
23f05cd
Compare
cakeinpanic
force-pushed
the
feat/app-ui-skip-link
branch
2 times, most recently
from
October 29, 2026 10:58
79784c5 to
478804c
Compare
cakeinpanic
requested changes
Oct 29, 2026
cakeinpanic
left a comment
cakeinpanic
left a comment
Contributor
There was a problem hiding this comment.
story is still broken :(
https://ui-797442c587.branch-preview.org/lido-app-ui/?path=/story/navigation-skiplink--basic
exromany
force-pushed
the
feat/app-ui-skip-link
branch
from
October 29, 2026 14:46
478804c to
0ea1956
Compare
exromany
force-pushed
the
feat/app-ui-skip-link
branch
from
October 30, 2026 10:48
0ea1956 to
4ab4488
Compare
Page landmark carrying SkipLink's default target id; grows so Footer stays at the bottom.
cakeinpanic
self-requested a review
October 30, 2026 14:54
cakeinpanic
approved these changes
Oct 30, 2026
exromany
force-pushed
the
feat/app-ui-skip-link
branch
from
October 30, 2026 14:55
4ab4488 to
93e8739
Compare
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
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.
Adds a keyboard "Skip to content" link and a
<main>landmark it targets by default.SkipLink— render first in the layout; hidden until Tab-focused, then moves focus tohref(default#main-content). Addstabindex=-1to non-focusable targets and prevents the hash change (Safari skips focus otherwise; avoids triggering SPA routers). Missing target → plain anchor behaviour. ConsumeronClickruns first; itspreventDefaultopts out.Main—<main id="main-content">,flex: 1soFootersticks to the bottom on short pages. No focus ring when SkipLink focuses it.--lido-app-ui-shadow-popover.