Skip to main content

NotifyButton

The NotifyButton allows users to turn notifications about updates of resources on or off. Common use cases include notifications about updates of saved filters, workflows, or entities. Users will be notified via e-mail.

OverviewPropertiesUsageAccessibility

New

Note

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

Keyboard accessibility and focus​

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

  • Do provide a meaningful accessible name for the revealed content, such as the title of the panel or dialog.
  • Do ensure that focus returns to the trigger when the content closes.
  • Don't override the component's built-in focus handling. Focus must move into the revealed content when the panel opens, and return to the trigger on close, so screen readers can announce the state change correctly.

Accessible names and roles​

NotifyButton is commonly used as an icon-only button, but icon and text may also be used.

Icon only​

  • Do provide an aria-label that describes the button'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 button name visually. Ensure that the tooltip text matches the aria-label exactly.

Icon and text​

  • Do verify that the button'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.

Custom overlay content​

If you customize the content of the panel, be sure to adjust the aria-describedby attribute accordingly. See Customize the overlay content in the Overview tab for a code example.

State announcements​

NotifyButton 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