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:
1 parent
2e8657d7a0
commit
8e20c32117
6 files changed
+890
-867
No files matched your search
+866
-866
File diff suppressed because it is too large.
Load diff
@@ -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>
|
||||
|
||||
@@ -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));
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user