Skip to main content

InformationOverlay

The InformationOverlay provides additional information via an overlay, the position of which can be adjusted. According to the type of information, the variant can be set. The trigger consists of an icon and an optional text. By default, the variant is neutral and the overlay is positioned on the bottom.

OverviewPropertiesUsageAccessibility

New

Note

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

Keyboard accessibility and focus​

InformationOverlay handles focus management out of the box. When the overlay 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 revealed content when the overlay opens, and return to the trigger on close, so screen readers can announce the state change correctly.
  • Do ensure the revealed content has a meaningful accessible name: the dialog or panel title, for example.

Accessible names and roles​

The approach to accessible naming depends on whether the trigger uses an icon only or a combination of icon and text.

Icon only​

  • Do provide an aria-label that describes the trigger's intent.
  • Do set the SVG's role to img and hide it from assistive technology with aria-hidden="true".
  • Do use a Tooltip to surface the trigger name visually. Ensure that the tooltip text matches the aria-label exactly.
  • See Add aria-label in the Overview tab for a code example.

Icon and text​

  • Do verify that the trigger's visible text matches its accessible name.
  • Do set the SVG's role to img and hide it from assistive technology with aria-hidden="true".
  • Don't add alt text to the icon — it would be announced separately, creating extra noise.

State announcements​

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

  • 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