Skip to main content

Accessibility

Starting from v2 we built reactjs-popup with accessibility in mind based on the WAI-ARIA Specification guidelines on how to build an accessible Modals and tooltip.

Those are some default behavior we are implementing to make sure we are delivering accessible tooltips and Modals :

  • ✓ Markup the Modal, Tooltip and Overlay Appropriately

    • ✓ Set role="dialog" for Modals and role="tooltip" for tooltips
    • ✓ Set aria-labelledby
    • ✓ Set aria-describedby

  • ✓ On Popup Open, we set focus to the first focusable element.

  • ✓ On Popup Close, we return focus to the last focused element.

  • ✓ While Open, we prevent mouse clicks outside for modal.

  • ✓ While Open, we prevent Tabbing to Outside the Popup.

  • ✓ Allow the ESC Key to Close the Modal and tooltip.

important

For accessible tooltip is highly recommended to set on prop to focus whenever you can.