Issue Summary

The tab order of the "Edit Profile" page is incorrect as the focus is not moving onto the updated content.

Steps to Reproduce

1. Open the project from the header section.
2. Go to "Raise a request" link present in the left navigation pane.
3. Now go to "admin" link and select the "Profile" option.
4. Activate the "Edit Profile" button.
5. Observe that focus is not moving on updated content.

Screen Recording

Admin Admin - Service project - Google Chrome 2024-06-28 18-08-03.mp4

Actual Results

When user activate the "Edit Profile" button, the content such as "Name" "Send notification to", and so on appeared as a editable form fields. But due to incorrect tabbing order these content does not receive a focus. As a result, the changes appears on the screen won't be available for screen reader users.

Expected Results

The keyboard and screen reader focus should be move on the interactive elements such as "Change Avatar", "Name", "Send notification to", and so on. Ensure that the content should receive a focus.

Ensure that the keyboard focus moves to updated content after selecting an option using JavaScript .focus() method.

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available