mirror of
https://github.com/supabase/supabase.git
synced 2026-09-07 02:20:52 +08:00
81dfcc9c93
## 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`.
24 lines
546 B
TypeScript
24 lines
546 B
TypeScript
import type { ImgHTMLAttributes } from 'react'
|
|
|
|
import { BASE_PATH } from '@/lib/constants'
|
|
|
|
interface RegionFlagProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> {
|
|
region: string
|
|
}
|
|
|
|
export const RegionFlag = ({
|
|
alt = '',
|
|
'aria-hidden': ariaHidden,
|
|
className,
|
|
region,
|
|
...props
|
|
}: RegionFlagProps) => (
|
|
<img
|
|
alt={alt}
|
|
aria-hidden={ariaHidden ?? alt === ''}
|
|
className={`rounded-xs border border-foreground-muted/20 ${className ?? ''}`}
|
|
src={`${BASE_PATH}/img/regions/${region}.svg`}
|
|
{...props}
|
|
/>
|
|
)
|