リアクタ・ルータ：経路変更のフォーカスをリセットする（アクセシビリティ）

私の既存のアプリケーションでアクセシビリティを向上させようとしていて、ルートが変更されたときにブラウザのフォーカスが変わらないことに気付きました。私の期待は、フォーカスをページ上の最初の要素に戻すことでした。そのため、スキップリンクやそのようなものを利用することができます。リアクタ・ルータ：経路変更のフォーカスをリセットする（アクセシビリティ）

質問：反応ルータを使用してブラウザのフォーカスをリセットする方法がありますか？

UPDATE 1：

私は助けるように思われdocument.activeElement.blur()を追加しようとしたが、Chromeで動作していません。

UPDATE 2：実際

でもdocument.activeElement.blur()を削除した後、Safariで動作しているようです。これは私がのために行くことになった解決策は、私がtabindex="-1"を持っているとonUpdate内document.getElementById('content').focus()を呼び出すための容器を反応更新することでしたreact-router

出典

2016-06-22 Alan Souza

だから、ルータのナビゲーションでJSを呼び出す方法を見つけますか？ –

私は、他のものに 'onUpdate'を使ってきました。 –

からbrowserHistoryに関連したものだのだろうか。これは私にとってハックのように感じるので、これが正しい解決策であるかどうかはわかりません。

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

出典

2016-06-22 01:57:38

ハックには2つの部分があります。 1）tabindexを-1に設定します。これはハッキーではありません、あなたはいつも普通に焦点を当てることができないどこかに置くことになります（ボタン、リンクなどではない要素）。 2）あなたのReactアプリの中から外部の要素に焦点を合わせる。これは実際には少し汚いと主張することができます。 'element.focus（）'を呼び出すことでそれを少し少なくすることはできますが、それはまだ同じです。または、あなたのルータを別のjsx要素にラップし、その要素にフォーカスを当てます（ヒントは 'ref'を使います）。 – Tieme

リアクタ・ルータ：経路変更のフォーカスをリセットする（アクセシビリティ）

答えて

関連する問題