タブ付きフォーカスのキャプチャ/適切なぼかし

Question

アクセシビリティのために、私はモーダル内でタブ順序をキャプチャするためにタブ付きfocusとblurイベントをキャプチャしようとしています。

何らかの理由で私は奇妙なブラウザの動作に慣れています。私のコンポーネントの内部

私は、次のコードを持っている：

// On Init 
ngOnInit(){ 

    // Get all of the buttons and anchors in the modal 
    var buttons = this.modal.nativeElement.querySelectorAll("button, a"); 

    // Get the number of buttons 
    var numButtons = buttons.length; 

    // Get the last button 
    var lastButton = buttons[numButtons - 1]; 

    // When the last button loses focus 
    lastButton.addEventListener("blur", (e: any) => { 

     // Prevent Default 
     e.preventDefault(); 

     // Focus on the modals close button 
     this.focusCloseButton(); 
    }) 
} 

を技術的に、これは完璧に動作します。 this.focusCloseButtonへの呼び出しの後にアクティブな要素をログアウトすると、実際に閉じるボタンへの参照が得られます。

ただし、タブは実際に最初の要素が何であれブラウザ自体に移動します。 Chromeの場合、これはURLバーの左側にある[サイト情報の表示]ボタンです。 Firefoxでは、これはタブのリストの最初のタブです。

ブラウザがタブプレスをハイジャックしないように、これを正しくキャプチャするにはどうすればよいですか？

Answer 1

明らかに、ブラウザが引き継ぐ前に、blurイベントが遅すぎてキャプチャされません。

代わりに、タブキーが押されたことを検出するためにキーバインディングを使用し、そこからキャプチャを行いました。疑問を抱いてそれらのための

// The OnInit function handles capturing tab order 
ngOnInit(){ 

    // All of the buttons and links in the modal 
    var buttons = this.modal.nativeElement.querySelectorAll("button, a"); 

    // The first button or link in the modal 
    var firstButton = buttons[0]; 

    // The last button or link in the modal 
    var lastButton = buttons[buttons.length - 1]; 

    // Listen for keydown events on the modal 
    this.modal.nativeElement.addEventListener("keydown", (e: any)=> { 

     // If the key pressed was the tab button 
     if (e.keyCode === 9 && !e.shiftKey) { 

      // If the currently active element is the last button 
      if (document.activeElement == lastButton){ 

       // Prevent default action 
       e.preventDefault(); 

       // Put focus on the close button 
       this.focusCloseButton(); 
      } 
     } else if (e.keyCode === 9 && e.shiftKey === true){ 

      // If the key pressed was shift+tab 
      // And the currently active button is the close button 
      if (document.activeElement == firstButton){ 

       // Prevent Default 
       e.preventDefault(); 

       // Focus the last button 
       lastButton.focus(); 
      } 
     } 
    }) 
} 

this.focusCloseButtonが何をするか：

// Puts focus on the close button 
focusCloseButton: Function = function(){ 
    this.closeButton.nativeElement.focus(); 
}; 

closeButtonへの参照がViewChildによって作成されます。

マークされた要素とDOMに結びつける

// Reference to the close button 
@ViewChild("closeButton") closeButton: ElementRef; 

：

<button #closeButton></button>