Skip to main content

TimeframeSelector

    Use the TimeframeSelector to let users filter data by time, choosing from preset timeframes or entering a custom start and end time.

    OverviewPropertiesUsageAccessibilityChangelog
    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