Question

我正在尝试改善现有应用中的辅助功能，我注意到当我的路线发生变化时，浏览器焦点保持不变。我的期望是重点放在页面的第一个元素中，以便我可以利用跳过链接等类似的东西。

问题：有没有办法使用react-router重置浏览器焦点（模拟页面刷新）？

更新1：

我尝试添加document.activeElement.blur()这似乎有所帮助，但无法在Chrome中使用。

更新2：

实际上，即使删除document.activeElement.blur()后，它似乎也适用于Safari。我想知道这是否与react-router

中的browserHistory有关

Answer 1

我最终选择的解决方案是更新我的反应容器以tabindex="-1"并在document.getElementById('content').focus()内调用onUpdate。这对我来说就像是一个黑客，所以我不确定这是否是正确的解决方案。

<强>的index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta charset="UTF-8">
  <title>Todo App</title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta name="mobile-web-app-capable" content="yes">
</head>
<body>
  <div id="content" tabindex="-1" />
  <script src="index.js"></script>
</body>
</html>

<强> index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, browserHistory } from 'react-router';

import routes from './routes';

let element = document.getElementById('content');
ReactDOM.render(<Router onUpdate={() => document.getElementById('content').focus()}
  history={browserHistory} routes={routes} />, element);

Answer 2

这个问题有点老了，但我仍然会分享我所做的事情。我在想让重点放在导航上的组件上使用了autofocus道具。我认为在React上使用道具比访问更自然

反应路由器：重置路线变化（可访问性）

2 个答案: