Keep Focus in Modals

Business Background

In certain scenarios, you may want to make sure that the focus remains only on a modal or responsive modal, for instance, when accessibility is used.

Titan Solution

You can now keep the focus on a modal or responsive modal in Titan Web. When the user uses the Tab key on the keyboard, the focus will move between the elements on the modal or responsive modal and not to any elements in the background.

How to Video

• Coming soon!

How to Guide

1. Click the + icon to open the list of elements.
2. Select the Container option from the list.
3. Click-and-drag the modal or responsive modal to the canvas.
   • In this example, a button and several input elements were also added.
4. Click the Gear icon to open the Settings screen.
5. Select Interactivity and click the Keep Focus in Modal checkbox.

In this example, the following was done to open the modal when the page loads.

1. Open the Page drop-down and click the Kebab icon next to the page on which the modal is.
2. Click the Configure Actions button.

3. Click First Time (or Every Time) page load actions.
4. Hover with the mouse pointer over the Start Node and click the + icon. The Add Node screen opens.

5. Under Layout Actions, click the Drawer/Modal option and click the Next button. The Add Node/Drawer/Modal screen opens.

6. Select the Modal option and use the toggle switch to enable the modal.
7. Use the drop-down list to select the modal.
8. Select the Show radio button and click the Next button.

9. Change the tag if necessary and click the Insert button. The node is added to the screen.

10. Click the Apply button.

11. Save and Preview the project.

When the user uses the Tab key, the focus moves from one element on the modal to the next.

The action will be applied to the modal, and the content typed into it will be reset every time the button is clicked.

Learn more about Titan’s native integration with the Salesforce Experience Cloud.

Easily design, deploy, and measure custom web applications directly from Salesforce using Titan’s drag-and-drop web page builder.