feat(a11y): label icon-only buttons

Add accessible names (and aria-pressed for toggles) to the layout switcher,
overflow menu, selection clear, API key reveal/copy and pricing buttons,
reusing existing i18n keys. Replace the hard-coded English 'Menu' sr-only
text on the account cards with common.openMenu.
This commit is contained in:
evandro committed 2026-10-10 04:29:03 -03:00
1 parent 2e8657d7a0
commit 8e20c32117
6 files changed
+890 -867

No files matched your search

File diff suppressed because it is too large. Load diff
+16 -1
View File
@@ -112,6 +112,8 @@ export function AccountsToolbar(props: AccountsToolbarProps) {
size="icon"
className="h-7 w-7 cursor-pointer rounded-md"
onClick={() => onLayoutChange('auto')}
aria-label={t('cloud.layout.auto')}
aria-pressed={gridLayout === 'auto'}
>
<LayoutGrid className="h-3.5 w-3.5" />
</Button>
@@ -125,6 +127,8 @@ export function AccountsToolbar(props: AccountsToolbarProps) {
size="icon"
className="h-7 w-7 cursor-pointer rounded-md"
onClick={() => onLayoutChange('2-col')}
aria-label={t('cloud.layout.twoCol')}
aria-pressed={gridLayout === '2-col'}
>
<Columns2 className="h-3.5 w-3.5" />
</Button>
@@ -138,6 +142,8 @@ export function AccountsToolbar(props: AccountsToolbarProps) {
size="icon"
className="h-7 w-7 cursor-pointer rounded-md"
onClick={() => onLayoutChange('3-col')}
aria-label={t('cloud.layout.threeCol')}
aria-pressed={gridLayout === '3-col'}
>
<Columns3 className="h-3.5 w-3.5" />
</Button>
@@ -151,6 +157,8 @@ export function AccountsToolbar(props: AccountsToolbarProps) {
size="icon"
className="h-7 w-7 cursor-pointer rounded-md"
onClick={() => onLayoutChange('list')}
aria-label={t('cloud.layout.list')}
aria-pressed={gridLayout === 'list'}
>
<List className="h-3.5 w-3.5" />
</Button>
@@ -164,6 +172,8 @@ export function AccountsToolbar(props: AccountsToolbarProps) {
size="icon"
className="h-7 w-7 cursor-pointer rounded-md"
onClick={() => onLayoutChange('compact')}
aria-label={t('cloud.layout.compact')}
aria-pressed={gridLayout === 'compact'}
>
<LayoutList className="h-3.5 w-3.5" />
</Button>
@@ -206,7 +216,12 @@ export function AccountsToolbar(props: AccountsToolbarProps) {
{/* More Options Dropdown */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon" className="cursor-pointer bg-white/[0.02]">
<Button
variant="outline"
size="icon"
className="cursor-pointer bg-white/[0.02]"
aria-label={t('common.openMenu')}
>
<MoreHorizontal className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
@@ -29,6 +29,7 @@ export function BatchActionBar({
size="icon"
className="h-6 w-6 rounded-full"
onClick={onClearSelection}
aria-label={t('cloud.batch.clear')}
>
<X className="h-4 w-4" />
</Button>
@@ -258,6 +258,7 @@ export const ModelPricingDialog: React.FC<ModelPricingDialogProps> = ({
className="text-muted-foreground hover:text-foreground h-6 w-6"
onClick={() => handleReset(model)}
title="Reset to default"
aria-label={`Reset ${model} pricing to default`}
>
<RotateCcw className="h-3 w-3" />
</Button>
+5
View File
@@ -405,6 +405,8 @@ print(response.choices[0].message.content)`;
className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
onClick={() => setShowKey(!showKey)}
title={showKey ? t('proxy.config.hide_key') : t('proxy.config.show_key')}
aria-label={showKey ? t('proxy.config.hide_key') : t('proxy.config.show_key')}
aria-pressed={showKey}
>
{showKey ? (
<EyeOff className="text-muted-foreground h-4 w-4" />
@@ -537,6 +539,7 @@ print(response.choices[0].message.content)`;
variant="ghost"
size="icon"
className="h-7 w-7 text-blue-300 hover:bg-blue-500/10"
aria-label={t('proxy.copy')}
onClick={() =>
copyToClipboard(`http://${selectedIp || 'localhost'}:${proxyConfig.port}/v1`)
}
@@ -906,6 +909,7 @@ print(response.choices[0].message.content)`;
variant="ghost"
size="icon"
className="h-8 w-8"
aria-label={t('proxy.copy')}
onClick={(e) => {
e.stopPropagation();
copyToClipboard(getCurlExample(activeModelTab));
@@ -938,6 +942,7 @@ print(response.choices[0].message.content)`;
variant="ghost"
size="icon"
className="h-8 w-8"
aria-label={t('proxy.copy')}
onClick={(e) => {
e.stopPropagation();
copyToClipboard(getPythonExample(activeModelTab));
+1
View File
@@ -524,6 +524,7 @@ function UsagePage() {
size="icon"
className="ml-2 h-5 w-5 hover:bg-white/10"
onClick={() => setIsPricingDialogOpen(true)}
aria-label="Model pricing settings"
>
<Settings className="text-muted-foreground h-3 w-3" />
</Button>