Untuk apa tabindex = “- 1” di bootstrap

Untuk apa tabindexatribut di Bootstrap 3?

Dokumentasinya tidak mengatakan apa-apa tentang mereka meskipun mereka menggunakannya secara praktis di semua modals.

Saya hanya menemukan ini terkait dengan penggunaannya, yang tidak banyak bicara

Keterangan alat yang dapat diakses untuk pengguna keyboard dan teknologi pendukung

Untuk pengguna yang bernavigasi dengan keyboard, dan khususnya pengguna teknologi bantuan, Anda hanya boleh menambahkan keterangan alat ke elemen yang dapat berfokus pada keyboard seperti tautan, kontrol formulir, atau elemen arbitrer apa pun dengan atribut tabindex = "0".

Dan saya menemukan saya tidak bisa menekan escuntuk menyembunyikan modal jika tabindexatributnya tidak-1 .

• Penutupan modal setelah menekan esctombol (dengan tabindex)
• Modal tidak menutup setelah menekan esctombol (tanpa tabindex)

The tabindexatribut secara eksplisit mendefinisikan urutan navigasi untuk elemen focusable (biasanya link dan bentuk kontrol) dalam suatu halaman. Ini juga dapat digunakan untuk menentukan apakah elemen harus dapat difokuskan atau tidak.

[Keduanya] tabindex="0"dan tabindex="-1"memiliki arti khusus serta menyediakan fungsionalitas yang berbeda dalam HTML. Nilai dari 0menunjukkan bahwa elemen harus ditempatkan dalam urutan navigasi default. Hal ini memungkinkan elemen yang tidak native focusable (seperti <div>, <span>, dan <p>) untuk menerima fokus keyboard. Tentu saja seseorang secara umum harus menggunakan tautan dan kontrol formulir untuk semua elemen interaktif, tetapi hal ini memungkinkan elemen lain menjadi dapat difokuskan dan memicu interaksi.

Sebuah tabindex="-1"nilai menghapus elemen dari aliran navigasi standar (yaitu, pengguna tidak bisa tab untuk itu), tetapi memungkinkan untuk menerima fokus program , yang berarti fokus dapat diatur untuk itu dari link atau dengan scripting. ** ini bisa sangat berguna untuk elemen yang tidak boleh menjadi tab, tetapi mungkin perlu memiliki fokus yang ditetapkan ke mereka .

Contoh yang baik adalah jendela dialog modal - saat dibuka, fokus harus disetel ke dialog sehingga pembaca layar akan mulai membaca dan keyboard akan mulai menavigasi di dalam dialog. Karena dialog (mungkin hanya sebuah <div>elemen) tidak dapat difokuskan secara default, menetapkannya tabindex="-1"memungkinkan fokus untuk diatur dengan skrip saat disajikan.

Nilai dari -1juga dapat berguna dalam widget dan menu kompleks yang menggunakan tombol panah atau tombol pintasan lainnya untuk memastikan bahwa hanya satu elemen dalam widget yang dapat dinavigasi dengan tombol tab, tetapi tetap memungkinkan fokus untuk ditetapkan pada komponen lain dalam widget.

Sumber: http://webaim.org/techniques/keyboard/tabindex

Inilah mengapa Anda membutuhkan tabindex="-1"modal <div>, sehingga pengguna dapat mengakses pintasan mouse dan keyboard yang umum. Semoga membantu.

Itu tabindex atribut dikaitkan dengan HTML , itu tidak spesifik untuk Bootstrap.

Properti ini bertanggung jawab untuk menunjukkan apakah suatu elemen dapat dijangkau dengan navigasi keyboard.

Anda perlu memperhatikan tiga skenario berbeda:

1. Saat menambahkan tabindex = "0"elemen, ini berarti elemen tersebut dapat dijangkau oleh navigasi keyboard tapi urutannya ditentukan oleh urutan sumber dokumen.

2. Saat menambahkan nilai positif ke atribut tabindex (misalnya tabindex = "1", tabindex = "2"), elemen tersebut dapat dijangkau dengan navigasi keyboard dan urutannya ditentukan oleh nilai atribut.

3. Saat menambahkan nilai negatif ke tabindex (biasanya tabindex="-1") itu berarti elemen tidak dapat dijangkau oleh navigasi keyboard, tetapi dapat difokuskan menggunakan fungsi fokus di JS.