📝 [RFC] Support aria-* in closable

[kiner-tang]

Summary

Sometimes, we need to add aria-* attributes to the close button of closable components to support accessibility. Therefore, we need to expand the closable type to support the configuration of aria-* attributes.

Motivation

As mentioned in allow change close aria-label we need to support the configuration of aria-* attributes for the close button.

The components that need to be supported are as follows:

• Alert feat: Alert support aria-* in closable #47474
• Drawer feat: Drawer support aria in closable #47543
• Message
• Modal feat: Modal support aria-* in closable #47650
• Notification feat: Notification support aria-* in closable #47710
• Tag feat: Tag support aria-* in closable #47678
• Tour feat: Tour support aria-* in closable react-component/tour#52

Support for static methods:

• Message
• Modal
• Notification

Some components need to be linked to transform rc-*, such as: Modal.

API

Type: closable: boolean | { [`aria-${string}`]: string, icon?: React.ReactNode }

closeIcon 作为语法糖不废弃

Basic Example

<Modal
  title="Basic Modal"
  open={isModalOpen}
  onOk={handleOk}
  onCancel={handleCancel}
  closable={{
    'aria-label': 'this is test aria label',
  }}
>
  <p>Some contents...</p>
  <p>Some contents...</p>
  <p>Some contents...</p>
</Modal>

[kiner-tang]

@zombieJ @MadCcc 我记得文档之前是故意把 closable 属性隐藏的，推荐用户使用 closeIcon，这次要不要再文档里面加回去呢？

[afc163]

推荐用户使用 closable={{ closeIcon: xx }}，保持对 closeIcon 的兼容就行。

[kiner-tang]

那也就是说，咱们文档里面把 closeIcon 去掉，并在文档中把 closable 加回去，然后对 closeIcon 是否需要走废弃流程呢？

[afc163]

废弃吧，closable 应该是更标准的推荐用法。

[afc163]

可以修改一下 https://github.com/ant-design/ant-design/wiki/API-Naming-rules#reference

[zombieJ]

会上的结论是 closeIcon 作为 closable 的语法糖，因为配置无障碍属性相对改 Icon 是个低频需求。多套一层用起来是比较麻烦的。不适合 warning 用户。