.focus() 不工作，浏览器一直关注 body

Question

我目前正在为我们公司的 React 模块开发可访问性。虽然我只是一个业余爱好的网络开发者，但我还是很想解决这个问题。

发生的事情是：

我们有一个有 6 个步骤的模块，点击下一步按钮后它应该在安装后跳到下一步的顶部，这似乎没有任何效果，它一直聚焦 body.

我试过的：

我使用了 useRef() 并且当我记录引用的元素时它正常工作，但是当我使用 focusRef.current.focus() 什么都没发生。
在控制台的 document.activeElement 中，它在安装新元素后显示 body 作为活动元素。
NerdeFocus（焦点插件）也将 body 显示为焦点
我也试过只选择带有 document.getElementById("focusRef") 的元素但没有结果

第一步代码：

export default function Step1(props) {
  const focusRef = useRef();

  useEffect(() => {
    focusRef.current.focus();
  }, []);

  const {
    reservationItems,
    setStep,
    setSelectedReservation,
    step,
    setAddresses,
    setSelectedAddress,
  } = props;
  const classes = useStyles();

  function onSelectReservation(reservation) {
    setSelectedReservation(reservation);
    setStep(2);
  }
  return (
    <>
      <Typography variant="srOnly">
        Stap 2, kies waar u wilt reserveren
      </Typography>
      <h1 ref={focusRef} className={classes.title}>
        Kies waar u wilt reserveren
      </h1>
      <div className={classes.addressButtons}>
        {reservationItems?.map((reservation, i) => {
          return (
            <div
              key={i}
              className={classes.addressButton}
              onClick={() => onSelectReservation(reservation)}
            >
              <span>{reservation.Description}</span>
              <span>
                {reservation.Street +
                  ' ' +
                  reservation.Housenumber +
                  ' ' +
                  reservation.City}
              </span>
            </div>
          );
        })}
      </div>

      <Button
        className={classes.buttonPrev}
        variant="contained"
        startIcon={<KeyboardArrowLeftIcon />}
        onClick={() => {
          setStep(step - 1);
          setAddresses([]);
          setSelectedAddress([]);
        }}
      >
        Terug
      </Button>
    </>
  );
}

我希望有人能帮助我解决这个问题，在此先感谢汤姆。

Answer 1

我无法在 React 方面发言，但一般来说，对于单页应用程序 (SPA)，当您进入下一步时，您希望将焦点移至下一步的新标题。听起来这就是你想要做的。

对于 non-React 个应用程序，这可以正常工作。也许 React 存在时间问题？当您调用 focus() 时，您尝试将焦点 移动到 的元素是否存在于 DOM 中？

在某些浏览器中，您无法将焦点移至 non-interactive 元素 ，除非 该元素具有 tabindex="-1"。我在您的示例代码中没有看到 tabindex，所以这可能就是问题所在。

例如，如果我有：

<h1 id="myID">Step 2 of the process</h1>

我试着打电话给

document.getElementById('myID').focus();

一些浏览器不会将焦点移动到标题。但是，如果我将 HTML 更改为：

<h1 id="myID" tabindex="-1">Step 2 of the process</h1>

然后就可以了。

.focus() 不工作，浏览器一直关注 body

.focus() not working, browser keeps focusing the body

html

accessibility

focus

reactjs