search

ant-design / ant-design

An enterprise-class UI design language and React UI library
https://ant.design
MIT License
90.98k stars 47.46k forks source link

Modal Close Button aria-label Not Correctly Translated for "de" Locale #49554

Open masoudamri1959 opened 1 week ago

masoudamri1959 commented 1 week ago

Reproduction link

Edit on StackBlitz

Steps to reproduce

  1. Set the locale to "de" (German) using the ConfigProvider component.
  2. Create a modal using the Modal component.
  3. Open the modal and inspect the close button using the Chrome Accessibility panel or with NVDA screen reader hovering over the close button.
  4. Check the aria-label attribute for the close button in the modal.
  5. The aria-label is currently in English.

What is expected?

When the locale is set to "de" (German), the aria-label for the modal close button should be translated correctly to German. For instance, the translation for "Close" in German is "Schließen". Therefore, the aria-label should be "Schließen" instead of "Close".

Please fix this issue or add a feature that allows us to customize this text directly from the modal component.

Modal UI

Modal Chrome Html

Modal Chrome Accessibility

In this images, the aria-label for the close button should be "Schließen" when the locale is set to "de".

What is actually happening?

The aria-label for the modal close button is not translated when the locale is set to "de" (German).

Environment Info
antd 5.17.4
React 18.3.1
System Windows 11
Browser Google Chrome 126.0.6478.61
github-actions[bot] commented 1 week ago

Hello @masoudamri1959. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @masoudamri1959，我们完全同意你的提议/反馈，欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。

giphy

stackblitz[bot] commented 1 week ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

lijintao950830 commented 1 week ago

@afc163 这个问题是出在Antd-Modal的closable仅支持boolean类型，但在rc-dialog的closable支持object去修改aria-label，但不知道这样去做否合理？ image dialog