Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-16 16:30:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

♿ feat: Enhance TokenUsageIndicator accessibility with detailed aria labels

Browse source
This commit is contained in:
Marco Beretta 2025-12-15 17:15:58 +01:00
parent 0452594b00
commit e0610b0d14
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
2 changed files with 15 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

18
client/src/components/Chat/Input/TokenUsageIndicator.tsx
View file

@ -23,7 +23,7 @@ const TokenUsageIndicator = memo(function TokenUsageIndicator() {
// Ring calculations
const size = 28;
const strokeWidth = 2.5;
const strokeWidth = 3.5;
const radius = (size - strokeWidth) / 2;
const circumference = 2 * Math.PI * radius;
const offset = circumference - (percentage / 100) * circumference;
@ -40,10 +40,18 @@ const TokenUsageIndicator = memo(function TokenUsageIndicator() {
});
const ariaLabel = hasMaxContext
? localize('com_ui_token_usage_aria', { 0: Math.round(percentage).toString() })
: localize('com_ui_token_usage_indicator');
? localize('com_ui_token_usage_aria_full', {
0: formatTokens(inputTokens),
1: formatTokens(outputTokens),
2: formatTokens(maxContext),
3: Math.round(percentage).toString(),
})
: localize('com_ui_token_usage_aria_no_max', {
0: formatTokens(inputTokens),
1: formatTokens(outputTokens),
});
// Color based on percentage (using raw colors to match existing patterns in AudioRecorder.tsx)
// Color based on percentage
const getProgressColor = () => {
if (!hasMaxContext) {
return 'stroke-text-secondary';
@ -80,7 +88,7 @@ const TokenUsageIndicator = memo(function TokenUsageIndicator() {
r={radius}
fill="transparent"
strokeWidth={strokeWidth}
className="stroke-border-medium"
className="stroke-border-heavy"
/>
{/* Progress ring */}
<circle

3
client/src/locales/en/translation.json
View file

@ -1322,7 +1322,8 @@
"com_ui_token": "token",
"com_ui_token_exchange_method": "Token Exchange Method",
"com_ui_token_url": "Token URL",
"com_ui_token_usage_aria": "Context window {{0}}% used",
"com_ui_token_usage_aria_full": "Token usage: {{0}} input, {{1}} output, {{2}} max context, {{3}}% used",
"com_ui_token_usage_aria_no_max": "Token usage: {{0}} input, {{1}} output",
"com_ui_token_usage_indicator": "Token usage indicator",
"com_ui_token_usage_no_max": "Input: {{0}} | Output: {{1}} | Max: N/A",
"com_ui_token_usage_with_max": "Input: {{0}} | Output: {{1}} | Max: {{2}}",