アクセシビリティ - クリックイベントは、私はすべての私のonClickイベントがOnKeyDownイベントの隣にあることを確認したいキーイベント

Question

を持っていることを確認し反応します。

私はこれを保証するために、eslint-プラグインJSX-a11yを使用します。 しかし、コードでは、これは一般的なやり方です。私はすべての時間を行うには迷惑だろう、意味：

if(event.keyCode === 13){ 
    ... 
} 

私はonKeyDownメソッド内の場合には、ユーザーがのonClickで関数を実行使用することを要素を指示する方法を持っていると思います。または、同様の解決策 http://www.karlgroves.com/2014/11/24/ridiculously-easy-trick-for-keyboard-accessibility/

たとえば、私はこれを明確にしています。これを自動的に行う指示に行きましょう。しかし、リアクトでは私は最良のアプローチがわからない。

---

eslintルール： https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md

Answer 1

最後に、私は唯一の2つのソリューションを参照してください。

1を私はすべてのそれらのアクションをカプセル化するコンポーネントを作成することができます...しかし、これはボタンの作品です。そして私は、これはただの例外のためであり、これはプロジェクト内部の悪質な振る舞いを作成することができ、私のプロジェクトにボタンを作成するための新しい方法を開くことがないしたいです。そして、そのために、私たちは別のコンポーネント...]ボタン:)

2を持っているアクションのデコレータを作成します。

export function a11yButtonActionHandler(target, key, descriptor) { 
    const fn = descriptor.value; 
    if (typeof fn !== 'function') { 
     throw new Error(`@a11yButtonActionHandler decorator can only be applied to methods not: ${typeof fn}`); 
    } 

    descriptor.value = function actionHandler(event) { 
     if (!event || event.type === 'click' || 
      (['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key)) 
     ) { 
      fn.call(this, event); 
     } 
    }; 

    return descriptor; 
} 

デコレータを使用してください。

@a11yButtonActionHandler 
myAction(element) { 
... 
} 

---

<div className="element-with-very-good-excuse-to-dont-be-a-button" 
    role="button" 
    tabIndex="0" 
    onKeyDown={ this.myAction } 
    onClick={ this.myAction }> 

Answer 2

私はあなたがそれを処理するために状態を使用することをお勧め。たとえば：

まず、コンポーネントの状態を初期とイベントリスナーを設定します。

getInitialState(){ 
    window.addEventListener("keypress", this.onKeypresshandler);// if you are not rendering on server side, you cannot bind the listener to the element you want, which doesn't exist yet. 
    return{ 
     isPressed: false 
    } 
} 

そして、鍵KeyPressイベントが呼び出されたときの状態を変更します。最後に

onKeypresskhandler(e){ 
    if(e.keyCode === 13){// if the key is enter 
     this.setState({isPressed:true}) 
    } 
} 

、あなたの機能を実行する前に状態を確認してください。

YourFunction(){ 
    if(this.state.isPressed){// check if the key is pressed 
    ... // the code you want to execute 
    } 
} 

これは私が知っている最も簡単な方法です。私はそれが助けて欲しい