fkhadra / fkhadra/react-toastify

🐛 Bug Report / 💡 Feature Request

Open
#1,243 1 comment 1 reaction 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.