javascript - 如果单击链接后解决了某些异步条件，是否有一种可访问的方式告诉用户界面的某些部分可以重定向到其他页面？

Question

假设我有以下组件

function ClickButton(props) {
  const history = useHistory();

  const onClick = () => {
    history.push('/next-page');
  };

  return <button onClick={onClick}>Go to next page</button>;
}

更易于访问的版本是使用 react-router 中的 Link，如下所示

function ClickButton(props) {
  return (
    <Link to="/next-page">
      <span>Go to next page</span>
    </Link>
  );
}

但是，如果重定向取决于一些 http 调用的成功，比如

function ClickButton(props) {
  const history = useHistory();

  const onClick = async () => {
    try {
      await axios.get('https://google.com')
      history.push('/next-page');
    } catch(err) {
      setAlertMessage('Google can't be reached - check your internet connection');
    }
  };

  return <button onClick={onClick}>Go to next page</button>;
}

在 onClick 事件的异步处理程序的情况下，在这里使用 Link(或其他屏幕阅读器将视为类似链接的东西)的等价物(并且是否有一些语义上有意义的方式) ？

Answer 1

我可能会选择使用 Link 组件，因为从语义上讲它最有意义。您可以使用 button 元素，但是您需要添加所有适当的辅助功能属性，即 role="link" 和正确的点击和按键事件处理程序等...

您可以将 onClick 处理程序添加到 Link 并进行相同的检查。关键是最初阻止默认链接行为。

const ClickButton = props => {
  const history = useHistory();

  const onClick = async e => {
    e.preventDefault();
    try {
      await axios.get("https://google.com"); // NOTE *
      history.push("/next-page");
    } catch (err) {
      alert("Google can't be reached - check your internet connection");
    }
  };

  return (
    <Link to="/next-page" onClick={onClick}>
      <span>Go to next page</span>
    </Link>
  );
};

* 注意:这个 GET 请求似乎在 codesandbox 中失败了。