Skip to main content

ExpandableText

    The ExpandableText component provides expand and collapse functionality for inline text.

    OverviewPropertiesAccessibility
    Note

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

    Accessible names and roles​

    • Do verify that the trigger's visible text matches its accessible name in both states: "Show more" when collapsed and "Show less" when expanded.

    Keyboard accessibility and focus​

    ExpandableText handles focus management out of the box. When the trigger is activated, focus stays on the trigger and the content expands in place. The user tabs into the revealed content when ready.

    • Do verify that revealed content appears immediately after the trigger, in reading order, so Tab moves into it naturally.
    • Don't move focus into the revealed content on activation. Doing so would suppress the state announcement and screen reader users wouldn't know that the content opened.

    State announcements​

    ExpandableText handles state announcements out of the box: aria-expanded="true" when expanded; aria-expanded="false" when collapsed.

    • Do ensure that the revealed 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