mirror of
https://github.com/supabase/supabase.git
synced 2026-06-13 01:39:53 +08:00
2c48c6a002
## 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? Bug fix (accessibility improvement in LayoutHeader) ## What is the current behavior? Icon-only buttons do not have explicit accessible names for screen readers. ## What is the new behavior? All icon-only buttons now have explicit accessible names using visually hidden text (sr-only), ensuring proper screen reader support. ## Additional context Tooltip text is preserved for visual users. No visual changes were introduced. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Accessibility** * Added hidden screen-reader labels to multiple toolbar and menu buttons (Settings, Advisor Center, AI Assistant, SQL Editor, Help) so icons are announced by assistive technologies, improving navigation and discoverability across the studio interface. [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45790) <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
import { AiIconAnimation, cn, KeyboardShortcut } from 'ui'
|
|
|
|
import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
|
|
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
|
|
import { useTrack } from '@/lib/telemetry/track'
|
|
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
|
|
import { useIsShortcutEnabled } from '@/state/shortcuts/useIsShortcutEnabled'
|
|
import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
|
|
|
|
export const AssistantButton = () => {
|
|
const { activeSidebar, toggleSidebar } = useSidebarManagerSnapshot()
|
|
const isAIAssistantHotkeyEnabled = useIsShortcutEnabled(SHORTCUT_IDS.AI_ASSISTANT_TOGGLE)
|
|
const track = useTrack()
|
|
|
|
const isOpen = activeSidebar?.id === SIDEBAR_KEYS.AI_ASSISTANT
|
|
|
|
return (
|
|
<ButtonTooltip
|
|
type="outline"
|
|
size="tiny"
|
|
id="assistant-trigger"
|
|
className={cn(
|
|
'rounded-full w-[32px] h-[32px] flex items-center justify-center p-0',
|
|
isOpen && 'bg-foreground text-background'
|
|
)}
|
|
onClick={() => {
|
|
track('header_assistant_button_clicked')
|
|
toggleSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
|
|
}}
|
|
tooltip={{
|
|
content: {
|
|
className: 'p-1 pl-2.5',
|
|
text: (
|
|
<div className="flex items-center gap-2.5">
|
|
<span>AI Assistant</span>
|
|
{isAIAssistantHotkeyEnabled && <KeyboardShortcut keys={['Meta', 'I']} />}
|
|
</div>
|
|
),
|
|
},
|
|
}}
|
|
>
|
|
<AiIconAnimation
|
|
allowHoverEffect={false}
|
|
size={16}
|
|
className={cn(isOpen && 'text-background')}
|
|
/>
|
|
<span className="sr-only">AI Assistant</span>
|
|
</ButtonTooltip>
|
|
)
|
|
}
|