## 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
- Organizations links are not accessible with keyboard
- Project list buttons are missing labels
- Headings should be sequential
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved keyboard and screen-reader accessibility for project actions
and project reference copy controls.
* Added clearer tooltip guidance for copying a project reference.
* Updated project and organization card interactions for more consistent
click and focus behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Feature. Resolves DEPR-556.
## What is the current behavior?
AWS Marketplace onboarding uses a separate scaffold and AWS-specific
organization selection UI, so it does not match the newer shared connect
interstitial pattern used by Redeem Credits.
## What is the new behavior?
- Moves `/aws-marketplace-onboarding` onto the shared connect
interstitial shell with AWS and Supabase branding
- Reuses the shared organization selector behaviour from Redeem Credits,
including last-visited organization promotion, selected organization
promotion, the create-organization card, and compact overflow disclosure
- Keeps the existing AWS data path for buyer eligibility, onboarding
info, organization linking, AWS-managed organization creation, and
success/error/ineligible states
- Removes the now-unused legacy AWS Marketplace layout/scaffold
components
- Removes the temporary reviewer mocks from the branch before merge
## Additional context
This PR preserves the current AWS-managed organization creation modal so
the AWS flow keeps working while adopting the shared connect sheet.
FE-3216 should move that creation path into the general organization
form later, likely replacing the AWS-specific modal with a preconfigured
`/new` flow that can still return to AWS Marketplace onboarding and link
automatically.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Platform orgs can have very high project cardinality (>1M projects),
making the project count query expensive. This disables the query across
all count-only usages for platform plan orgs.
**Changed:**
- `OrgSelector` — disable query, show "Platform" label instead of count
- `OrganizationCard` — disable query, hide project count for platform
orgs
- `NoProjectsOnPaidOrgInfo` — disable query (component already returned
null for platform orgs)
**Not changed:**
- `TeamSettings` — also uses the count, but the warning it powers is
specifically relevant for orgs with a lot of projects, and it's tucked
away on the team settings page rather than on every page load.
## To test
- On a platform org, verify no `/organizations/{slug}/projects` requests
fire from the org selector, org cards, or billing info
- For regular orgs, verify the project count still displays normally
everywhere
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Organization selector now shows a dedicated "Platform" label for
platform organizations instead of a project count.
* Reduced unnecessary network activity by skipping project fetching when
a platform organization is selected, improving load performance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Show Vercel/AWS partner badge on organization selection cards, matching
the existing behaviour in the org dropdown switcher. Uses the existing
`PartnerIcon` component.
**Added:**
- `PartnerIcon` to `OrganizationCard` – renders alongside the MFA lock
icon on the right side of each card
<img width="626" height="275" alt="Screenshot 2026-04-03 at 5 36 54 PM"
src="https://github.com/user-attachments/assets/f3cd2eb4-bf9d-4b42-b94c-e4636ebf7303"
/>
## To test
- Verify Vercel-managed orgs show the Vercel triangle badge
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Partner icon now appears in the organization card header next to the
MFA/security indicator.
* **Style**
* Improved alignment and spacing of header elements; MFA tooltip now
appears alongside the icon with consistent sizing.
* Cleaner grouping of header metadata for easier scanning and visual
clarity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
## What kind of change does this PR introduce?
UI nit changes
## What is the current behavior?
- We use big dots `•` to separate semantically different sets of text
that are in the same row
- This looks a bit odd given how large the dot is to text
- We put _Project Settings_ in its own sidebar section but without a
separator like all other sidebar sections
## What is the new behavior?
- Use the smaller dots `·` to separate text
- Place a separator above _Project Settings_ in sidebar
| Before | After |
| --- | --- |
| <img width="1342" height="711" alt="AWS Healthy Toolshed
Supabase-70BD1825-8077-4D1B-84C1-831A4ADAFC0B"
src="https://github.com/user-attachments/assets/70246009-a3c7-4b5c-8d75-122140a637d1"
/> | <img width="1342" height="711" alt="AWS Healthy Toolshed Supabase"
src="https://github.com/user-attachments/assets/e3fc13e4-923d-472e-aaf9-d689e890697b"
/> |
## Context
Main fix was to address the size of the `OrganizationCard` on the redeem
code page - was taking up the height of the flex div when the number of
cards is <= 3 (Main fix is `max-h-min` in `OrganizationCard`)
### Before
<img width="1270" height="411" alt="image"
src="https://github.com/user-attachments/assets/73228b62-f9db-43c8-813b-cb04c9f6cb2b"
/>
### After
<img width="1255" height="420" alt="image"
src="https://github.com/user-attachments/assets/a1d82753-daba-4c3d-a64d-3bb913ded161"
/>
## Other changes
- Small improvement to perceived loading speed by only rendering the
cards as loaders, text content on the left should render immediately on
page load
- Loading state to consider if the feature flag has been loaded as well
to prevent flicker of UI
- Hide the "Go to org" button when redeemed on the org page already
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved loading/gating so the redemption UI waits for feature flags
and profile data before showing content.
* Disabled submit when the redemption form is invalid to prevent empty
submissions; submit button respects form validity, permissions, and
loading state.
* **UI**
* Conditionally shows upgrade and "Go to organization" options based on
organization plan and current path.
* Adjusted card layout to better constrain content height.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
## Context
Adds a UI state for when the feature flag for code redeem is disabled
<img width="1270" height="424" alt="image"
src="https://github.com/user-attachments/assets/90e97869-f1e5-456b-9170-4a0a576f1064"
/>
## Other changes involved
Mostly refactor + clean up here
- Pass `onClick` event to `OrganizationCard`, rather than declaring an
extra parent `div` to handle the click event
- Use `Admonition` instead of the `Alert` components within
`CreditCodeRedemption`
- Adjust element semantics in `CreditCodeRedemption` (Opting for `p`
instead of `h4` and `h1` to show credit related information)
- Use `UpgradePlanButton` component for upgrade CTA (Handles behaviour
depending if user has perms to update plan of the organization)
- Use `TimestampInfo` component for expires at
- Fix error handling when calling `redeemCode` (use `mutate` instead of
`mutateAsync` which requires a try catch)
## To Test
- [ ] Need to verify that the `TimestampInfo` component renders
correctly after redeeming a code
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Organization selection with modal-driven credit code redemption and
URL prefill.
* Upgrade button accepts an organization slug and integrates into the
upgrade flow.
* Organization cards support an optional click handler for custom
interactions.
* **UI/UX Improvements**
* Success/error messaging switched to admonition styling; expiry dates
shown with timestamps.
* Horizontal form layout, medium dialog sizing, compact balance/code
presentation, and invisible CAPTCHA with reset on success.
* Feature gated by a flag with clearer loading/error states.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Bug introduced [here](https://github.com/supabase/supabase/pull/42496) -
just a small issue in which we're returning the wrong element if
`isLink` in `OrganizationCard.tsx`
## To test
- [ ] Verify that you can click on an organization card in the
/organizations page
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Fixed organization card component rendering to correctly handle link
wrapping behavior based on configuration state.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
* CmdK OrgProjectSwitcher to swap useProjectsQuery with useProjectsInfiniteQuery
* Remove usage of useProjectsQuery in ProjectDropdown
* Remove usage of useProjectsQuery in NotificationsPopover
* Remove usage of useProjectsQuery in NotificationsFilter
* Remove usage of useProjectsQuery from LoadingState
* Clean
* Remove usage of getProjects from org-ai-details and fix missing key props in AIOnboarding
* Remove useAutoProjectsPrefetch from org/[slug]/index
* Fix TS + clean up
* Clean
* Remove usage of useProjectsQuery in NewOrgForm
* Remove usage of useProjectsQuery in SupportForm -> AIAssistantOption
* Remove usage of useProjectsQuery in PlanUpdateSidePanel
* Remove usage of useProjectsQuery in NoProjectsOnPaidPlan
* Remove useProjectsQuery in IntegrationPanels
* Remove useProjectsQuery from IntegrationPanels 2
* Remove useProjectsQuery from IntegrationConnection
* Remove useProjectsQuery from ProjectLinker, SidePanelVercelProjectLinker, and choose-project
* Clean up
* Remove useProjectsQuery in AwsMarketplaceLinkExistingOrg
* Clean
* chore/projects pagination part 08 (#39355)
Optimize useProjectsQuery for Team settings
* Remove console log
Disables organization selection if the org requires MFA but the user
does not have MFA enabled.
Add badges / hints to show that user has access to an Organization but
access is disabled because of MFA access requirement
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* Update new project flow to add a warning before redirecting
* Simplify the logic for picking an org.
* Small UI tweaks
* Readd the alert about a not found org.
* Link to all orgs if slug is undefined
* Nit
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Danny White
