accessible-popup
Reactive icon

Accessible Popup

Stable version 3.0.0 (Compatible with OutSystems 11)
Uploaded
 on 25 November 2024
 by 
5.0
 (3 ratings)
accessible-popup

Accessible Popup

Documentation
3.0.0

Provides a block that makes the default Popup component of OutSystems more accessible, following WAI guidelines.

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

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 :)

Demo

Check out the demo to see this component in action! 


2.0.0

Provides a block that makes the default Popup component of OutSystems more accessible, following WAI guidelines.

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:

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 :)

See de 1.x docs for instructions on previous versions of this component.

Demo:

Check out the demo to see this component in action! 


1.1.0

Provides two actions to use when opening and closing popups that make the default Popup component of OutSystems more accessible, following WAI guidelines.

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:

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()"

Demo:

Check out the demo to see this component in action!

1.0.0

Provides two actions to use when opening and closing popups that make the default Popup component of OutSystems more accessible, following WAI guidelines.

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:

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()"