From f41742fb2cfad5a468befb8e3d4c7e63d40f226c Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Wed, 2 Sep 2026 09:03:32 +0600
Subject: [PATCH 1/3] fix(a11y): add accessible names and aria-modal attributes
 to dialogs

---
 resources/js/components/BaseModal.vue        | 1 +
 resources/js/components/NoticeDialog.vue     | 6 ++++++
 resources/js/components/PwaInstallPrompt.vue | 2 ++
 3 files changed, 9 insertions(+)

diff --git a/resources/js/components/BaseModal.vue b/resources/js/components/BaseModal.vue
index e908e23a..137e16bb 100644
--- a/resources/js/components/BaseModal.vue
+++ b/resources/js/components/BaseModal.vue
@@ -129,6 +129,7 @@ onBeforeUnmount(() => {
                 v-if="isOpen"
                 role="dialog"
                 aria-modal="true"
+                :aria-label="title || 'Modal dialog'"
                 class="fixed inset-0 z-50 flex justify-center"
                 :class="[
                     position === 'responsive'
diff --git a/resources/js/components/NoticeDialog.vue b/resources/js/components/NoticeDialog.vue
index 2a955660..5a654f6b 100644
--- a/resources/js/components/NoticeDialog.vue
+++ b/resources/js/components/NoticeDialog.vue
@@ -75,6 +75,11 @@ const close = () => {
                 <div
                     class="relative w-full max-w-md overflow-hidden rounded-3xl bg-white shadow-xl ring-1 ring-slate-900/5 dark:bg-gray-900 dark:ring-gray-700/50"
                     role="alertdialog"
+                    aria-modal="true"
+                    :aria-labelledby="
+                        notice.title ? 'notice-dialog-title' : undefined
+                    "
+                    :aria-label="notice.title ? undefined : 'Notice'"
                 >
                     <button
                         @click="close"
@@ -94,6 +99,7 @@ const close = () => {
                     <div class="p-6">
                         <h2
                             v-if="notice.title"
+                            id="notice-dialog-title"
                             class="text-lg font-semibold text-slate-900 dark:text-gray-100"
                         >
                             {{ notice.title }}
diff --git a/resources/js/components/PwaInstallPrompt.vue b/resources/js/components/PwaInstallPrompt.vue
index 9bc5751f..11d5d7bd 100644
--- a/resources/js/components/PwaInstallPrompt.vue
+++ b/resources/js/components/PwaInstallPrompt.vue
@@ -92,6 +92,7 @@ const handleDismiss = () => {
                 class="fixed inset-0 z-50 flex items-end justify-center p-4 sm:items-center sm:p-6"
                 role="dialog"
                 aria-modal="true"
+                aria-labelledby="pwa-install-dialog-title"
             >
                 <!-- Backdrop -->
                 <div
@@ -130,6 +131,7 @@ const handleDismiss = () => {
                         </div>
                         <div class="min-w-0 flex-1 pr-3">
                             <h3
+                                id="pwa-install-dialog-title"
                                 class="text-base font-bold text-slate-900 sm:text-lg dark:text-gray-100"
                             >
                                 {{ title }}

From 525ecfa2d40f1983dc265c8573711878a34d9912 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Wed, 2 Sep 2026 09:09:38 +0600
Subject: [PATCH 2/3] fix(home): remove modal PWA install prompt when notice is
 absent

---
 resources/js/pages/Home.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/resources/js/pages/Home.vue b/resources/js/pages/Home.vue
index b5db72b8..b7c89410 100644
--- a/resources/js/pages/Home.vue
+++ b/resources/js/pages/Home.vue
@@ -65,8 +65,6 @@ const filteredSubjects = computed(() => {
 
     <NoticeDialog v-if="notice" :notice="notice" />
 
-    <PwaInstallPrompt v-if="!notice" variant="modal" />
-
     <HomeHeader />
 
     <main class="mx-auto max-w-7xl px-4 pb-20 sm:px-6">

From a74c731568499de6ca07104a86fa8c8d0fafa9ff Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Wed, 2 Sep 2026 09:12:20 +0600
Subject: [PATCH 3/3] fix(theme): eliminate dark mode flash by applying theme
 synchronously in head

---
 resources/js/app.ts           | 11 -----------
 resources/views/app.blade.php | 16 ++++++++++++++++
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/resources/js/app.ts b/resources/js/app.ts
index 456b325b..259784e0 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -6,17 +6,6 @@ import { initPwa } from './lib/usePwa';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
-// Apply dark mode before paint to prevent flash
-const stored = localStorage.getItem('theme');
-
-if (
-    stored === 'dark' ||
-    (stored !== 'light' &&
-        window.matchMedia('(prefers-color-scheme: dark)').matches)
-) {
-    document.documentElement.classList.add('dark');
-}
-
 registerSW({ immediate: true });
 initPwa();
 
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index c092d60f..fa4a2c06 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -2,6 +2,22 @@
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"  @class(['dark' => ($appearance ?? 'system') == 'dark'])>
     <head>
         <meta charset="utf-8">
+        <script>
+            (function () {
+                try {
+                    var stored = localStorage.getItem('theme');
+                    var isDark =
+                        stored === 'dark' ||
+                        (stored !== 'light' &&
+                            window.matchMedia('(prefers-color-scheme: dark)').matches);
+                    if (isDark) {
+                        document.documentElement.classList.add('dark');
+                    } else {
+                        document.documentElement.classList.remove('dark');
+                    }
+                } catch (_) {}
+            })();
+        </script>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="csrf-token" content="{{ csrf_token() }}">
         <link rel="manifest" href="/build/manifest.webmanifest">