react-aria useButton 钩子禁用辅助功能而不是支持它

Question

我正在将

react-aria

挂钩库集成到我的代码库中，以确保我的自定义组件正确满足所有 ARIA 可访问性要求。然而，我立即注意到，当我使用文档中描述的由库的

useButton

钩子生成的道具时，使用 Tab 聚焦的按钮不再在按下 Enter 或 Space 时执行其

onClick

事件，在集成库之前以前运行良好的功能。

下面的沙箱说明了该问题：按 Tab 键切换到绿色按钮（

RegularButton

组件）并按 Enter 或 Space 将触发

onClick

事件并呈现消息。但是，切换到红色按钮（

ButtonWithReactAria

组件）并按 Enter 或 Space 将不会发生任何事情。

https://codesandbox.io/p/sandbox/twilight-cloud-np66r3

有谁知道是什么原因导致这个问题吗？

Answer 1

来自文档

useButton

支持通过鼠标、键盘和触摸进行用户交互。您可以通过

onPress

属性处理所有这些。这与标准 onClick 事件类似，但经过标准化以同等支持所有交互方法。

因此，您需要做的就是将传递给

onClick

组件的

ButtonWithReactAria

属性更改为

onPress

，一切都会好起来的。请参阅这个分叉沙箱，我已经完全做到了这一点（并且没有进行任何其他更改），并且按钮现在可以按预期使用键盘和鼠标。

（我注意到这是一个 Typescriptcodesandbox，所以问为什么 Typescript 不阻止你在这里使用错误的 prop 是一个公平的问题。如果不深入研究所涉及的类型，我无法回答这个问题，因为我个人不是非常熟悉react-aria。不幸的是，TS 似乎无法保护您免受此错误的影响。但我优先考虑得到这个答案！）