[DaoDaoNoCode]

Description

The problem

TimeRangeSelector sets its combobox's accessible name with:

inputProps={{ 'aria-label': `Select time range. Currently set to ${value}` }}

value is the TimeRangeValue prop, an object ({ pastDuration: '1h' } or { start, end }), so the template literal turns it into [object Object]. Screen readers announce:

Select time range. Currently set to [object Object]

The label has been like this since TimeRangeSelector moved to this repository (7aa6679). It's in v0.54.0, v0.55.0 and main.

The fix

The component already computes the text it shows: the matching time option's display (for example "Last 1 hour"), or else formatTimeRange(value, timeZone) for a range that isn't a preset. This PR computes that string once, as displayValue, and uses it for both the rendered value and the aria-label. The visible text doesn't change.

Selected range	Accessible name before	Accessible name after
Last 1 hour	Select time range. Currently set to [object Object]	Select time range. Currently set to Last 1 hour
Absolute range	Select time range. Currently set to [object Object]	Select time range. Currently set to 2026-03-09 09:00:00 - 2026-03-09 10:00:00

Tests

TimeRangeSelector.test.tsx is new. It renders the selector with a relative range that matches a preset and with an absolute range, and looks up the combobox by role and accessible name. Both tests fail on main. The failure reports the combobox's name as Select time range. Currently set to [object Object]. Both pass with the fix.

Related: perses/perses#4329 (general accessibility work, which doesn't cover this label).

Screenshots

No visual change: the selector shows the same text as before. Only the accessible name changes.

I also checked it in a real app. That app renders Perses dashboards with TimeRangeControls from @perses-dev/plugin-system 0.54.0. I applied the same change to the installed @perses-dev/components 0.54.0 and read the browser's accessibility tree with Playwright:

• before: combobox "Select time range. Currently set to [object Object]", showing "Last 1 hour"
• after, default range: combobox "Select time range. Currently set to Last 1 hour"
• after picking "Last 6 hours" from the menu: combobox "Select time range. Currently set to Last 6 hours"
• after, absolute range from the URL's start/end: the name ends with the same formatted range the selector shows

Checklist

• Pull request has a descriptive title and context useful to a reviewer.
• Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the
  following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, DOC,IGNORE.
• All commits have DCO signoffs.

UI Changes

• Changes that impact the UI include screenshots and/or screencasts of the relevant changes. (No visual change; see the accessibility tree above.)
• Code follows the UI guidelines.
• E2E tests are stable and unlikely to be flaky. (No E2E change; the new unit tests use a fixed time zone and fixed dates.)

Validation

Node 24.19.0 (from .nvmrc) and npm 11.17.0, after npm ci:

• npm run lint, npm run format:check, npm run type-check, npm run test, npm run build and make checklicense at the repository root: all pass.
• components lint: 67 warnings before and after. The two in TimeRangeSelector.tsx (no-shadow on the date picker's value parameter, no-array-index-key) were already there.
• The plugin-system tests for TimeRangeControls, which find this combobox by /time range/i, still pass.

AI assistance

Claude Code was used to find the issue, make the change and the test, run the checks and write this description. I reviewed the change and the results.

🤖 Generated with Claude Code

[Gladorme]

lgtm, thanks :)