为 Button 添加对 `accessibleWhenDisabled` 的支持

说明

在“按钮”中添加“在残疾时无障碍”道具,使一个已禁用的按钮能够聚焦,并便于辅助技术使用。

启用后,Chakra将使用aria-disabled='真'而不是当地disabled'属性。

问题说明/理由

目前,当一个按钮被禁用时,例如在进入加载状态时,它会失去焦点,因为原生的被禁用属性会从焦点顺序中移除.

点击按钮后,理想的做法是,在动作进行中时,重点应放在同一个控制上,而不是在禁用变为真实时丢失。

我认为这种行为除了加载/待用按钮以外有用,所以一个通用的API比专门绑在正中或加载状态上的东西更有意义.

Ariakit使用在残疾时可使用 ' 的名称,我宁愿使用这个名称,也不愿使用类似在残疾时可使用 ' 的名称。 它描述了行为的用意而不是一个特定的后果.

建议的解决方案或API

在残疾道具时添加可访问性 :

< 按钮已禁用, 当已禁用 >
提交
</按钮>

< 禁用时按钮加载 >
提交
</按钮>

没有道具,当前的行为保持不变:

< 按钮已禁用 >
提交
</按钮 >

当Chakra无法进入时,

<按钮 aria- disabled="真" >
提交
</按钮 >

Chakra还需要防止在aria-disabled="真'时触发按钮的行为,因为aria-disabled'本身并不妨碍互动。

替代品

如果这个行为被采纳,也可能值得考虑在Zag.js按钮机中执行. 当前按钮执行已经包含关于禁用状态和加载状态的交互逻辑,将这种行为移入共享状态机器可以减少特定框架的代码,同时让基于Zag.js的所有框架都能提供该特性.

补充信息

类似的 API / 讨论 :

https://ariakit.com/reference/button#accessed when Disabled https://ariakit.com 引用/按钮#accessed when Disabled

• Base UI 在加载时讨论为按钮保留焦点: https://base-ui.com/react/ 组件/按钮#装入状态
• 迭戈·哈兹的相关讨论: https://x.com/diegohaz/status/20186960304324325482 (中文(简体) )