Memulai dengan Fokus Perangkap – Beragampengetahuan

Perangkap fokus adalah istilah yang mengelola fokus dalam elemen, jadi fokus tetap di dalamnya sepanjang waktu:

• Jika pengguna mencoba menghapus dari elemen terakhir, kami mengembalikan fokus ke elemen pertama.
• Jika pengguna mencoba Transfer + Tab Di elemen pertama, kami mengembalikan fokus ke yang terakhir.

Seluruh hal fokus perangkap digunakan untuk membuat dialog modal yang dapat diakses, karena ini merupakan masalah utuh inert Yang lainnya – tapi, jika Anda menggunakan dialog API (dengan asumsi Anda melakukannya dengan benar).

Bagaimanapun, kembali ke perangkap fokus.

Seluruh proses terdengar sederhana secara teori, tetapi membangun dalam praktik bisa sulit, terutama karena banyak bagian yang harus Anda kelola.

Perangkap fokus sederhana dan mudah dengan lab yang brilian

Jika Anda enggan menggunakan kode yang dibangun oleh orang lain, Anda mungkin ingin mempertimbangkan menggunakan cuplikan kode yang saya buat di Labz yang indah.

Ide dasarnya adalah:

1. Kami mendeteksi semua elemen terfokus dalam elemen.
2. Kami menggunakan pendengar acara kritis untuk mengelola fokus.

import { getFocusableElements, trapFocus } from '@splendidlabz/utils/dom'

const dialog = document.querySelector('dialog')

// Get all focusable content
const focusables = getFocusableElements(node)

// Traps focus within the dialog
dialog.addEventListener('keydown', event => {
  trapFocus({ event, focusables })
})

Cuplikan kode di atas membuat perangkap fokus menjadi sangat mudah.

Namun, karena Anda membaca ini, saya yakin Anda ingin mengetahui detail yang akan tersedia di masing -masing fitur ini. Mungkin Anda ingin membangun hal Anda sendiri, atau mempelajari apa yang sedang terjadi. Either way, keduanya keren – jadi mari kita gali lebih dalam.

Pilih semua elemen fokus

Saya melakukan penelitian beberapa waktu lalu. Sepertinya Anda hanya dapat memusatkan beberapa elemen:

• a
• button
• input
• textarea
• select
• details
• iframe
• embed
• object
• summary
• dialog
• audio[controls]
• video[controls]
• [contenteditable]
• [tabindex]

Oleh karena itu, langkah pertama getFocusableElements Sedang mencari semua elemen terfokus dalam wadah:

export function getFocusableElements(container = document.body ) {

  return {
    get all () {
      const elements = Array.from(
        container.querySelectorAll(
          `a,
            button,
            input,
            textarea,
            select,
            details,
            iframe,
            embed,
            object,
            summary,
            dialog,
            audio[controls],
            video[controls],
            [contenteditable],
            [tabindex]
          `,
        ),
      )
    }
  }
}

Selanjutnya, kami ingin menyaring elemen disabled,,,,, hidden Atau mengatur display: nonekarena mereka tidak bisa berkonsentrasi. Kami bisa melakukan ini filter Fungsi.

export function getFocusableElements(container = document.body ) {

  return {
    get all () {
      // ...
      return elements.filter(el => {
        if (el.hasAttribute('disabled')) return false
        if (el.hasAttribute('hidden')) return false
        if (window.getComputedStyle(el).display === 'none') return false
        return true
      })
    }
  }
}

Selanjutnya, karena kami ingin menangkap fokus keyboard, wajar untuk mengambil daftar elemen fokus keyboard. Kita bisa melakukan ini dengan mudah juga. Kita hanya perlu menghapus semuanya tabindex Kurang dari 0.

export function getFocusableElements(container = document.body ) {
  return {
    get all () { /* ... */ },
    get keyboardOnly() {
      return this.all.filter(el => el.tabIndex > -1)
    }
  }
}

Sekarang, ingatlah bahwa kita perlu melakukan dua hal untuk fokus pada perangkap:

• Jika pengguna mencoba menghapus dari elemen terakhir, kami mengembalikan fokus ke elemen pertama.
• Jika pengguna mencoba Transfer + Tab Di elemen pertama, kami mengembalikan fokus ke yang terakhir.

Ini berarti kita harus dapat menemukan proyek fokus pertama dan proyek fokus terakhir. Untungnya, kami dapat menambahkan first Dan last Dapatkan bagian dalam elemen -elemen ini yang dapat dengan mudah diambil getFocusableElements.

