打开Foundation Reveal模态框时聚焦Slick幻灯片以启用keybindings

我给你整理了两个实用的解决方案，既能处理焦点问题，也能支持全局快捷键，同时兼容多个图库的场景：

方案一：模态框打开时主动设置焦点到幻灯片 #

这个思路很直接——当Reveal模态框打开时，我们手动把焦点移到当前激活的Slick幻灯片上，这样默认的Slick快捷键就能正常工作了。

实现步骤： #

1. 监听Reveal的reveal:opened事件（这是Reveal提供的官方事件，用来捕获模态框打开的时机）
2. 在事件回调里，找到当前模态框内的Slick轮播容器
3. 定位到激活的幻灯片，给它添加可聚焦属性（如果没有的话），然后设置焦点

// 监听Reveal模态框打开事件
document.addEventListener('reveal:opened', function(event) {
  const modalElement = event.target;
  // 替换成你的Slick轮播容器类名
  const slickContainer = modalElement.querySelector('.slick-slider');
  
  if (slickContainer) {
    const activeSlide = slickContainer.querySelector('.slick-active');
    if (activeSlide) {
      // 给幻灯片添加tabindex，确保它可以被聚焦（tabindex="-1"不会让它出现在Tab导航里）
      if (!activeSlide.hasAttribute('tabindex')) {
        activeSlide.setAttribute('tabindex', '-1');
      }
      // 设置焦点到激活幻灯片
      activeSlide.focus();
    }
  }
});

方案二：设置全局快捷键，精准控制当前模态框内的图库 #

如果不想依赖焦点，也可以直接给整个页面绑定左右箭头的全局事件，然后判断当前打开的模态框，只操作框内的Slick轮播。这个方案更稳定，不用担心焦点丢失的问题。

实现步骤： #

1. 监听document的keydown事件，只响应左右箭头键
2. 找到当前处于打开状态的Reveal模态框（通过aria-hidden="false"属性判断，这是Reveal默认添加的状态属性）
3. 定位到模态框内的Slick实例，调用Slick的切换方法
4. 切换完成后，可选地把焦点移到新的激活幻灯片，提升交互体验

document.addEventListener('keydown', function(e) {
  // 只处理左右箭头键，其他按键忽略
  if (!['ArrowLeft', 'ArrowRight'].includes(e.key)) return;
  
  // 找到当前打开的Reveal模态框
  const activeModal = document.querySelector('.reveal[aria-hidden="false"]');
  if (!activeModal) return;
  
  // 替换成你的Slick轮播容器类名
  const targetSlider = activeModal.querySelector('.slick-slider');
  if (!targetSlider) return;
  
  // 阻止默认行为，避免页面跟着滚动
  e.preventDefault();
  
  // 调用Slick的切换方法
  if (e.key === 'ArrowLeft') {
    $(targetSlider).slick('slickPrev');
  } else {
    $(targetSlider).slick('slickNext');
  }
  
  // 切换后自动聚焦到新的激活幻灯片（可选，提升体验）
  setTimeout(() => {
    const newActiveSlide = targetSlider.querySelector('.slick-active');
    if (newActiveSlide) {
      if (!newActiveSlide.hasAttribute('tabindex')) {
        newActiveSlide.setAttribute('tabindex', '-1');
      }
      newActiveSlide.focus();
    }
  }, 100);
});

注意事项： #

• 记得把代码里的.slick-slider替换成你实际使用的Slick容器类名，如果有多个不同类名的图库，可以调整选择器逻辑
• 给幻灯片添加tabindex="-1"不会影响页面的正常Tab导航，因为这个值表示元素只能通过JS聚焦，不会被Tab键选中
• 如果你的页面有多个Reveal模态框，方案二里的[aria-hidden="false"]选择器能准确找到当前打开的那个，不会干扰其他模态框里的图库

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