When the AI drawer is open, and the user tabs through its contents, the focus will move outside the drawer.

On larger window sizes, this is okay. However, when the page is zoomed or viewed on smaller devices, this means that when the focus moves out of the open AI drawer, users may not be able to see which element has the focus when the open AI drawer obscures the element in focus. This scenario can cause us to fail the WCAG 2.2 Level AA Success Criterion 2.4.11 Focus not obscured (minimum).

One solution to this problem is to keep the focus within the AI drawer when it is open, so that it moves only within that area.

Some things to keep in mind:

• By locking the focus on the AI drawer when it is open, we should designate the AI drawer with a dialog role and follow the Dialog (Modal) Pattern from the ARIA Authoring Practices Guide.
• Pressing the Escape key within the AI drawer should close it.
• Clicking on the AI action that opens the AI drawer should move the focus to the AI drawer.
• Assign an accessible name for the AI drawer. E.g. via aria-labelledby or aria-label.