反应路由器：重新关注路由变化（可访问性）

Question

反应路由器：重新关注路由变化（可访问性）

Ala*_*uza 5 javascript accessibility reactjs react-router

我正在尝试改进现有应用程序的可访问性，并且我注意到当我的路线更改时，浏览器焦点保持不变。我的期望是让焦点回到页面的第一个元素上，这样我就可以利用跳过链接之类的东西。

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

更新1：

我尝试添加document.activeElement.blur()这似乎有帮助，但在 Chrome 中不起作用。

更新 2：

实际上即使在删除document.activeElement.blur()它之后它似乎也可以在 Safari 中工作。我想知道这是否与 browserHistory 相关react-router

Answer 1

Ala*_*uza 4

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

索引.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>

Run Code Online (Sandbox Code Playgroud)

索引.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);

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，3 月前
查看次数：	3921 次
最近记录：	6 年，11 月前