Focus Trap

Name: timepicker-ui
Author: Piotr Glejzer

Control focus behavior for accessibility

Enable Focus Trap (Default)

Keep focus within modal for accessibility:

Select time

1const picker = new TimepickerUI(input, {
2  behavior: { focusTrap: true } // This is the default
3});
4picker.create();

Disable Focus Trap

#

Allow focus to move outside modal:

Select time

1const picker = new TimepickerUI(input, {
2  behavior: { focusTrap: false }
3});
4picker.create();

Return Focus After Close

#

Return focus to the input after closing the modal with behavior.returnFocus:

Select time

1const picker = new TimepickerUI(input, {
2  behavior: {
3    focusTrap: true,
4    returnFocus: true
5  }
6});
7picker.create();

Complete Accessibility Setup

#

Recommended accessibility configuration:

Select time

1const picker = new TimepickerUI(input, {
2  behavior: {
3    focusTrap: true,
4    returnFocus: true
5  },
6  ui: {
7    backdrop: true,
8    animation: true
9  }
10});
11picker.create();