Skip to content

Commit e3242ba

Browse files
committed
fix(accessibility): use React Native-supported 'button' role for toasts
Replace unsupported 'alert'/'status' roles with 'button' in TOAST_TYPE_TO_ROLE, update Toast's fallback role to 'button', and adjust tests accordingly. Announcements continue to be handled via accessibilityLiveRegion.
1 parent e71ca35 commit e3242ba

3 files changed

Lines changed: 15 additions & 10 deletions

File tree

src/components/Toast.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ const Toast: React.FC<ToastProps> = ({
196196

197197
// Determine accessibility role (can be customized via config)
198198
const roleMap = config.accessibility?.roleMap;
199-
const role = roleMap?.[type] ?? TOAST_TYPE_TO_ROLE[type] ?? 'alert';
199+
const role = roleMap?.[type] ?? TOAST_TYPE_TO_ROLE[type] ?? 'button';
200200

201201
// Determine live region (polite for non-urgent, assertive for urgent)
202202
const liveRegion = TOAST_TYPE_TO_LIVE_REGION[type] ?? 'polite';

src/utils/__tests__/accessibility.test.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -352,10 +352,10 @@ describe('accessibility utilities', () => {
352352

353353
describe('constants', () => {
354354
it('should have all toast types mapped to roles', () => {
355-
expect(TOAST_TYPE_TO_ROLE.info).toBe('alert');
356-
expect(TOAST_TYPE_TO_ROLE.success).toBe('status');
357-
expect(TOAST_TYPE_TO_ROLE.warning).toBe('alert');
358-
expect(TOAST_TYPE_TO_ROLE.error).toBe('alert');
355+
expect(TOAST_TYPE_TO_ROLE.info).toBe('button');
356+
expect(TOAST_TYPE_TO_ROLE.success).toBe('button');
357+
expect(TOAST_TYPE_TO_ROLE.warning).toBe('button');
358+
expect(TOAST_TYPE_TO_ROLE.error).toBe('button');
359359
});
360360

361361
it('should have all toast types mapped to live regions', () => {

src/utils/accessibility.ts

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,20 @@ import type { ToastType, ToastMessage } from '../types';
1616

1717
/**
1818
* Toast type to accessibility role mapping.
19-
* Maps semantic toast types to appropriate ARIA roles for screen readers.
19+
* Maps semantic toast types to appropriate roles supported by React Native.
20+
* Note: React Native Pressable only supports: button, link, header, search, image,
21+
* imagebutton, keyboardkey, text, adjustable, checkbox, combobox, menu, menuitem,
22+
* progressbar, radio, scrollbar, spinbutton, switch, tab
23+
*
24+
* WCAG alert/status roles are announced via accessibilityLiveRegion instead.
2025
*
2126
* @constant
2227
*/
2328
export const TOAST_TYPE_TO_ROLE: Record<ToastType, string> = {
24-
info: 'alert',
25-
success: 'status',
26-
warning: 'alert',
27-
error: 'alert',
29+
info: 'button',
30+
success: 'button',
31+
warning: 'button',
32+
error: 'button',
2833
};
2934

3035
/**

0 commit comments

Comments
 (0)