a11y improvements

Author: brunobergher

webview-ui/src/components/chat/ChatRow.tsx

@@ -1085,7 +1085,7 @@ export const ChatRowContent = ({
 										e.stopPropagation() // Prevent parent onClick from firing
 										vscode.postMessage({ type: "switchTab", tab: "cloud" })
 									}}
-									title={cloudIsAuthenticated ? t("chat:apiRequest.viewTokenUsage") : undefined}>
+									title={t("chat:apiRequest.viewTokenUsage")}>
 									${Number(cost || 0)?.toFixed(4)}
 								</div>
 							</div>

webview-ui/src/components/cloud/UsagePreview.tsx

@@ -136,14 +136,18 @@ export const UsagePreview = ({ onViewDetails }: UsagePreviewProps) => {
 		<div className="cursor-pointer group rounded-lg bg-vscode-editor-background relative" onClick={onViewDetails}>
 			<div className="p-4">
 				{/* Chart with daily usage bars */}
-				<div className="h-24 min-[450px]:h-40 rounded mb-3 flex items-end gap-1 pb-2">
+				<div
+					className="h-24 min-[450px]:h-40 rounded mb-3 flex items-end gap-1 pb-2"
+					role="img"
+					aria-label={t("cloud:usagePreview.costPastDays", { count: data.days.length })}>
 					{data &&
 						Array.isArray(data.days) &&
 						data.days.map((day, index) => (
 							<div key={index} className="w-full flex flex-col items-center justify-end h-full">
 								<div
 									className="w-full rounded-t-xs transition-all bg-vscode-button-background"
 									style={{ height: `${getBarHeight(day.cost)}%` }}
+									aria-label={`${formatDateShort(new Date(day.date).getTime())}: ${formatCost(day.cost)}`}
 								/>
 								<span className="text-[9px] h-[1em] hidden min-[300px]:block overflow-clip text-center text-muted-foreground mt-0.5">
 									{formatDateShort(new Date(day.date).getTime())}