Enterprise: Modal: No longer returns focus to button after closing

[aaronpikkarainen]

Describe the bug
The modal code has logic which remembers where focus is before opening and returns focus to that control after closing. This used to work, but no longer does in the current Soho version.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://design.infor.com/code/ids-enterprise/latest/demo/components/modal/example-index
2. Click on the 'Show Modal' button
3. Click 'Cancel' to close the modal
4. The 'Show Modal' button is not focused

Expected behavior
After closing, the modal (or CAP) should return focus to the control that had focus right before the modal was opened. This functionality has been very useful and expected for keyboard-only users.

The below Soho code shows that logic is in place to try to restore focus to a link/button/input/textarea, however it is not working because of bad logic determining if this.oldActive gets set.

Version

• ids-enterprise: v4.22.1

Platform

• Device: Dell Laptop
• OS Version: Windows 10
• Browser Name: Chrome
• Browser Version: 78.0.3904.97 (Official Build) (64-bit)

[janahintal]

QA Passed.
Verified in http://master-enterprise.demo.design.infor.com/components/modal/example-index.html.
Thank you.

[CindyMercadoReyes]

This issue is now resolved. Tested this issue across browsers. Moving this ticket to the Done column.

[aaronpikkarainen]

I see that the changes for this issue now require us to pass the element selector into the new "triggerButton" option. Unfortunately this fix won't work for SX.e. We rely on the refocus logic to work automatically in a generic way without having to pass in specific element selectors (this is how it works in Soho 4.2.5).

I found that the below simple change in modal.js will fix the problem for us. (It allows this.oldActive to generically hold onto the focused element in the case that the modal trigger is the body rather than a specific element.)

modal.js line 616
} else if (!this.trigger || this.trigger.length === 0 || this.trigger.is('body')) { this.oldActive = $(':focus'); // Save and restore focus for A11Y }

Can this issue be reopened so we can get a fix that will work for us?

[tmcconechy]

Lets call this failed QA. Can you have a look @deep7102 ?

[jbrcna]

QA FAILED
verified in https://master-enterprise.demo.design.infor.com/components/modal/example-index.html
version: 4.25.0-dev

works in (Chrome, Firefox, EDGE) browser but it doesn't work in Safari browser and iOS mobile devices.

[tmcconechy]

A new fix was added

[jbrcna]

The issue is now resolved. moving this ticket to Done column