Skip to content

[FEATURE] Onboarding keyboard interaction - #1223

Merged
aristidesstaffieri merged 3 commits into
release/5.18.0from
fix/onboarding-accesibility-keyboard
Apr 3, 2024
Merged

aristidesstaffieri merged 3 commits into
release/5.18.0from
fix/onboarding-accesibility-keyboard

Conversation

@aristidesstaffieri

Copy link
Copy Markdown
Contributor

What
Fixes/restores keyboard navigation/interaction in both onboarding flows.
Adds outline indicators to focused checkbox labels to match native browser behavior on our hidden input checkboxes
Adds enter key handling for missing places in onboarding: tos checking, mnemonic phrase word selection

Why
Users without a mouse currently will not be able to complete onboarding.

@aristidesstaffieri aristidesstaffieri self-assigned this Apr 1, 2024
wordKey,
word,
}: CheckButtonProps) => (
<span>

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to use a wrapping element here in order to use the sibling css selector to make the label outlined when the hidden input is focused. Using a span lets them still render inline and retains the current layout.

display: none;
opacity: 0;

&:focus + label {

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

matching the default element focus styles from the browser

<BackButton
customButtonComponent={
<Button variant="secondary" size="md">
<Button variant="secondary" size="md" type="button">

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in some states, this would submit the form since the default type is "submit"

@aristidesstaffieri
aristidesstaffieri merged commit 7d804af into release/5.18.0 Apr 3, 2024
@aristidesstaffieri
aristidesstaffieri deleted the fix/onboarding-accesibility-keyboard branch April 3, 2024 15:23
aristidesstaffieri added a commit that referenced this pull request Aug 21, 2026
  The pool details sheet listed every reserve the catalog reports under
  "Accepted tokens", including reserves whose `enabled` flag is false.
  Blend's `require_action_allowed` panics with `ReserveDisabled` (#1223)
  on Supply, SupplyCollateral, and Borrow into such a reserve — only
  Withdraw and Repay stay open — so the row could claim a token was
  depositable when it was not.

  The backend already applies the same filter one endpoint over:
  `deriveEarnOptions` skips disabled reserves, so the token picker never
  offers them. The pools catalog deliberately reports every reserve with
  its flag and leaves the decision to the client, which left the sheet as
  the only place able to contradict the picker on the same screen.

  Filter through a shared `getAcceptedReserves`, used by both the icon row
  and the icon-resolution hook so the two cannot drift and no icon is
  fetched for a token that is never drawn. An all-disabled pool renders
  "--", the same unavailable marker the USD and rate rows use.

  No currently served pool is affected — all three mainnet Fixed Pool
  reserves are enabled — but a pool admin can flip the flag at any time.

  Covered by a unit test on the helper and by the e2e pool-details test,
  whose Blend stub now carries a disabled reserve alongside the enabled
  ones.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants