Repository navigation
feat(app-ui): LinkButton, linkProps, ref forwarding; accessible Tag and Max - #875
Merged
Merged
Conversation
Preview stand statusStand was demolished |
cakeinpanic
force-pushed
the
fix/app-ui-review-4-links-buttons
branch
from
October 27, 2026 12:37
93b9efa to
a8815fb
Compare
Copilot stopped work on behalf of
cakeinpanic due to an error
October 28, 2026 08:00
There was a problem hiding this comment.
🟡 Changes recommended
When onMaxClick is omitted, Max renders as a passive span, losing keyboard access and allowing clicks to focus the input and reopen the mobile keyboard.
1 open issue
What changed in this PR
This PR expands lido-app-ui navigation and action components with shared link handling, a new LinkButton, ref forwarding, and accessibility improvements.
Changes:
- Centralizes external and disabled link behavior and adds typed router options.
- Improves Tag and Max controls, counter announcements, and button states.
- Adds regression tests and updates Storybook examples and shared typography.
| File | Description |
|---|---|
| packages/lido-app-ui/styles/typography-mixins.css | Adds semibold description typography. |
| packages/lido-app-ui/src/utils/ActionElement.tsx | Delegates link behavior to Anchor. |
| packages/lido-app-ui/src/utils/ActionElement.test.tsx | Tests routing, disabled behavior, and refs. |
| packages/lido-app-ui/src/utils/ActionElement.stories.tsx | Simplifies story configuration. |
| packages/lido-app-ui/src/text-link/TextLink.tsx | Adds ref forwarding and inherited sizing. |
| packages/lido-app-ui/src/text-link/TextLink.test.tsx | Tests sizing and centralized link behavior. |
| packages/lido-app-ui/src/text-link/TextLink.stories.tsx | Adds an inline wrapping example. |
| packages/lido-app-ui/src/text-link/TextLink.module.css | Supports inherited typography and wrapping. |
| packages/lido-app-ui/src/text-link/index.ts | Exports TextLinkSize. |
| packages/lido-app-ui/src/tag/Tag.tsx | Adds keyboard interaction, native actions, and refs. |
| packages/lido-app-ui/src/tag/Tag.test.tsx | Tests interactive and removable forms. |
| packages/lido-app-ui/src/tag/Tag.stories.tsx | Updates interaction documentation. |
| packages/lido-app-ui/src/tag/Tag.module.css | Adds focus and disabled styling. |
| packages/lido-app-ui/src/smoke.test.tsx | Adds LinkButton smoke coverage. |
| packages/lido-app-ui/src/small-card/SmallCard.tsx | Adds refs, external links, and router options. |
| packages/lido-app-ui/src/small-card/SmallCard.test.tsx | Tests external-link attributes. |
| packages/lido-app-ui/src/small-card/SmallCard.stories.tsx | Demonstrates external links. |
| packages/lido-app-ui/src/rich-input/RichInput.tsx | Replaces MaxTag with Tag’s button form. |
| packages/lido-app-ui/src/rich-input/RichInput.test.tsx | Tests Max clicks, disabling, and focus. |
| packages/lido-app-ui/src/rich-input/RichInput.stories.tsx | Simplifies story metadata. |
| packages/lido-app-ui/src/rich-input/RichInput.module.css | Removes Max-specific and balance-error styles. |
| packages/lido-app-ui/src/link-provider/linkStubs.test-utils.tsx | Shares router and external-link test adapters. |
| packages/lido-app-ui/src/link-provider/LinkProvider.tsx | Adds augmentable router prop types. |
| packages/lido-app-ui/src/link-provider/LinkProvider.test.tsx | Adds adapter typing coverage. |
| packages/lido-app-ui/src/link-provider/LinkProvider.stories.tsx | Adds navigation and breadcrumb examples. |
| packages/lido-app-ui/src/link-provider/index.ts | Exports LinkRouterProps. |
| packages/lido-app-ui/src/link-provider/Anchor.tsx | Centralizes link state and router prop handling. |
| packages/lido-app-ui/src/link-provider/Anchor.test.tsx | Covers disabled, external, download, and router options. |
| packages/lido-app-ui/src/icon-button/IconButton.tsx | Adds counter labels to accessible names. |
| packages/lido-app-ui/src/icon-button/IconButton.test.tsx | Tests numeric counters and announcements. |
| packages/lido-app-ui/src/icon-button/IconButton.stories.tsx | Updates counter and state examples. |
| packages/lido-app-ui/src/icon-button/IconButton.module.css | Adds pressed styling and disabled icon dimming. |
| packages/lido-app-ui/src/counter/CounterSlot.tsx | Wraps scalar counts and adds spoken labels. |
| packages/lido-app-ui/src/counter/CounterSlot.module.css | Adds offset fallbacks and hidden-label styling. |
| packages/lido-app-ui/src/counter/Counter.tsx | Forwards refs to the counter span. |
| packages/lido-app-ui/src/counter/Counter.stories.tsx | Simplifies story metadata. |
| packages/lido-app-ui/src/counter/Counter.module.css | Uses shared typography and adjusts line height. |
| packages/lido-app-ui/src/colors/tokenReferences.test.ts | Removes a private-token exemption. |
| packages/lido-app-ui/src/button/types.ts | Extracts shared button properties. |
| packages/lido-app-ui/src/button/LinkButton.tsx | Adds button-styled routed links. |
| packages/lido-app-ui/src/button/LinkButton.test.tsx | Tests routing, refs, disabling, and labels. |
| packages/lido-app-ui/src/button/index.ts | Exports LinkButton and its props. |
| packages/lido-app-ui/src/button/ButtonContent.tsx | Shares button content and counter labeling. |
| packages/lido-app-ui/src/button/Button.tsx | Uses shared content and accessible counter labels. |
| packages/lido-app-ui/src/button/Button.test.tsx | Expands loading and counter coverage. |
| packages/lido-app-ui/src/button/Button.stories.tsx | Adds LinkButton examples. |
| packages/lido-app-ui/src/button/Button.module.css | Unifies disabled states and supports link styling. |
Review effort: Balanced
cakeinpanic
requested changes
Oct 28, 2026
cakeinpanic
left a comment
cakeinpanic
left a comment
Contributor
There was a problem hiding this comment.
please resolve copilot comments
exromany
force-pushed
the
fix/app-ui-review-4-links-buttons
branch
from
October 28, 2026 17:31
a8815fb to
abb03a0
Compare
exromany
force-pushed
the
fix/app-ui-review-4-links-buttons
branch
from
October 28, 2026 20:28
abb03a0 to
b865f2b
Compare
exromany
force-pushed
the
fix/app-ui-review-4-links-buttons
branch
from
October 29, 2026 14:55
b865f2b to
cfd1390
Compare
cakeinpanic
force-pushed
the
fix/app-ui-review-4-links-buttons
branch
2 times, most recently
from
October 30, 2026 10:42
e261821 to
5f8f8ea
Compare
cakeinpanic
force-pushed
the
fix/app-ui-review-4-links-buttons
branch
from
October 30, 2026 10:43
5f8f8ea to
6503b00
Compare
cakeinpanic
approved these changes
Oct 30, 2026
…and Max accessible - LinkButton and ButtonContent; Button, IconButton and Counter polish - LinkProvider: linkProps for router-only options, forwardRef adapters, shared ActionElement - TextLink, SmallCard, Tag (href), RichInput (Max button) a11y and ref forwarding - typography mixin refinements
exromany
force-pushed
the
fix/app-ui-review-4-links-buttons
branch
from
October 30, 2026 12:39
6503b00 to
ec009a3
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.
Links and actions: one place for external/disabled link logic, a new
LinkButton,linkProps, ref forwarding, and an accessible Tag and RichInput Max.What / why
externalanddisabledfor TextLink, NavLink and ActionElement. SmallCard, Logo and BreadcrumbItem gainexternal. Why: the copies had drifted, and a consumertabIndexcould override disabled.role="link" aria-disabled="true"with no tabindex. Why: they were role-less<a tabindex=-1>that a click could still focus.download={false}(K-8): goes through LinkProvider again. Why: it caused a full page reload.size='inherit'flows and wraps with running text, because it forced 14pxinline-flex.LinkButton(K-2): a Button-styled routed<a>for navigation CTAs, which until now had to be<button>s.linkProps(K-3): typed per-link router options (prefetch,replace…) throughLinkRouterPropsaugmentation.onClickit is a keyboard-operablerole=buttonspan,as='button'gives a native button,hrefa routed link anddisableda disabled button. Why: a clickable Tag had no role, focus or keyboard support. WithonCloseit stays passive, and Remove no longer firesonClick.<button>that doesn't refocus the input, so the mobile keyboard no longer pops up.counter={3}renders a Counter pill, andcounterLabelis announced with the button name. Why: raw numbers rendered unstyled, andcount && …leaked a0.aria-disabled.cursor: waitwhile loading.surfacehas a pressed state.font-description-semiboldmixin (E-11).Watch for
counter={0}now shows a "0" pill, so usecount || nullto hide it.onClickisMouseEventHandler<HTMLElement>, and RichInputonMaxClickisMouseEventHandler<HTMLButtonElement>.ComponentPropsnow includeref.feat/app-ui-hexinButton.module.css: keep hex's values and thesearia-disabledselectors.Screenshots (Storybook)
C-9: At 375px a size='inherit' link wraps with the paragraph.
K-2: LinkButton variants, including the disabled state.
E-1: One Tab reaches the clickable Tag and shows its focus ring. Before, it was skipped.
Before
After
E-4, E-9, E-12: Disabled IconButton icons are dimmed now.
Before
After
Stack 5/7.