Mantine 通知组件中 role 属性的定制化配置

在 Mantine 这个流行的 React UI 组件库中，通知(Notifications)组件默认会使用 role="alert" 属性。这个设计选择在无障碍访问(A11Y)方面有其特定的考量，但开发者有时需要根据实际场景调整这一属性。

问题背景

Mantine 的通知系统默认会将通知元素的 ARIA 角色设置为 "alert"。这在大多数情况下是合理的，因为：

1. 通知通常包含需要用户立即注意的重要信息
2. "alert" 角色会立即中断屏幕阅读器的当前输出
3. 确保重要信息不会被用户忽略

然而，在某些场景下，开发者可能需要将角色改为 "status"，特别是当通知内容：

• 不是紧急的
• 不需要立即打断用户当前操作
• 只是提供状态更新而非关键警报

技术实现细节

在 Mantine 7.16.0 版本中，尝试通过 notifications.show({ message: "my message", role: "status" }) 来修改角色属性并未生效。这是因为底层实现中 role 属性没有被正确地从配置对象传递到 DOM 元素。

解决方案

Mantine 团队在 7.17.5 版本中修复了这个问题。现在开发者可以通过以下方式自由定制通知的 ARIA 角色：

notifications.show({
  message: "操作成功完成",
  role: "status" // 或其他有效的 ARIA 角色
});

无障碍访问最佳实践

在选择通知角色时，应考虑以下准则：

1. alert：适用于必须立即引起用户注意的关键信息，如错误、系统故障等
2. status：适用于非关键的状态更新，如"保存成功"、"上传完成"等
3. log：适用于需要保留历史记录的通知流

技术实现原理

在修复后的版本中，Mantine 内部做了以下改进：

1. 将 role 属性从通知配置对象中提取
2. 确保该属性被正确传递到渲染的 DOM 元素
3. 保持向后兼容性，默认值仍为 "alert"

升级建议

对于需要此功能的项目：

1. 升级到 Mantine 7.17.5 或更高版本
2. 检查现有通知的使用场景，合理设置 role 属性
3. 进行无障碍测试，确保屏幕阅读器行为符合预期

这个改进体现了 Mantine 团队对开发者需求和无障碍访问的持续关注，使得通知系统更加灵活和可定制。