Issue Summary

Keyboard focus is lost or placed on the wrong element during user interaction, content refresh or update, or other reason.

Elements name:

• "Reference depth:" combobox
• "Inbound References" editable spin button.

Location of the elements: Combobox and Editable spin buttons, just below the "Configure" heading, in the "Force" view, in the "Object overview" modal.

Additional details:
1. While selecting any option from the "Reference depth:" Combobox, keyboard focus is moving to the entire document.
2. While updating the count in the "Inbound References" editable spin button., keyboard focus is moving to the entire modal.

Steps to reproduce:
1. Click on the "oracledb-11g-prod" button, just beside the "Affected Server:" text, in the "Can we get this server request approved?" page.
2. Then the "Object Overview" modal will display.
3. Click on the "Show graph" icon button.
4. Click on the "Force" button. Then the graph will display in the Force view.
5. Click on the "Configure" link icon, on the left navigation. Then the above-mentioned form controls will display.

Note: The same issue applies to the form fields, when selecting any image button, in the "Force" view image section.

Tested URL

https://instenv-5971-nizh.instenv.atl-test.space/projects/JSM/queues/custom/31/JSM-111

Steps to Reproduce

1. Step 1

Actual Results

Actual results

Expected Results

Fix Information
RULE :
The focus MUST be purposely moved or set (via JavaScript) onto the appropriate element when the user's action requires a change of context or location for effective keyboard or touch interaction.

HOW TO FIX:
Fix this issue by explicitly placing focus on a logical element when content is removed, refreshed, or added, for example:
1. For content added to the screen in reaction to a user-fired event, focus should be shifted to the new content - such as in single page applications.
2. For content removed from the screen in reaction to a user-fired event, focus should be shifted to the next logical place in the interaction.

REFERENCE:
Deque University: https://dequeuniversity.com/class/input-methods2/keyboard-input/focus-management
Deque University:https://dequeuniversity.com/class/dynamic-updates2/notify-users/move-focus
Deque University: https://dequeuniversity.com/class/dynamic-updates2/ajax/single-page-applications

BACKGROUND:
One of the biggest challenges when creating rich web interfaces using JavaScript is the management of focus when new content or controls are added or removed from the page. The presentation or modification of content on the screen may require that the user interact with -or at the very least, take notice of - the new or changed content. It is important to have a clear indication of page content that has been updated. This allows the user to understand the change and also allows a keyboard user to interact with any new content.

Screenshot

Screen Recording

screen recording

Workaround

workaround

Bug Ref: 745322

Bulldog Ref: JSMDC-12572