## What kind of change does this PR introduce?
Studio accessibility fix.
## What is the current behavior?
`RegionFlag` defaults to `alt=""`, but only some callsites also pass
`aria-hidden` / `role="presentation"`. Decorative flags beside visible
region names can still be announced inconsistently.
## What is the new behavior?
`RegionFlag` defaults to `aria-hidden` when `alt` is empty, matching how
the component is used next to visible region text. Redundant callsite
a11y props from #49517 are removed.
## To test
- Open [Edge Function
observability](https://studio-staging-git-dnywh-region-flag-decorative-a11y-supabase.vercel.app/dashboard/project/_/observability/edge-functions).
Open the **Region** filter and confirm each option still shows a flag
beside the region label. The DOM has `aria-hidden` on the flag `img`.
Open the new project flow region selector. Confirm the selected-region
flag still renders without role="presentation".
- Open [New
project](https://studio-staging-git-dnywh-region-flag-decorative-a11y-supabase.vercel.app/dashboard/new/_).
Open the region selector and confirm the selected value and menu items
still show flags beside the region names. The DOM has `aria-hidden` on
the flag `img`.
## What kind of change does this PR introduce?
Studio interface fix.
## What is the current behavior?
Region flags with light backgrounds, such as Japan, can disappear
against light Studio surfaces. Flag rendering is also repeated across
region selectors and infrastructure views.
## What is the new behavior?
Region flags use a shared `RegionFlag` component with the existing small
radius and a subtle 1px border. The treatment is applied consistently
across project creation, replication, read replicas, infrastructure, and
Edge Function observability.
| Before | After |
| --- | --- |
| <img width="746" height="246" alt="CleanShot 2026-08-25 at 14 01
07@2x"
src="https://github.com/user-attachments/assets/5ccffccd-f253-47ca-a587-e97d1e8306a8"
/> | <img width="746" height="234" alt="CleanShot 2026-08-25 at 14 09
20@2x"
src="https://github.com/user-attachments/assets/9d59f7f6-4364-4c2c-8b97-a9673616736a"
/> |
## To test
- Open the new project flow and inspect the selected region and region
menu. Confirm light flags remain visible without changing size or aspect
ratio.
- Open Database Replication and inspect region flags in the diagram and
destination form.
- Open `/project/<ref>/settings/infrastructure` and inspect flags in the
topology, map, and read replica details.
- Open Edge Function observability and inspect the region filter
options.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **UI Improvements**
* Standardized region flag displays across project creation,
replication, infrastructure, read replica, and observability views.
* Region flags now use consistent styling, rounded borders, and
rendering throughout the Studio interface.
* Improved visual consistency for selected regions, database nodes,
tooltips, and region options.
* Decorative flags in observability views are handled appropriately for
assistive technologies.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Danny White