Dalam hal ini, karena kami berurusan dengan elemen keyboard, kami bisa keyboardOnly:

export function getFocusableElements(container = document.body ) {
  return {
    // ...
    get first() { return this.keyboardOnly[0] },
    get last() { return this.keyboardOnly[0] },
  }
}

Kami memiliki semua yang kami butuhkan – selanjutnya menerapkan fungsionalitas fokus perangkap.

Bagaimana menangkap fokus

Pertama, kita perlu mendeteksi acara keyboard. Kita bisa melakukan ini dengan mudah addEventListener:

const container = document.querySelector('.some-element')
container.addEventListener('keydown', event => {/* ... */})

Kita perlu memeriksa apakah pengguna itu:

• Tekan tag (tidak Transfer)
• Tekan tag (dengan Transfer)

Splendid Labz memiliki fitur yang nyaman untuk mendeteksi fitur -fitur ini:

import { isTab, isShiftTab } from '@splendidlabz/utils/dom'

// ...
container.addEventListener('keydown', event => {
  if (isTab(event)) // Handle Tab
  if (isShiftTab(event)) // Handle Shift Tab
  /* ... */
})

Tentu saja, dalam semangat belajar, mari kita cari tahu cara menulis kode dari awal:

• Anda bisa menggunakannya event.key Mendeteksi apakah Tab Kunci ditekan.
• Anda bisa menggunakannya event.shiftKey Deteksi apakah itu Transfer Kuncinya adalah menekan

Menggabungkan keduanya, Anda akan dapat menulis sendiri isTab Dan isShiftTab Fungsi:

export function isTab(event) {
  return !event.shiftKey && event.key === 'Tab'
}

export function isShiftTab(event) {
  return event.shiftKey && event.key === 'Tab'
}

Karena kami hanya menghadapinya Tab Kunci, kita dapat menggunakan pernyataan pengembalian awal untuk melewatkan pemrosesan kunci lainnya.

container.addEventListener('keydown', event => {
  if (event.key !== 'Tab') return

  if (isTab(event)) // Handle Tab
  if (isShiftTab(event)) // Handle Shift Tab
  /* ... */
})

Kami sekarang memiliki hampir semua yang kami butuhkan. Satu -satunya hal adalah mengetahui di mana elemen fokus saat ini – sehingga kita dapat memutuskan apakah akan menangkap fokus atau membiarkan operasi fokus default untuk melanjutkan.

Kita bisa melakukan ini document.activeElement.

Kembali ke langkah:

• Jika pengguna mentransfer fokus Tab ada Item terakhir
• Jika pengguna transfer fokus Transfer + Tab ada Yang pertama benda

Secara alami, Anda dapat mengatakan bahwa kami perlu memeriksa apakah document.activeElement adalah proyek fokus pertama atau terakhir.

container.addEventListener('keydown', event => {
  // ...
  const focusables = getFocusableElements(container)
  const first = focusables.first
  const last = focusables.last

  if (document.activeElement === last && isTab(event)) {
    // Shift focus to the first item
  }

  if (document.activeElement === first && isShiftTab(event)) {
    // Shift focus to the last item
  }
})

Langkah terakhir adalah menggunakan focus Fokus pada proyek.

container.addEventListener('keydown', event => {
  // ...

  if (document.activeElement === last && isTab(event)) {
    first.focus()
  }

  if (document.activeElement === first && isShiftTab(event)) {
    last.focus()
  }
})

Itu saja! Jika Anda melewati urutan langkah demi langkah, itu sederhana, bukan?

Komentar Akhir untuk Labz Splendid

Ketika saya memutuskan untuk berhenti mengajar dan mulai membangun aplikasi saya, saya mendapati diri saya membutuhkan banyak komponen umum, utilitas, dan bahkan gaya.

Karena saya memiliki kemampuan untuk membangun sesuatu untuk diri saya sendiri (ditambah fakta bahwa saya sangat istimewa dalam hal DX yang baik), saya memutuskan untuk mengumpulkan hal-hal ini atau membangunnya di beberapa perpustakaan yang mudah digunakan.

Cukup bagikan ini dengan Anda, berharap mereka akan membantu Anda mempercepat alur kerja pengembangan Anda.

Terima kasih telah membaca plug saya yang tidak tahu malu. Apa pun yang Anda putuskan untuk kode adalah yang terbaik!