gpt4 book ai didi

javascript - react 路由器 : reset focus on route change (accessibility)

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:57:01 26 4
gpt4 key购买 nike

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

问题:有没有办法使用 react-router 重置浏览器焦点(模拟页面刷新)?

更新 1:

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

更新 2:

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

的 browserHistory 有关

最佳答案

我最终寻求的解决方案是更新我的 React 容器以具有 tabindex="-1" 并调用 document.getElementById('content').focus()onUpdate 中。这对我来说感觉像是一个 hack,所以我不确定这是否是正确的解决方案。

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);

关于javascript - react 路由器 : reset focus on route change (accessibility),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37956513/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com