为何React给标签添加onClick事件时不自动设置可聚焦、button ARIA角色与按键事件？

• 保持与原生DOM行为一致
  onClick是所有DOM元素原生支持的事件，并非按钮专属。比如点击蒙层关闭弹窗、点击区域统计曝光等场景，绑定onClick的元素不需要支持聚焦、也不需要按钮角色，如果React自动添加属性，反而会破坏原有交互逻辑，甚至给屏幕阅读器用户造成干扰，把非交互元素误识别为按钮。
• 优先鼓励使用原生语义化标签
  原生<button>标签本身就自带所有你需要的可访问性特性：默认支持Tab聚焦、自带button ARIA角色、默认支持回车/空格触发点击事件，不需要额外手动绑定任何属性。React官方更推荐优先使用原生语义标签实现交互，而不是用div、span等非语义标签模拟按钮，这才是成本最低、正确性最高的可访问性实践。
• 框架无法自动判断元素的交互语义
  同样是绑定onClick的div，可能是按钮、可能是可点击的卡片链接、也可能是仅响应点击的装饰元素，框架没有能力准确判断元素的实际语义，自动加属性反而会出现大量不符合预期的错误。

你嫌手动加属性繁琐的话，可以自行封装一个可复用的可访问按钮组件，把role="button"、tabindex="0"、键盘事件绑定、点击回调的逻辑都封装到组件内部，业务中使用时直接调用组件即可，不需要重复写属性。示例封装逻辑参考：

const AccessibleButton = ({ onClick, children, ...rest }) => {
  const handleKeyPress = (e) => {
    // 同时支持回车和空格触发，符合按钮的标准交互规则
    if (e.keyCode === 13 || e.keyCode === 32) {
      e.preventDefault();
      onClick?.();
    }
  };
  return (
    <div
      role="button"
      tabIndex={0}
      onClick={onClick}
      onKeyPress={handleKeyPress}
      {...rest}
    >
      {children}
    </div>
  );
};

你对可交互元素的可访问性要求的理解是正确的：作为按钮使用的交互元素必须可聚焦、支持键盘操作、有正确的ARIA角色。只是这个判断逻辑需要开发者根据实际业务语义实现，框架没办法自动做通用处理。

内容的提问来源于stack exchange，提问作者Noname