## What kind of change does this PR introduce?
A11y cleanup follow-up to #47984 /
[DEPR-626](https://linear.app/supabase/issue/DEPR-626).
## What is the current behavior?
Studio had 82 ratcheted `supabase/require-explicit-tabindex` violations
(raw `<button>` / `role="button"` without explicit `tabIndex`).
## What is the new behavior?
- Explicit `tabIndex={0}` (or disabled → `-1`) on those Studio call
sites across nav, `components/ui`, Database, Storage, and the remainder
- Ratchet baseline cleared (**82 → 0**) and the rule **removed from the
Studio ratchet** (debt is gone; ratchet is temporary)
- Rule remains a shared **`warn`** for now — promoting to `error` (and
sweeping www/docs/design-system) is a follow-up
- Also fixed the learn/ui-library call sites that surfaced while
experimenting with error promotion
- Small follow-ups where making controls focusable exposed gaps:
accessible names, disabled/focus consistency, focus-ring polish on
To-test surfaces, home section `KeyboardSensor`, and an E2E locator
tightened after `aria-label="Remove column"`
Prefer migrating to `Button` from `ui` in future touch-ups; this PR
takes the minimal path so Studio debt can stay at zero.
## Additional context
Batches landed together so baseline conflicts stayed simple while
chipping away:
- Hotspots / nav (FirstLevelNav, Marketplace, AttachmentUpload, Column,
Tabs, …)
- `components/ui` shared
- Database + Storage
- Remainder
**Out of scope / intentional deferrals**
- Promoting `supabase/require-explicit-tabindex` to a lint **error**
(follow-up after www/docs/design-system sweeps)
- Tabs/Radio roving, tooltips, context menus, in-menu items
- Full keyboard-accessible tab-close UX (close stays hover +
`tabIndex={-1}`; context menu still closes tabs)
- Data API docs links (`/project/<ref>/api` redirect)
**Reviewer notes**
- Rule only flags raw `<button>` / `role="button"` without a `tabIndex`
prop. `Button` from `ui` already bakes this in
- `tabIndex={-1}` is intentional for disabled controls, in-menu /
roving-focus children, and hover-only tab close
- For dnd-kit grips, put `tabIndex` **after** `{...attributes}` so it
isn’t overwritten (TS2783)
### To test
Use **Safari** with macOS Keyboard navigation **off** (System Settings →
Keyboard). Chrome once for a sanity pass. For each surface below: Tab
until the control is focused, then activate with Enter/Space where
relevant.
1. **API Docs side panel** (Table Editor → open a table → **API docs**)
- Floating API Docs panel — **not** `/project/<ref>/api` (that redirects
to Data API docs; language ToggleGroup uses arrow keys; links are out of
scope)
- Left nav buttons — Tab through several and activate one; active
highlight / navigation still works
2. **Integrations → Marketplace**
- Enable **Integrations layout** feature preview first (avatar menu →
Feature previews)
- `/org/<slug>/integrations` or project integrations marketplace
- “Clear all”, grid/list toggles — Tab + activate
3. **Table Editor → create a table → Columns**
- Drag handles only appear while **creating** (not when editing an
existing table)
- Tab to grip / remove (X) / sensitive-data eye if shown
4. **Project Home** — section drag handles
- Tab to a grip (visible focus ring)
- Optional: Space to pick up, arrows to move, Space/Esc to drop
(KeyboardSensor added)
- Mouse dnd still works
5. **Storage → Policies** — expand/collapse bucket list chevron
(design-system focus ring, no stuck grey open bg)
6. **Support form** (Help → Support) — attachment remove (×) and
add-attachment control when visible
Disabled controls should be **skipped** by Tab.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Accessibility Improvements**
* Improved keyboard navigation throughout Studio by explicitly managing
focus (`tabIndex`) across many interactive controls (menus, tabs,
tables, charts, dialogs, navigation, and form actions).
* Disabled or non-interactive controls are now removed from the tab
order (or made unfocusable), while available actions remain reachable.
* Ensured `type="button"` on relevant controls to prevent unintended
submissions, and refined keyboard focus behavior for various toggles and
copy/remove actions.
* **Chores**
* Updated the ESLint rule baseline configuration to match the new focus
behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.
## Solution
- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code
## How to test
As this is just prop renaming, if it builds it's ok
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.
---------
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
## Summary
Fixes
[FE-3095](https://linear.app/supabase/issue/FE-3095/compute-size-hover-card-shows-badge-and-cpumemory-from-out-of-sync).
The compute size hover card on the project home dashboard was sourcing
its badge and its CPU/memory rows from two different cached responses,
which can disagree:
| Field shown | Previous source |
|---|---|
| Badge ("XLARGE") | `project.infra_compute_size` (project-detail query)
|
| Cores / memory | `selected_addons[compute_instance].variant.meta`
(project-addons query) |
A customer reported seeing an **XLARGE** badge next to **2-core ARM
(Shared) / 1 GB** — the micro-tier specs — and asked whether their
upgrade had actually been applied. The upgrade was applied; only the
rendered card was contradictory.
## Fix
Source both the badge and the CPU/memory rows from the same logical
fact: look up the variant in `available_addons` whose identifier matches
`ci_${infra_compute_size}` and read its `meta`. `available_addons` is
essentially a static catalog of variant specs, so once it's loaded the
card cannot show specs that disagree with the badge.
This also collapses the special-cased `INSTANCE_MICRO_SPECS` fallback
into the existing `getAvailableComputeOptions` helper (which already
provides micro/nano fallbacks). The nano UX text ("Shared / Up to 0.5
GB") is preserved by switching that JSX branch to key on `computeSize
=== 'nano'`.
## Out of scope
- `useProjectAddonUpdateMutation` does not invalidate
`projectKeys.detail`. That's hygiene worth doing later, but
project-detail has a 30s `staleTime` and the resize already drives 5s
polling via the `RESIZING` status path, so the badge refreshes naturally
and this fix doesn't depend on it.
## Test plan
- [ ] Hover the compute badge on a project at each compute size (nano,
micro, small, ..., 16xlarge) and confirm CPU and memory rows match the
badge.
- [ ] Resize a project from micro → large; on completion, confirm the
hover card shows large specs (no transient micro values).
- [ ] Open the dashboard for a free-tier project on micro that has no
`compute_instance` entry in `selected_addons` and confirm the card still
shows micro specs (i.e. `getAvailableComputeOptions` micro fallback is
engaged).
- [ ] Confirm the "Unlock more compute" CTA still appears for
non-highest sizes and disappears at the highest size.
## Summary
The `compute_badge_upgrade_clicked` event had zero fires since Apr 1
because the PostHog tracking call was never wired up on the "Upgrade
compute" button in the compute badge hover card. This adds the missing
`useTrack` call using the existing event definition in
`telemetry-constants.ts`.
## Changes
- Add `useTrack` hook and `onClick` handler to the upgrade button in
`ComputeBadgeWrapper.tsx`
- Fires `compute_badge_upgrade_clicked` with `computeSize`, `planId`,
and `upgradeType` properties
- Preserves existing `asChild` + `<Link>` navigation pattern
## Testing
Tested on Vercel preview:
- [x] Hover compute badge on a project with non-max compute, click
"Upgrade compute", verify `compute_badge_upgrade_clicked` event appears
in PostHog live events with correct properties
- [x] Verify navigation to compute settings page still works
(client-side, no full reload)
- [x] Test with paid-plan nano project: `upgradeType` should be
`free_micro_upgrade`
- [x] Test with paid-plan non-nano project: `upgradeType` should be
`compute_upgrade`
## Linear
- fixes GROWTH-751
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Added analytics tracking for compute upgrade button clicks to record
upgrade type (free micro vs. paid), selected compute size (with
fallback), and plan identifier. This ensures upgrade interactions are
captured for product insights without changing visible UI behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
This PR introduces some visual indicators when a Nano project is
exhausting resources on Pro plus plans. The indicator tells the user a
free upgrade to Micro is available via a flashing Nano badge that guides
them to Upgrade and a global banner that notifies them resources are
near exhaustion, please upgrade for free.
| Project List | Project View |
|--------|--------|
| <img width="412" height="223" alt="Screenshot 2026-03-31 at 16 11 19"
src="https://github.com/user-attachments/assets/0d0e7727-e4eb-4ade-9024-528a2501596c"
/> | <img width="1256" height="618" alt="Screenshot 2026-03-31 at 16 11
10"
src="https://github.com/user-attachments/assets/b664e020-2b18-4842-8e64-4e49fac69eef"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Free Micro Upgrade banner appears for nano-tier projects near compute
exhaustion with animated visuals and an “Upgrade for free” CTA.
* Compute badge highlights near-exhaustion with glow/shimmer and an
animated upgrade indicator; optional icon support added.
* Per-project banner dismissal is saved locally; dismissed banners
remain hidden.
* **Tests**
* Added tests covering banner display and dismissal scenarios.
* **Chores**
* Added local-storage keys and telemetry events for banner and upgrade
interactions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
* Add shimmering-loader CSS to ui-patterns.
* Import the shimmering-loader classes from the ui-patterns component.
* Remove ShimmeringLoader from studio.
* Migrate studio to use ui-patterns/ShimmeringLoader.
* Migrate away from using default import for ShimmeringLoader.
* Fix the css imports in docs and studio.
* Bump the deps, refactor deprecated code.
* Migrate keepPreviousData usage.
* Migrate all uses of InfiniteQuery.
* Fix refetchInterval in queries.
* Migrate all use of isLoading to isPending in mutations.
* Fix accessing location in claim-project.
* Fix a bug in duplicate query keys.
* Migrate all queries to use isPending.
* Revert "Fix accessing location in claim-project."
This reverts commit 2a07df64b5.
* Revert the rss.xml file to master.
* chore: use /available-regions endpoint for project creation
* fix types
* make postgres version selection work
* Small nit refactors
* Feature flag changes + fix icons for flags in various places
* Fix creating projects when selecting a smart region
* Fix sending region selection to create project endpoint
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* inited. added disk config to a new page
* add instances
* move moar
* moved things around. billing badges updated. compute added
* tidy
* new components
* form now dynamically updating itself
* updated compute form. moved warning panels. added collapsible for advanced options
* review dialog now only showing what is relevant
* Update DiskManagementForm.tsx
* compute sizes now a reccomendation
* fix old form
* started adding flags
* removed unused code. fixed issue with IOPS price showing on smaller compute
* moar clearning
* IOPS logic wrong way round
* type fixes
* start adding better error handling
* TIDY
* moved everything to own file
* tidy
* fix hydration issue
* moved some components around
* clean up
* inline errors
* update form message
* Update DiskManagementForm.tsx
* error fields fixed. some formatting issues. nano added as an option
* fix constants
* add some plan restrictions
* moar
* units updated. labels updated
* Update DiskManagement.schema.ts
* fix a ton of type issues
* text udpates
* add panel to suggest switching to io2
* more notice board stuff
* number formatting. moved a file
* Update DiskManagementForm.tsx
* remove console logs
* upgrade comms. more type fixes
* add empty states for the old areas
* more links
* updated some label issues
* hide labels when chart is active
* Update DiskManagement.utils.ts
* Delete next-env.d.ts
* Update DiskManagementForm.tsx
* Update DiskManagement.schema.ts
* text updates
* Update DiskManagement.constants.tsx
* Update next-env.d.ts
* Update next-env.d.ts
* Small clean uop
* Clean up empty files
* Clean up spelling
* Clean up more
* Fix typo in file name
* Clean up import statements
* Update DiskManagementForm.tsx
* fix issues
* Update ProjectLayout.tsx
* Remove unused import
* Fix
* Address nit
* Update database.tsx
* remove supress toast
* Update DiskManagement.schema.ts
* Update database.tsx
* change upgrade comms
* Update DiskManagementPanelForm.tsx
* fixes
* fix button size on old form
* Update DiskManagementForm.tsx
* Update StorageTypeField.tsx
* update labels on compute
* dont show banner when infra is FLY
* update comms. hide disk config for FLY
* Fix TS
* Last round of clean upo
* fix message state
* fix message
* Fix TS
* Update DiskManagement.utils.ts
* fix errors
* Update BillingChangeBadge.tsx
* fixed some label issues
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Switch all top-level imports for ui-patterns components to use specific components when importing.
* Remove the @ui-patterns shorthand since it works exactly the same without the @.
* More import fixes.
* Fix the ui-patterns tests.
Danny White