Provides a block that makes the default Popup component of OutSystems more accessible, following WAI guidelines.
Simply add the 'AccessiblePopupContent' block to your popup and move the contents of the popup to the 'Content' placeholder of the block. That's it :)
Check out the demo to see this component in action!
Features:
- Focus trap so that when pressing tab the focus will not leave the popup
- Return focus to last element before opening the popup
- Close popup with the "Escape" key
Usage:
See de 1.x docs for instructions on previous versions of this component.
Demo:
Provides two actions to use when opening and closing popups that make the default Popup component of OutSystems more accessible, following WAI guidelines.
Use the "PopupOnOpen" and "PopupOnClose" actions right after opening or closing the popup like you normally would. That's it :)
Input params:
- PopupId -> Widget Id of the OutSystems Popup (mandatory)
For the "PopupOnOpen" client action you can optionally set two params:
- ReturnFocusToId -> The Id of the element that triggered the popup open event. This is used to return focus to this element when closing the popup. Keep empty if you don't want this behavior (optional)
- CloseFunction -> The function used to close the popup. Use this if you want to allow the user to close the popup by clicking no the "Escape" key. To get the function object, simply assign the function to a Object output param in a javascript node.
Example: $parameters.FunctionObject = $actions.CloseOnClick;
Notice that we want "$actions.CloseOnClick" and not "$actions.CloseOnClick()"