Guillem Arias Fauste 56ff8513cb fix(design-system): DS::Tabs a11y — WAI-ARIA tab pattern + keyboard nav (#1847)
* fix(design-system): DS::Tabs a11y — WAI-ARIA tab pattern + keyboard nav

Closes #1745. DS::Tabs rendered as a bare `<nav>` + `<button>` list
with no role wiring. AT users would hear "navigation, button,
button, button" instead of the tab semantics. Keyboard users got
no arrow-key nav between tabs.

Five fixes:

1. **Role scaffolding.** `<nav>` → `role="tablist"`,
   `aria-orientation="horizontal"`. Each tab `<button>` →
   `role="tab"`, `aria-selected`, `aria-controls="panel-#{id}"`.
   Each panel `<div>` → `role="tabpanel"`, `id="panel-#{tab_id}"`,
   `aria-labelledby="#{tab_id}"`, `tabindex="0"` (so the panel
   itself is reachable via keyboard for in-panel content nav).

2. **Roving tabindex.** Active tab is `tabindex="0"`, inactive are
   `tabindex="-1"`. ArrowLeft/Right cycles focus across the tablist
   without leaving the widget; Tab jumps past the whole widget.
   Stimulus controller updates both `aria-selected` and `tabindex`
   on tab switch.

3. **Manual activation.** Per WAI-ARIA APG "Tabs with Manual
   Activation" — arrow keys MOVE focus, Enter/Space ACTIVATES the
   focused tab. Avoids accidental tab swaps when the user is just
   navigating. Important here because several tab contents trigger
   Turbo fetches (transactions index, account sidebar, budgets).

4. **Home/End shortcuts.** Home jumps focus to the first tab, End
   to the last. WAI-ARIA APG-standard.

5. **Raw palette → token.** Replace `bg-white theme-dark:bg-gray-700`
   on the active button with the existing `tab-item-active` utility
   (defined in `_generated.css` from `design/tokens/sure.tokens.json`).
   Single class, dual-mode. Also gate the transition behind
   `motion-safe:` so reduced-motion users get an instant snap.

API unchanged — the slot signatures (`btns(id:, label:)`,
`panels(tab_id:)`) take the same args. Caller-provided `id:` is
still the public identifier; `panel-#{id}` is internal naming for
the `aria-controls`/`aria-labelledby` pair.

* fix(review): scope DS::Tabs DOM ids to component instance

Per CodeRabbit review on #1847: raw `panel-#{tab_id}` and `id: tab_id`
on buttons collide when multiple DS::Tabs widgets on the same page
share generic tab ids (e.g., "all", "overview", "transactions"),
breaking aria-controls / aria-labelledby associations.

Scope ids via per-instance `dom_prefix` ("tabs-#{object_id}") and
share the same prefix between DS::Tabs and DS::Tabs::Nav so button
ids and panel labelledby/controls stay consistent.

* fix(review): use <div> host for role=tablist in DS::Tabs::Nav

Codex P2 follow-up on #1847: \`<nav>\` has a fixed landmark role per
ARIA-in-HTML and may not be repurposed as a tablist. The current
\`tag.nav class: ..., role: \"tablist\"\` produces invalid markup —
some AT implementations ignore the role override, in which case the
child \`role=\"tab\"\` buttons end up without a valid tablist parent
and the keyboard / AT contract this PR is meant to add silently
regresses.

Swap the container for a neutral \`tag.div\`. Tab semantics (\`role\`,
\`aria-orientation\`, keyboard nav, manual-activation pattern) are
unchanged.
2026-05-20 18:19:17 +02:00
2026-05-18 21:46:28 +02:00
2024-02-02 09:05:04 -06:00
2024-02-02 09:05:04 -06:00
2024-02-02 09:05:04 -06:00
2025-05-20 13:31:05 -05:00
2024-02-02 09:05:04 -06:00
2024-08-23 10:06:24 -04:00
2024-08-23 10:06:24 -04:00
2026-05-18 21:46:28 +02:00
2024-02-02 09:05:04 -06:00
2024-02-02 09:05:04 -06:00
2025-09-24 00:19:51 +02:00
2026-04-13 13:44:37 +02:00
2024-02-02 09:05:04 -06:00

Ask DeepWiki View performance data on Skylight Dosu Pipelock Security Scan

sure_shot

Deutsch | Español | Français | 日本語 | 한국어 | Português | Русский | 中文

Sure: The personal finance app for everyone

Get involved: DiscordWebsiteIssues

Important

This repository is a community fork of the now-abandoned Maybe Finance project.
Learn more in their final release doc.

Backstory

The Maybe Finance (archived/abandoned repo) team spent most of 20212022 building a full-featured personal finance and wealth management app. It even included an “Ask an Advisor” feature that connected users with a real CFP/CFA — all included with your subscription.

The business end of things didn't work out, and so they stopped developing the app in mid-2023.

After spending nearly $1 million on development (employees, contractors, data providers, infra, etc.), the team open-sourced the app. Their goal was to let users self-host it for free — and eventually launch a hosted version for a small fee.

They actually did launch that hosted version … briefly.

That also didnt work out — at least not as a sustainable B2C business — so now here we are: hosting a community-maintained fork to keep the codebase alive and see where this can go next.

Join us!

Hosting Sure

Sure is a fully working personal finance app that can be self hosted with Docker.

Forking and Attribution

This repo is a community fork of the archived Maybe Finance repo. Youre free to fork it under the AGPLv3 license — but wed love it if you stuck around and contributed here instead.

To stay compliant and avoid trademark issues:

  • Be sure to include the original AGPLv3 license and clearly state in your README that your fork is based on Maybe Finance but is not affiliated with or endorsed by Maybe Finance Inc.
  • "Maybe" is a trademark of Maybe Finance Inc. and therefore, use of it is NOT allowed in forked repositories (or the logo)

Performance Issues

With data-heavy apps, inevitably, there are performance issues. We've set up a public dashboard showing the problematic requests seen on the demo site, along with the stacktraces to help debug them.

https://www.skylight.io/app/applications/s6PEZSKwcklL/recent/6h/endpoints

Any contributions that help improve performance are very much welcome.

Local Development Setup

If you are trying to self-host the app, read this guide to get started.

The instructions below are for developers to get started with contributing to the app.

Requirements

  • See .ruby-version file for required Ruby version
  • PostgreSQL >9.3 (latest stable version recommended)
  • Redis > 5.4 (latest stable version recommended)

Getting Started

cd sure
cp .env.local.example .env.local
bin/setup
bin/dev

# Optionally, load demo data
rake demo_data:default

Visit http://localhost:3000 to view the app.

If you loaded the optional demo data, log in with these credentials:

  • Email: user@example.com
  • Password: Password1!

For further instructions, see guides below.

Setup Guides

One-click Install

Run on PikaPods

Deploy on Railway

Managed OpenClaw for Sure Finances

Managed OpenClaw for Sure Finances

License and Trademarks

Maybe and Sure are both distributed under an AGPLv3 license.

  • "Maybe" is a trademark of Maybe Finance, Inc.
  • "Sure" is not, and refers to this community fork.

Alt

Description
No description provided
Readme AGPL-3.0 110 MiB
Languages
Ruby 75.4%
HTML 15.4%
Dart 5.3%
JavaScript 3.1%
CSS 0.3%
Other 0.3%