Skip to main content

TimeframeSelector

TimeframeSelector is a filtering component that lets users choose from preset timeframes or add unique "from" and "to" time values of their own.

OverviewPropertiesUsageAccessibility

New

Note

See Accessibility in Design Foundations for explanations of key concepts and best practices.

Accessible names and roles​

  • Do verify the trigger's accessible name accurately reflects its purpose in context — typically the current timeframe value.

Keyboard accessibility and focus​

TimeframeSelector handles focus management out of the box. When the popup opens, focus moves into the revealed content; when it closes, focus returns to the trigger.

  • Don't override the component's built-in focus handling. Focus must move into the popup when it opens, and return to the trigger on close, so screen readers can announce the state change correctly.

State announcements​

TimeframeSelector handles state announcements out of the box: aria-expanded="true" when open; aria-expanded="false" when closed.

  • Do ensure that the popup content follows in a logical tab order so users can navigate into it after the state is announced.
Still have questions?
Find answers in the Dynatrace Community