web-dev-qa-db-ja.com

Angular7とNgbModal：デフォルトのオートフォーカスを削除する方法

アプリケーションをangular 7にアップグレードしました。次の図のように、すべてのngBootstrapモーダルが閉じるボタンにデフォルトのオートフォーカスを持っていることがわかりました。

modal image

これが私のコードです：

hTMLモーダルコード：

<form [formGroup]="storeForm" novalidate>
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Modal Test</h4>
            <button type="button" class="close" aria-label="Close" 
               (click)="activeModal.dismiss('Cross click')">
               <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <h4>Todo</h4>
        </div>
        <div class="modal-footer">
            <button role="button" type="submit" class="btn btn-primary" 
               (click)="activeModal.close('Finish click')" prevent-double- 
               submit>{{ 'store.add.finish' | translate }}</button>
       </div>
    </div>
</form>

私のcomponent.tsのおかげでモーダルはどのように呼び出されますか

    const modal = this._modalService.open(ModalComponent, { backdrop: 
       'static', size: 'lg'});
    modal.result.then(
        (data) => {
           // some code
        },
        () => {
        }
    );

私の質問は、予想される動作に適合しないこのデフォルトのオートフォーカスを削除するにはどうすればよいですか？

お読みいただきありがとうございます。スペルミスはご容赦ください。

angulartypescriptng-bootstrapng-modal
10
Flow

アクセシビリティとキーボードナビゲーションの理由から、フォーカスはモーダル内にある必要があります。デフォルトでは、モーダル内の最初のフォーカス可能な要素（この場合は閉じるボタン）にフォーカスがあります。フォーカスを置きたい要素にngbAutofocus属性を追加できます。

フォーカス管理デモ 。

<button type="button" ngbAutofocus class="btn btn-danger"
      (click)="modal.close('Ok click')">Ok</button>

github で詳細を読むことができます

21
Kld

これは醜いハックですが、非表示の要素を最初の要素として追加できます。

<input type="text" style="display:none" />
4
Jacquers

閉じるボタンが実際にフォーカスされていてもかまいませんが、醜いアウトラインを取り除きたい場合は、outline: noneを使用できます。

template.html：

<button type="button" aria-label="Close">Close</button>

styles.css：

button[aria-label="Close"]:focus {
  outline: none;
}
3
Eudz

追加 style="outline:なし; "閉じるボタンに

例：

<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')"> 
<span aria-hidden="true">&times;</span>
</button>
0
Sandeep Patel