[a11y]: ai-chat should keep focus within full-screen chat window

[Daniel-Schulz-Private]

Browser

No response

Operating System

No response

Package version

0.18.0

React version

18.3.1

Automated testing tool and ruleset

n/a

Assistive technology

No response

Description

When the modal dialog opens in full screen mode, keyboard users and screen reader users are able to navigate outside the modal content to elements behind the modal- which disorienting the screen reader users.

Note: Used Tab /Arrow key navigation

Recommended fix: Once the Modal is active - focus not expected to move out from the Modal on Tab/Arrow key navigation .

• Ensure users can cycle through interactive elements inside the modal using Tab and Shift + Tab keys.
• Prevent focus from moving to the page content outside the modal until the modal is closed.
• Use proper ARIA roles (role="dialog" or role="alert dialog") and JavaScript focus management to maintain focus within the modal.

User impact: Impact keyboard /screen reader users: Lack of focus trapping leads to confusion, disorientation, and loss of context, making it difficult for users to interact efficiently with the modal content.

WCAG 2.1 Violation

WCAG Mapping: 2.4.3 Focus Order

Reproduction/example

n/a

Steps to reproduce

1. open ai-chat
2. enable full screen mode
3. use TAB keys to move focus
4. see that focus can leave chat window

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems