React+Mapbox按钮按空格键丢失原生焦点指示器问题求助

我们的应用基于React v18.1.0函数式组件开发，搭配Mapbox GL v1.0.0实现地图功能。其中的地图放大、缩小及重置缩放按钮遇到了一个异常：按空格键激活按钮后，按钮的视觉焦点指示器会消失，但按回车键触发时完全正常。按钮功能本身没问题，用户可以重复执行缩放操作，而且通过console.log(document.activeElement)能确认按钮仍处于激活状态。

按钮代码示例：

<Button
  tabIndex={isModalOpen || isShareOpen ? '-1' : '0'}
  onClick={() => map.zoomIn({ duration: 1000 })}
  aria-label="Increase Map Zoom"
  theme={theme}
>
  <ZoomInIcon color={controlsColor} />
</Button>

我试过手动查找元素调用.focus()、监听keydown/keyup事件判断Enter/Space等方法，都没法让焦点指示器保留。

1. 阻止空格键的浏览器默认行为 #

浏览器按下空格键时，默认会触发页面滚动等行为，这可能干扰了按钮的视觉焦点状态。在按钮的onKeyDown事件里直接阻止空格键的默认行为，并在事件中执行缩放逻辑：

const handleKeyDown = (e) => {
  if (e.code === 'Space') {
    e.preventDefault(); // 阻止默认滚动行为
    map.zoomIn({ duration: 1000 });
  }
};

<Button
  tabIndex={isModalOpen || isShareOpen ? '-1' : '0'}
  onClick={() => map.zoomIn({ duration: 1000 })}
  onKeyDown={handleKeyDown}
  aria-label="Increase Map Zoom"
  theme={theme}
>
  <ZoomInIcon color={controlsColor} />
</Button>

2. 添加自定义焦点样式 #

如果上面的方法无效，大概率是Mapbox的样式覆盖了按钮的默认焦点样式，或者浏览器默认焦点样式失效。给按钮添加高优先级的自定义焦点样式，确保视觉指示器始终可见：

/* 给按钮添加专属类名，比如map-control-btn */
.map-control-btn:focus {
  outline: 2px solid #2563eb; /* 自定义焦点边框颜色 */
  outline-offset: 2px;
  /* 也可以用阴影实现更柔和的效果 */
  /* box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4); */
}

注意要给按钮加上对应的类名，确保样式优先级足够，不会被其他样式覆盖。

3. 监听Mapbox缩放结束事件，强制重聚焦 #

Mapbox在执行缩放动画时，可能会把焦点偷偷转移到地图容器上。可以监听Mapbox的zoomend事件，在缩放动画完成后重新让按钮聚焦：

import { useRef, useEffect } from 'react';

// 定义按钮的ref
const zoomInBtnRef = useRef(null);

useEffect(() => {
  if (!map) return;

  const handleZoomEnd = () => {
    // 缩放结束后强制按钮聚焦
    zoomInBtnRef.current?.focus();
  };

  map.on('zoomend', handleZoomEnd);
  // 组件卸载时移除事件监听
  return () => map.off('zoomend', handleZoomEnd);
}, [map]);

// 按钮绑定ref
<Button
  ref={zoomInBtnRef}
  tabIndex={isModalOpen || isShareOpen ? '-1' : '0'}
  onClick={() => map.zoomIn({ duration: 1000 })}
  aria-label="Increase Map Zoom"
  theme={theme}
>
  <ZoomInIcon color={controlsColor} />
</Button>

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