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.