React富内容可点击区块合规实现：SonarCloud报错解决方案咨询

方案1：使用原生<button>元素（推荐） #

很多开发者误以为<button>只能容纳文本，实际上它完全支持嵌套div、图片等复杂内容，这是SonarCloud推荐的合规方案。原生button自带完整的无障碍特性（键盘导航、焦点管理、语义化），无需手动配置role、tabIndex。

示例代码：

import React from 'react';

const ClickableCard = React.forwardRef(({ ariaLabel, onClick, children, ...otherProps }, ref) => {
  return (
    <button
      ref={ref}
      aria-label={ariaLabel}
      onClick={onClick}
      {...otherProps}
      style={{ border: 'none', background: 'transparent', padding: 0, cursor: 'pointer' }}
    >
      {children}
      {/* 可嵌套任意复杂内容：div、img、段落等 */}
    </button>
  );
});

export default ClickableCard;

只需重置button的默认边框、背景等样式，就能让它适配卡片的视觉需求，同时保留原生无障碍能力，彻底解决SonarCloud的报错。

方案2：完善<div>的无障碍交互（若必须用div） #

如果因特殊样式限制无法使用button，需要为div补全所有原生button的交互行为，确保无障碍合规，让SonarCloud认可：

• 处理键盘事件：监听keydown，按下Enter或Space键时触发点击逻辑
• 维护焦点状态：禁用时移除tabIndex，避免无效聚焦
• 补充完整ARIA属性：如aria-disabled标识禁用状态

示例代码：

import React from 'react';

const ClickableCard = React.forwardRef(({ ariaLabel, onClick, disabled = false, children, ...otherProps }, ref) => {
  const handleKeyDown = (e) => {
    if (disabled) return;
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      onClick?.();
    }
  };

  return (
    <div
      ref={ref}
      role="button"
      tabIndex={disabled ? -1 : 0}
      aria-label={ariaLabel}
      aria-disabled={disabled}
      onClick={disabled ? undefined : onClick}
      onKeyDown={handleKeyDown}
      {...otherProps}
      style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}
    >
      {children}
    </div>
  );
});

export default ClickableCard;

补全所有交互逻辑后，SonarCloud会认可该实现的无障碍合规性，不再抛出错误。

方案3：导航类卡片用<a>/React Router <Link> #

如果卡片用于导航跳转（而非触发操作），使用语义化的<a>标签（或React Router的<Link>）是更合适的选择，它支持复杂内容嵌套，且自带无障碍特性：

示例代码（React Router场景）：

import React from 'react';
import { Link } from 'react-router-dom';

const NavigationCard = React.forwardRef(({ to, ariaLabel, children, ...otherProps }, ref) => {
  return (
    <Link
      ref={ref}
      to={to}
      aria-label={ariaLabel}
      {...otherProps}
      style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}
    >
      {children}
      {/* 嵌套复杂内容 */}
    </Link>
  );
});

export default NavigationCard;

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