如何为React-leaflet地图标记添加无障碍tab导航与ARIA支持

问题根因 #

你直接给React-Leaflet的Circle组件加tabIndex和ARIA属性不生效，是因为这些属性默认不会透传到组件最终渲染的真实SVG路径DOM上，且SVG元素默认不参与Tab导航序列，加上Leaflet自带的地图键盘交互会拦截部分按键事件，所以导致标记无法被聚焦。

实现Tab导航与屏幕阅读器支持的方案 #

你可以通过手动获取Circle组件的原生DOM，手动绑定属性与键盘事件来实现需求，修改后的代码如下：

1. 修改标记生成逻辑

const showDataOnMap = (countryList, y) => (
  countryList.map(country => {
    const circleRef = useRef(null);
    
    useEffect(() => {
      if (circleRef.current) {
        // 获取Circle渲染出的真实SVG路径元素
        const svgElement = circleRef.current._path;
        if (svgElement) {
          // 加入Tab导航序列
          svgElement.setAttribute('tabindex', '0');
          // 设置动态ARIA标签，内容和弹出框信息一致，方便屏幕阅读器朗读
          const ariaLabel = `${country.country}，${y}数据：${numeral(country[y]).format("0,0")}`;
          svgElement.setAttribute('aria-label', ariaLabel);
          svgElement.setAttribute('role', 'button');
          // 支持回车、空格触发点击事件，打开对应弹出框
          svgElement.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
              e.preventDefault();
              circleRef.current.fireEvent('click');
            }
          });
        }
      }
    }, [country, y]);

    return (
      <Circle
        ref={circleRef}
        key={country.country}
        center={[country.countryInfo.lat, country.countryInfo.long]}
        fillOpacity={0.4}
        pathOptions={{
          color: casesTypeColors[y].hex,
          fillColor: casesTypeColors[y].hex
        }}
        radius={Math.sqrt(country[y] * 12000)}
        eventHandlers={{
          click: () => {
            // 点击/键盘触发后自动打开弹出框，并聚焦到弹出框内容
            mapRef.current.openPopup();
            setTimeout(() => {
              mapRef.current._contentNode.setAttribute('tabindex', '0');
              mapRef.current._contentNode.focus();
            }, 100);
          },
        }}
      >
        <Popup aria-live="polite" ref={mapRef}>
          <div>
            <img 
              className="mapFlag" 
              src={country.countryInfo.flag} 
              alt={`${country.country}国旗`}
              role="image"
            />
            {country.country}
          </div>
          <p>
            {`${y}: ${numeral(country[y]).format("0,0")}`}
          </p>
        </Popup>
      </Circle>
    )
  })
)

2. 修改地图渲染逻辑

return (
  <div 
    className="map" 
    aria-label={`${active}类型全球数据地图`} 
    tabIndex="0"
  >
    {/* 关闭Leaflet默认的键盘平移控制，避免和标记的Tab导航冲突 */}
    <MapContainer center={coords} zoom={2} keyboard={false}>
      <TileLayer
        attribution='&copy; OpenStreetMap contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        aria-hidden="true"
      />
      {showDataOnMap(table, checkActive())}
    </MapContainer>
  </div>
)

注意：去掉了外层div的role="application"属性，这个属性会让屏幕阅读器切换到应用交互模式，拦截默认的文本朗读逻辑，除非你完全自定义了所有键盘交互规则，否则不建议添加

兼容老版本屏幕阅读器的备选方案 #

如果遇到部分旧设备上SVG元素无法被聚焦的问题，可以在地图组件外新增一组视觉隐藏的按钮，和地图标记一一对应，按钮内容和对应标记的ARIA标签一致，用户按Tab时会依次聚焦这些隐藏按钮，同时同步高亮地图上对应的标记，这种方案兼容性更好。

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