如何修复react-slick中元素的Blocked aria-hidden警告？

我之前在使用react-slick的centerMode加懒加载组合时，也碰到过一模一样的警告，折腾了好一阵才摸清楚解决思路，结合你的场景给你分享几个靠谱的办法：

先搞懂警告的根源 #

这个提示是浏览器的无障碍校验机制触发的：当一个被标记为aria-hidden="true"的元素里面，存在当前获取了焦点的子元素时，就会抛出这个警告——因为无障碍规范明确要求，aria-hidden的元素应该完全对辅助技术隐藏，不能包含任何可聚焦的内容。react-slick在处理centerMode或者懒加载的slide时，会自动给部分容器加上aria-hidden，但没处理好焦点的位置，就踩了这个坑。

具体解决办法 #

方法1：滑动完成后主动修正焦点位置

利用react-slick的afterChange回调，每次滑动结束后，把焦点主动转移到当前可见的slide内部的可聚焦元素上，避免焦点停留在被标记为aria-hidden的容器里。

代码示例：

import Slider from "react-slick";
import { useRef } from "react";

const YourSlider = () => {
  const sliderRef = useRef<Slider>(null);

  const handleSlideChange = () => {
    // 找到当前居中激活的slide（对应你的centerMode配置）
    const activeSlide = document.querySelector('.slick-center');
    if (activeSlide) {
      // 优先找slide里的可聚焦元素（比如按钮、输入框）
      const focusableElement = activeSlide.querySelector<HTMLElement>(
        'button, a, input, [tabindex="0"]'
      );
      if (focusableElement) {
        focusableElement.focus();
      } else {
        // 如果没有可聚焦元素，给slide本身加tabindex后设置焦点
        (activeSlide as HTMLElement).setAttribute('tabindex', '0');
        (activeSlide as HTMLElement).focus();
      }
    }
  };

  return (
    <Slider
      ref={sliderRef}
      {...SliderSettings()}
      afterChange={handleSlideChange}
    >
      {/* 你的slide内容 */}
      <div>Slide 1 内容</div>
      <div>Slide 2 内容</div>
    </Slider>
  );
};

方法2：清理错误的aria-hidden属性

如果焦点不小心落到了被标记为aria-hidden的容器里，我们可以监听滑动事件，主动检查并移除这些错误的属性：

import Slider from "react-slick";
import { useRef, useEffect } from "react";

const YourSlider = () => {
  const sliderRef = useRef<Slider>(null);

  useEffect(() => {
    const fixAriaHiddenIssue = () => {
      const focusedEl = document.activeElement;
      if (!focusedEl) return;

      // 向上遍历父元素，找到带aria-hidden的容器
      let parentEl = focusedEl.parentElement;
      while (parentEl) {
        if (parentEl.getAttribute('aria-hidden') === 'true') {
          parentEl.removeAttribute('aria-hidden');
          break;
        }
        parentEl = parentEl.parentElement;
      }
    };

    // 绑定滑动完成事件
    const slickInstance = sliderRef.current?.getSlick();
    if (slickInstance) {
      slickInstance.$slider.on('afterChange', fixAriaHiddenIssue);
    }

    // 组件卸载时解绑事件
    return () => {
      if (slickInstance) {
        slickInstance.$slider.off('afterChange', fixAriaHiddenIssue);
      }
    };
  }, []);

  return (
    <Slider ref={sliderRef} {...SliderSettings()}>
      {/* 你的slides内容 */}
    </Slider>
  );
};

方法3：优化slide内部的可聚焦元素

针对懒加载的场景，在slide未激活时，把内部的可聚焦元素设置为不可聚焦（tabindex="-1"），激活时再恢复，这样焦点就不会落到未显示的slide里：

const SlideContent = ({ isActive }: { isActive: boolean }) => {
  return (
    <div>
      {/* 未激活时设置tabindex="-1"，避免被焦点选中 */}
      <button tabindex={isActive ? 0 : -1}>操作按钮</button>
      <input 
        type="text" 
        tabindex={isActive ? 0 : -1} 
        placeholder="仅激活时可输入" 
      />
    </div>
  );
};

// 在Slider组件中使用
const YourSlider = () => {
  const [activeIndex, setActiveIndex] = useState(0);

  const handleSlideChange = (index: number) => {
    setActiveIndex(index);
  };

  return (
    <Slider
      {...SliderSettings()}
      afterChange={handleSlideChange}
    >
      <SlideContent isActive={activeIndex === 0} />
      <SlideContent isActive={activeIndex === 1} />
      <SlideContent isActive={activeIndex === 2} />
    </Slider>
  );
};

结合你的配置补充说明 #

你当前设置了accessibility: false，这个确实能关闭react-slick自带的部分无障碍处理，但centerMode和懒加载的组合还是可能触发问题，上面的方法都可以和这个配置搭配使用。

备注：内容来源于stack exchange，提问作者Keyvan