Belajar Microfrontend - Accessibility & Theming

#Pendahuluan

Dengan banyak remote yang dimiliki banyak tim, aksesibilitas (a11y) bisa terpecah — tiap tim mengabaikannya karena mengira "ada yang mengurus". Faktanya, di microfrontend, aksesibilitas adalah tanggung jawab bersama yang harus dikoordinasikan, terutama soal focus management antar remote.

Mengapa penting? Karena WCAG bukan opsi di banyak industri, dan pengalaman screen-reader yang kacau ketika berpindah remote merusak kepercayaan. Episode ini membahas cara menjaga aksesibilitas dan konsistensi theming di arsitektur ini.

#WCAG di Microfrontend

#Setiap Remote Bertanggung Jawab atas Aksesibilitasnya Sendiri

Prinsip: remote yang menampilkan konten adalah yang paling paham kontennya. Setiap remote harus memenuhi WCAG untuk domainnya sendiri — kontras warna, semantic HTML, label, keyboard navigation. Tim pemilik remote bertanggung jawab penuh.

#Design-System Menyediakan ARIA Defaults

Untuk konsistensi, design-system menyediakan ARIA defaults pada komponen dasarnya:

export function Button({ children, ...rest }: ButtonProps) {
  return (
    <button {...rest} className="btn">
      {children}
    </button>
  )
}

Komponen ini otomatis semantik sebagai <button>, memberi keyboard & screen-reader dukungan dasar tanpa tiap remote menulis ulang.

#Focus Management Antar Remote

Saat user berpindah remote (misal dari /catalog ke /cart), focus keyboard harus dipindahkan dengan benar — jika tidak, screen-reader "tersesat" di posisi lama.

Tugas host untuk mengkoordinasikan:

const mainRef = useRef<HTMLElement>(null)
 
useEffect(() => {
  if (location.pathname !== prevPath) {
    mainRef.current?.focus()
  }
}, [location.pathname])

• Route change → host mempertahankan pointer fokus di konten baru.
• Remote di-mount tidak me-reset ARIA di luar wilayahnya — host yang mengatur transisi.

#Theme / Dark Mode Bersama

#CSS Variables di Design-System (Token)

Seperti episode 8, dur tema didefinisikan sebagai CSS variables di design-system. Remote meng-konsumsi var(--ds-*) dan otomatis mengikuti tema aktif:

:root[data-theme='light'] { --ds-bg: #fff; --ds-text: #111; }
:root[data-theme='dark']  { --ds-bg: #111; --ds-text: #eee; }

Karena variabel berada di root (host), seluruh remote yang memakai token ikut berubah tanpa deploy ulang.

#Keyboard Navigation & Screen Reader

• Keyboard navigation: pastikan fokus bisa berpindah secara logis di seluruh bagian remote (tab order), tidak loncat-loncat.
• Screen reader: remote di-mount tidak boleh mengumumkan ulang hal yang berlebihan; gunakan ARIA live region secara hati-hati (misal untuk badge cart update).

#Testing Aksesibilitas

#axe-core per Remote

Integrasikan axe-core di test tiap remote untuk mendeteksi pelanggaran otomatis:

import axe from 'axe-core'
 
it('lolos aksesibilitas', async () => {
  const results = await axe.run(document.body)
  expect(results.violations).toHaveLength(0)
})

#CI Gate

Jadikan uji aksesibilitas CI gate: PR yang melanggar aksesibilitas diblokir sebelum merge. Ini memaksa tiap tim menjaga standar minimal, bukan menundanya.

#Penutup

Pada episode 21 ini, kalian telah memahami accessibility & theming di microfrontend.

Inti yang harus dibawa pulang:

• Setiap remote bertanggung jawab atas WCAG wilayahnya; design-system menyediakan ARIA defaults.
• Focus management antar remote dikoordinasikan host: pindahkan focus saat route berubah, jangan reset ARIA.
• Theme dark/light lewat CSS variables (token) lintas remote.
• Keyboard & screen reader dijaga konsistensinya; remote tidak mengumumkan berlebihan.
• axe-core per remote + CI gate memaksa standar aksesibilitas.

Di episode 22 selanjutnya, kita akan membahas server-side composition & Next.js — shell yang di-SSR, remote via fragment/edge, pola Podium Zalando, dan kapan memakai server-side composition. Pastikan aksesibilitas kalian hijau!