fkhadra / fkhadra/react-toastify
🐛 Bug Report / 💡 Feature Request
- Dominant language
- TypeScript
- Stars
- 13.4k
- Forks
- 741
- PR merge metrics
- No merged PRs in 30d
Description
**Title**: Restrict `role` prop to valid ARIA roles for toasts: `"alert"`, `"status"`, or `"log"`
---
**Current behavior**
The `role` prop on the `` component (as defined [here in `types.ts`](https://github.com/fkhadra/react-toastify/blob/e1fa4760cea8adf28d5cf93cd14067a852b1f5c8/src/types.ts#L124)) accepts `string`, meaning it can accept any value, including invalid or unintended roles.
```ts
role?: string;
```
---
**Expected behavior**
To improve accessibility and developer experience, the `role` prop should be restricted to valid ARIA roles applicable for toasts:
* `"alert"` (for urgent messages)
* `"status"` (for non-urgent status updates)
* `"log"` (for streaming messages/logs)
Suggested type definition:
```ts
role?: 'alert' | 'status' | 'log';
```
This change:
* Prevents accidental use of inappropriate roles (like `"tooltip"` or `"dialog"`).
* Aligns with WAI-ARIA spec and screen reader behavior.
* Helps enforce accessible patterns by default.
---
**Why this matters**
Toasts are accessibility-critical components that announce messages to screen readers. Restricting the `role` ensures proper usage and improves reliability for assistive technology users.
---
**Suggested fix**
Update the `ToastPosition` type in [`[types.ts](https://github.com/fkhadra/react-toastify/blob/e1fa4760cea8adf28d5cf93cd14067a852b1f5c8/src/types.ts#L124)`](https://github.com/fkhadra/react-toastify/blob/e1fa4760cea8adf28d5cf93cd14067a852b1f5c8/src/types.ts#L124) to:
```ts
role?: 'alert' | 'status' | 'log';
```
---
**Additional context**
More about ARIA live regions:
* [ARIA `alert`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role)
* [ARIA `status`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Status_Role)
* [ARIA `log`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Log_Role)
Happy to contribute a PR if needed!
Contributor guide
Research direction
Start in src/types.ts at the ToastPosition type linked by the issue and inspect how the Toast role prop is declared. The work is done when the prop accepts only "alert", "status", or "log", and TypeScript type checking confirms the restriction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100