## What kind of change does this PR introduce?
bug fix for accessibility, fixes
[docs-1265](https://linear.app/supabase/issue/DOCS-1365/add-aria-label-to-icon-only-buttons-button-name)
## What is the current behavior?
some controles in the docs app have no accessible name, so screen
readers announce them as an unlabelled "button"
## What is the new behavior?
- adds each control a name the way its neighbours already do
- adds menu toggle a state-dependent `aria-label` and `aria-expanded`
- adds `button-name` to `enforced_rules`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Accessibility**
- Added descriptive labels to configuration selectors and mobile menu
controls.
- Mobile menu controls now announce whether the menu is open or closed.
- Expanded accessibility validation to check button names across
documentation pages.
- **UI Improvements**
- Updated the raw throughput table control with a clearer button
appearance and expandable chevron indicator.
- Replaced a schema-migration tooltip with a direct in-page link.
- **Documentation**
- Removed the Info Tooltip component guidance from the contributing
documentation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
After merging [#48456](https://github.com/supabase/supabase/pull/48456)
(shared components) and
[#48459](https://github.com/supabase/supabase/pull/48459) (per-page
content fixes), a follow-up diagnostic pass found 22 remaining
heading-order violations, logged as Pass 2 in the [triage
report](https://app.notion.com/p/supabase/Playwright-E2E-Triage-Reports-3ab5004b775f81e3bc60d058fa5a02c1).
None of them were caught by the earlier fixes because they came from
places that scan didn't check: shared partials, raw HTML heading tags
written directly in MDX, and a couple of shared/interactive components
rendering hardcoded heading levels.
## Solution
- `_partials/social_provider_setup.mdx`: `#### Local development` →
`###`, matching the `##` that always precedes it on all 14 social-login
pages.
- `guides/database/functions.mdx` and
`guides/integrations/vercel-marketplace.mdx`: replaced raw `<h4>`/`<h5>`
tags with correctly-nested real headings (`### Planets`/`### People`;
`#### Deploy a Next.js app...`) — no styling workarounds needed since
they nest naturally one level below their parent section.
- `auth/quickstarts/{nextjs,react-native,react,astrojs}.mdx`: these 4
pages had no heading at all before the embedded
`_partials/api_settings.mdx` partial's own `### Get API details`
heading, so added a `## Quickstart` heading above the walkthrough to
give it a valid parent.
- `packages/ui`'s `Accordion` component: Radix's
`AccordionPrimitive.Header` renders as an unconditional `<h3>`
regardless of where the accordion is used. That's shared across Studio,
www, and design-system, not just docs, and surfaced on docs'
vendor-agnostic telemetry page. Now rendered via `asChild` onto a plain
`div` instead, since a generic accordion has no way to know what heading
level (if any) is valid in a given page.
- SQL-to-REST translator tool (`/docs/guides/api/sql-to-rest`): its
`Assumptions`/`FAQs` section labels were hardcoded `<h3>` with no `h2`
anywhere on the page. Converted to styled spans rather than promoting to
a real `<h2>`, because real h1/h2/h3 tags in this codebase force a prose
font-size that utility classes can't override — promoting the tag would
have visibly changed its size.
- `RealtimeLimitsEstimator` (embedded on both `postgres-changes` and
`benchmarks`): its 3 section headings were hardcoded `<h4>`, but the two
embedding pages need different levels (h3 vs h4) for that spot to be
valid — no single correct heading level. Converted to styled spans, same
pattern used throughout this project for components embedded at varying
heading depths.
## Manual testing
1. Check out this branch and run `pnpm dev:docs`.
2. Visit `/docs/guides/auth/social-login/auth-github` (or any other
provider page) and confirm the "Local development" callout under "Find
your callback URL" still looks and reads the same.
3. Visit `/docs/guides/database/functions` → "Returning data sets" tab
and confirm the "Planets" / "People" table captions still look the same.
4. Visit `/docs/guides/integrations/vercel-marketplace` → "Quickstart" →
"Via template" and confirm the CTA card title still looks the same.
5. Visit `/docs/guides/auth/quickstarts/nextjs` (or
react-native/react/astrojs) and confirm a "Quickstart" heading now
appears above the walkthrough, and "Get API details" still renders
correctly further down.
6. Run `pnpm dev:design-system` and open
`/design-system/docs/components/accordion` — expand/collapse an item and
confirm it still animates and looks identical; inspect the DOM and
confirm the trigger's wrapper is a `div`, not an `h3`.
7. Visit `/docs/guides/api/sql-to-rest`, translate any query, and
confirm the "Assumptions"/"FAQs" section labels still look the same.
8. Visit `/docs/guides/realtime/postgres-changes` and
`/docs/guides/realtime/benchmarks`, scroll to the connection-limits
calculator, and confirm its section labels still look the same on both
pages.
9. (Optional, for a full re-check) Run `pnpm e2e:docs:a11y --all`
against a deployed preview of this branch — only `/docs/guides/cli`
(pre-existing 404, unrelated to headings) should fail; every other page
should pass.
Verified with a full Playwright run against a real preview deployment:
**756 passed, 1 failed** (`/docs/guides/cli`, the pre-existing unrelated
404). Zero heading-order violations remain.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Documentation**
- Added clearly labeled Quickstart sections to Astro, Next.js, React
Native, and React authentication guides.
- Improved heading hierarchy and formatting across social provider
setup, database functions, and deployment documentation.
- Updated estimator and SQL-to-REST section presentation for more
consistent content structure.
- **Bug Fixes**
- Improved accordion trigger layout while preserving existing behavior,
styling, accessibility, and icon display.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
## 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?
update pg changes documentation
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Documentation**
* Updated the Realtime Postgres Changes guide with a new, generalized
“Listening to specific events” section (including INSERT/UPDATE/DELETE/*
examples) and standardized `event` usage.
* Refreshed “Available filters” with a unified filter builder approach,
expanded operator reference, consistent Filter-string/tab patterns,
`not.` and `AND` guidance, and clearer limitations (including
delete-event filtering).
* Updated “Selecting specific columns” examples to match the latest
payload/subscription guidance.
* **Refactor**
* Simplified the Realtime limits estimator by removing filter-based
throughput inputs and related UI/table columns; throughput is now based
on compute add-on, RLS, and concurrency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
## 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>
## Problem
The `_Shadcn_` suffix isn't needed anymore on `Select` components
## Solution
Remove it. No other changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Updated internal component architecture to standardize and simplify
the codebase. These changes improve code maintainability and consistency
across the application without affecting existing functionality or user
experience.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45988)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The `_Shadcn_` suffix isn't needed anymore on label component
## Solution
Remove it. No other changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Standardized Label usage across the codebase by removing the legacy
alias and using the direct Label export from the UI package
consistently.
* **Documentation**
* Updated component examples and docs to use the standardized Label
component in usage snippets and demos.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45986)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
We have multiple `Collapsible` components.
## Solution
Reduce their number by using only the one from shadcn.
I haven't noticed any visual nor functional changes.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Migrated expandable/collapsible UI to a unified shadcn-based
implementation for more consistent expand/collapse behavior across the
app.
* **Style**
* Updated listbox check icon sizing and removed obsolete collapsible
open/close animations.
* **Chores**
* Removed deprecated collapsible variants and consolidated UI component
surface for simpler maintenance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
strictNullChecks was off for docs, which lets errors slip through and
leads to incorrect required/optional typing on Zod-inferred types. This
PR enables strictNullChecks and fixes all the existing violations.
* Add lucide-react to docs (to make the autocomplete work).
* Migrate the docs app icons.
* Migrate the ui-patterns.
* Remove the old icons from ui package.
* Migrate the www app from react-feather icons.
* Migrate all of studio icons.
* Migrate the only component in design-system.
* Fix an old import in ui package. Revert an import in docs app.
* Fix some pages in www.
* Remove unneeded files used in generation of icons.
* Fix a prettier error.
* Fix more issues in www.
* Fix an issue in Log Date picker.
* Replace all string sizes with number sizes because the icons grew in some cases.
* Fix more imports in security page.
* Fix an extra import.
* Remove the size prop from all icons if they're in a button and they match the button size.
* Minor fixes for docs and www.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
