{Linked:Bug214446; LinkedBug} [DOCS]: Keyboard focus get lost after activating Home tab item present in left navigation pane.

[Anshi0420]

What happened?

After activating home tab item focus gets lost and after pressing tab key focus land on the GIT hub icon present at the page.

How do we reproduce the behavior?

Repro Steps:

1. Open the PWA Builder URL in Anaheim dev browser.
2. PWA Builder page will appear.
3. Navigate to the home tab item present in the left navigation pane and activate it.
4. Again press tab key to observe the keyboard focus.
5. Observe the issue.

What do you expect to happen?

Focus should remain on the home tab item after activating it, it should not get lost and should not land on the Git hub icon.

What environment were you using?

Test Environment:
OS Build: Windows 11 Enterprise Insider Preview 22H2 (23493.1000)
Edge Browser: Version 115.0.1880.3 (Official build) dev (64-bit)
User ID: V-
URL: https://docs.pwabuilder.com/#/

Additional context

Note:
After closing any dialogue such as 'Edit your Manifest' present at https://www.pwabuilder.com/reportcard?site=https://webboard.app focus get lost and land on the top of the page.
Expected:
Focus should remain on the Activated button.

User Experience:
If the keyboard focus will get lost and land on the top of the UI, then the keyboard and screen reader dependent users need to press multiple times tab to reach again on that control and will face difficulties in navigating at the UI properly.

WCAG Reference:
https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

Attachments:

Focus.mp4

Note attachment:

2023-08-11.17-06-52.mp4

[microsoft-github-policy-service]

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

[microsoft-github-policy-service]

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

[Jaylyn-Barbee]

@Anshi0420, why does it seem like the main issue and the additional context here are separate issues or is this just another example of the same issue?

[microsoft-github-policy-service]

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

[microsoft-github-policy-service]

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

[microsoft-github-policy-service]

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

[microsoft-github-policy-service]

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

[microsoft-github-policy-service]

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

[Suriya617]

IRT partner bug ID for tracking: https://dev.azure.com/CSS-IRT/CSS%20IRT/_workitems/edit/214446

[Suriya617]

@Jaylyn-Barbee Comment from 3P team:

This issue is closed by third party as fixed with the below comment-

Fixed via #2253 (Opens in new window or tab) and #2265 (Opens in new window or tab).
These updates will be available in the next release. Until then, you can verify the changes by visiting the develop branch preview (Opens in new window or tab). Thanks

[Anshi0420]

Issue still repro at the latest environment.
https://docs.pwabuilder.com/#/