[MGTP-People-picker- Property- Single select mode]: Keyboard focus does not land on “Search for a name” edit field after activating “open modal” button.

[Raisul123]

Test Environment:
OS Build: Windows 11 
Version: 24H2 (OS Build 26058.1400) 
Browser: Edge dev 
Browser Version 123.0.2400.1 (Official build) dev (64-bit)
URL: Overview - Docs ⋅ Storybook (mgt.dev)

Repro Steps:

1. Open the above URL.
2. The ‘Microsoft Graph Toolkit Playground' Overview page will get displayed.
3. Navigate to the ‘MGTP-People-picker’ and activate it.
4. Navigate to the ‘Property’ and activate it.
5. Navigate to the ‘Single select mode’ and activate it.
6. Navigate to the ‘Open modal’ button and activate it.
7. Observe the issue.

Actual Result:
Keyboard focus does not land on “Search for a name” edit field after activating “open modal” button.
After activating “open modal” button keyboard focus remain on “open modal” button.
Also keyboard focus is getting lost after activating ‘Close modal(x)’ button.

Expected Result:
Keyboard focus should land on “Search for a name” edit field after activating “open modal” button.
Also keyboard focus should land on “open modal” button after activating ‘Close modal(x)’ button.

User Impact:
Keyboard dependent user will have difficulty in navigating, when focus order does not follow the visible reading order, the experience can create a different interaction pattern, and/or unintended content relationships for assistive technology users. On rare occasions, there is a logical reason the focus order is different from the reading order, but the meaning of the content and interactions must remain the same.

WCAG Reference:
Understanding Success Criterion 2.4.3: Focus Order | WAI | W3C

“ Have feedback on bugs logged, please tag bug as “A11yRCA“ and add your feedback in the comment section. “

Attachments:

Open.Model-Focus.order.incorrect.mp4

[gavinbarron]

Change JS in story to :

const modal = document.getElementById("modal")
const closeModal = document.getElementById("close-modal")
const modalContent = document.getElementById("modal-content")
const modalPicker = document.getElementById("modal-picker")
modal.addEventListener('click', () => {
  modalContent.style.display = "flex"
  modalPicker.selectedPeople = []
  const input = modalPicker.shadowRoot.querySelector('fluent-text-field').shadowRoot.querySelector('input');
  input.focus();
})

closeModal.addEventListener('click', () => {
  modalContent.style.display = "none";
  modal.focus();
})

[vagpt]

Adding A11yTTValidated tag as per the comment mentioned in its PR.