[Accessibility] [Global][Drawer> Basic Usage]: On activating 'Show drawer', keyboard focus does not move to dialog 'Close' icon button.

[silvalaura]

A11Y-560

Platform: Windows 11 / Chrome

Steps to reproduce:

1. Open the URL: https://react-magma.cengage.com/version/4.9.1
2. Now Navigate to side navigation and expand 'Components' button.
3. Now activate 'Drawer' link under API
4. Now navigate to any 'Show Drawer' button and verify.

Actual Result: When the drawer opens, keyboard focus does not move into the drawer dialog. The user must manually tab into the drawer to reach the ‘Close’ button or any other focusable content.

Note: This issue is reproducible for all elements present under Drawer/Modal page.

Expected Result: Upon opening, focus should automatically move to the first interactive element inside the drawer, typically the 'Close' (X) icon button, in accordance with accessibility best practices for modals and dialogs.

Instances:

1. [Accessibility][Global][Modal]: On activating 'Show Modal' button, keyboard focus does not move to dialog 'Close' icon button. https://app.screencast.com/uwCpmbrBSPnhU

WCAG Guideline: 2.4.3 Focus Order Level A

User Impact: Keyboard and screen reader users experience a disconnected interaction flow, forcing them to search for the opened drawer and navigate manually, which is disorienting and inefficient.

Recommendation: Programmatically move focus to the first interactive element inside the drawer (such as the 'Close' button) when the drawer opens. You can achieve this by referencing the element and calling .focus() after render.

Screencast: https://app.screencast.com/TKNTzt0cRsnsR