I'm a maintainer for Microsoft Graph Toolkit, a web components library with a wrapper to allow React devs to easily integrate our components,
We have a demo site built using Fluent React components which bring in Tabster.
When focus is within a focusable element inside one of our component we see that Tabster has a FocusableElement event listener on the keydown event of this element. When a user presses the tab key expecting to go to the next focusable element focus skips right over these elements.
Repro steps:
Go here: https://mgt.dev/next/mgt-chat
Sign in with a admin of an M365 developer tenant that you control as you'll need to consent to admin scope consents.
Navigate to the Dashboards page
On the My Tasks page there is an mgt-todo that displays tasks from Todo.
Each task has a input for the name and an input with type=date to set the due date.
If you have no tasks the new task action will also serve.
Click on the name of a task or in the "Add a new task" input area,
Enter some text
Press Tab
Expected behavior:
Focus moves to the date input and then to the delete button etc.
Actual behavior:
Focus moves out of the page and to the browser chrome.
The same behavior can be seen with on the Mail and Calendar page where the focus jumps over the calendar items after moving through the mail. Notably the mail items are unaffected by this issue as they live in the light DOM of the page as they are generated into a slot via our templating mechanism. The calendar listing is provided via mgt-agenda which you can see here: https://mgt.dev/next/?path=/story/components-mgt-agenda--simple
I'm a maintainer for Microsoft Graph Toolkit, a web components library with a wrapper to allow React devs to easily integrate our components, We have a demo site built using Fluent React components which bring in Tabster.
When focus is within a focusable element inside one of our component we see that Tabster has a FocusableElement event listener on the keydown event of this element. When a user presses the tab key expecting to go to the next focusable element focus skips right over these elements.
Repro steps: Go here: https://mgt.dev/next/mgt-chat Sign in with a admin of an M365 developer tenant that you control as you'll need to consent to admin scope consents. Navigate to the Dashboards page On the My Tasks page there is an mgt-todo that displays tasks from Todo. Each task has a input for the name and an input with type=date to set the due date. If you have no tasks the new task action will also serve. Click on the name of a task or in the "Add a new task" input area, Enter some text Press Tab
Expected behavior: Focus moves to the date input and then to the delete button etc.
Actual behavior: Focus moves out of the page and to the browser chrome.
You can view the raw web component and its correct behavior here: https://mgt.dev/next/?path=/story/components-mgt-todo--todos
The same behavior can be seen with on the Mail and Calendar page where the focus jumps over the calendar items after moving through the mail. Notably the mail items are unaffected by this issue as they live in the light DOM of the page as they are generated into a slot via our templating mechanism. The calendar listing is provided via mgt-agenda which you can see here: https://mgt.dev/next/?path=/story/components-mgt-agenda--simple