cengage
[Accessibility] [Global] [Drawer] Basic Usage> Show Drawer> 'X' (Close Drawer) button focus
Issue 1: [Accessibility] [Global] [Drawer] Basic Usage> Show Drawer> 'X' (Close Drawer) button is identified at the end of dialog
Environment: Windows 11/Chrome 137/JAWS 2025 Windows 11/Edge 136/NVDA 2025 Mac 15/Safari/VoiceOver
Steps to Reproduce:
- Open the URL – https://react-magma.cengage.com/version/4.9.1/api/tooltip/
- Turn on the screen reader (JAWS/NVDA/VoiceOver).
- Navigate to the Drawer component page from the left navigation.
- Under the Basic Usage section, activate the Show Drawer button.
- Once the drawer appears, use screen reader navigation (e.g., arrow keys or TAB key) to explore the content of the drawer.
- Observe the location where the screen reader identifies the 'X' (Close Drawer) button.
Actual Result:
After the drawer is revealed, the 'X' (Close Drawer) button is visually located at the top-right corner of the dialog. However, screen readers identify this button only at the very end of the dialog content. This means that users navigating the dialog from top to bottom hear the "Drawer Title" heading first and then have to navigate through all the content before reaching the close button. This misalignment between visual and programmatic order may confuse screen reader users who expect the close control to be easily reachable right after the dialog opens.
Refer to screencast: https://app.screencast.com/NbnmGizUXvRvB
Note: This issue is reproducible across all Drower variants.
Expected Result:
The 'X' (Close Drawer) button should be programmatically placed immediately after the "Drawer Title" heading in the accessibility tree so that screen readers identify it right after announcing the title. This aligns with the visual layout where both the title and close button are located at the top of the drawer.
User Impact: Screen reader users may miss the Close Drawer button altogether or may assume that it is not available due to its unexpected position at the end of the dialog. This creates a frustrating experience and can make it difficult for users to exit the drawer efficiently, especially if the dialog content is long.
WCAG Guideline: 1.3.2 Meaningful Sequence (A)
Bug Fix Recommendation:
a) Move the 'X' (Close Drawer) button in the DOM to appear immediately after the Drawer Title heading. b) Alternatively, use aria-flowto or adjust the focus order using JavaScript to ensure the screen reader reads the button immediately after the heading. c) Test across multiple screen readers to ensure consistent announcement order.
Issue 2: [Accessibility] [Drawer] Navigation Example> Show Drawer> Initial focus is set on first navigation link
Environment: Windows 11/Chrome 137/JAWS 2025 Windows 11/Edge 136/NVDA 2025 Mac 15/Safari/VoiceOver
Steps to Reproduce:
- Open the URL – https://react-magma.cengage.com/version/4.9.1/api/tooltip/
- Turn on the screen reader (JAWS/NVDA/VoiceOver).
- Navigate to the Drawer component page from the left navigation.
- Under the Navigation Example section, activate the Show Drawer button.
- Observe where the screen reader focus lands once the drawer is revealed.
Actual Result:
Upon activating the Show Drawer button, the screen reader focus automatically lands on the first navigation link within the drawer. The 'X' (Close Drawer) button, which is visually located at the top right corner, is announced only after navigating through the entire list of navigation links. This creates a mismatch between the visual layout and the accessibility focus order.
Refer to screencast: https://app.screencast.com/Xd3rGvzlpYMhg
Expected Result:
Focus should land on the 'X' (Close Drawer) button immediately when the drawer appears. This allows users to easily exit the drawer if they entered it by mistake. Since the Close button is visually placed at the top of the drawer, it should also be the first element encountered by screen reader users.
User Impact: When the focus is placed deep within the navigation content, screen reader users may struggle to find the Close Drawer button. This forces users to explore the entire drawer content just to exit, resulting in a disjointed and frustrating user experience — especially for those relying entirely on keyboard or screen reader navigation.
WCAG Guideline: 2.4.3 Focus Order (A)
Bug Fix Recommendation:
a) Programmatically set initial focus to the 'X' (Close Drawer) button upon opening the drawer. b) Ensure the Close button is the first element in the DOM order within the drawer. c) Validate that focus order is intuitive and consistent across all screen readers and browsers.
Issue 3: [Accessibility] [Drawer] Internationalization> Show Drawer> 'X' (Close Drawer) button is provided with incorrect accessible name
NOT DOING IT
Environment: Windows 11/Chrome 137/JAWS 2025 Windows 11/Edge 136/NVDA 2025 Mac 15/Safari/VoiceOver
Steps to Reproduce:
- Open the URL – https://react-magma.cengage.com/version/4.9.1/api/tooltip/
- Turn on the screen reader (JAWS/NVDA/VoiceOver). 3 Navigate to the Drawer component page from the left navigation.
- Under the Internationalization section, activate the Show Drawer button.
- Once the drawer is open, use TAB or arrow keys to navigate to the 'X' (Close Drawer) button.
- Observe the accessible name read by the screen reader.
Actual Result:
The 'X' (Close Drawer) button is announced as “Cerrar” by the screen reader, which is the Spanish translation of "Close". However, the rest of the page content is in English and there is no lang="es" attribute defined for the “Cerrar” button. This leads to a mismatch between language context and the accessible name, which can be confusing for screen reader users.
Refer to screencast: https://app.screencast.com/wZKqxBnysV1mI
Expected Result:
The accessible name of the Close Drawer button should match the language of the page content. If the page is in English, the button should be announced as “Close” and not “Cerrar”, unless a proper lang="es" attribute is applied to the button.
User Impact: Screen reader users who rely on consistent language context may not understand the meaning of “Cerrar” if they are not familiar with Spanish. This inconsistency can lead to confusion and reduce overall usability for users who depend on screen readers.
WCAG Guideline: 4.1.2 Name, Role, Value (A)
Bug Fix Recommendation:
a) If the page is in English, update the aria-label, title, or button text from “Cerrar” to “Close”. b) If multilingual content is intended, apply lang="es" to the button element so screen readers correctly interpret the pronunciation. c) Ensure consistency between the content language and the accessible names of all UI controls.
