feat(a11y): integrasi variabel teks tombol whatsapp dan web speech synthesizer audio reader

footer.php

@@ -11,6 +11,9 @@ $wa_clean = preg_replace( '/[^0-9]/', '', $raw_telp );
 if ( substr( $wa_clean, 0, 1 ) === '0' ) {
     $wa_clean = '62' . substr( $wa_clean, 1 );
 }
+
+$wa_btn_label = get_option( 'edukarsa_wa_btn_text', 'Tanya PMB' );
+$wa_def_msg   = get_option( 'edukarsa_wa_default_msg', 'Halo Admin EduKarsa, saya ingin bertanya informasi lebih lanjut.' );
 ?>
 
     <!-- MAIN FOOTER -->
@@ -136,7 +139,7 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) {
         </div>
     </footer>
 
-    <!-- WIDGET AKSESIBILITAS DISABILITAS NATIVE -->
+    <!-- WIDGET AKSESIBILITAS DISABILITAS & PEMBACA SUARA (WCAG TOOLBAR) -->
     <?php if ( get_option( 'edukarsa_tampil_accessibility', 1 ) == 1 ) : ?>
     <div class="edukarsa-a11y-wrapper" id="a11y-wrapper">
         <button type="button" class="edukarsa-a11y-trigger" id="a11y-trigger" aria-label="Buka Menu Aksesibilitas" title="Aksesibilitas Disabilitas">
@@ -149,6 +152,15 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) {
                 <button type="button" class="a11y-close-btn" id="a11y-close">&times;</button>
             </div>
             <div class="a11y-panel-body">
+                <!-- Fitur Pembaca Suara -->
+                <div class="a11y-group">
+                    <span class="a11y-label">Pembaca Suara (Audio)</span>
+                    <div class="a11y-btn-grid">
+                        <button type="button" class="a11y-btn" id="a11y-speak-play">🔊 Baca</button>
+                        <button type="button" class="a11y-btn" id="a11y-speak-stop">⏹ Berhenti</button>
+                    </div>
+                </div>
+
                 <div class="a11y-group">
                     <span class="a11y-label">Ukuran Teks</span>
                     <div class="a11y-btn-grid">
@@ -178,11 +190,11 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) {
     </div>
     <?php endif; ?>
 
-    <!-- FLOATING WHATSAPP -->
+    <!-- FLOATING WHATSAPP (LABEL & PESAN DINAMIS) -->
     <?php if ( ! empty( $wa_clean ) ) : ?>
-    <a href="https://wa.me/<?php echo esc_attr( $wa_clean ); ?>?text=Halo%20Admin%20EduKarsa,%20saya%20ingin%20bertanya%20mengenai%20pendaftaran." target="_blank" rel="noopener" class="edukarsa-wa-float" title="Chat WhatsApp Panitia PMB">
+    <a href="https://wa.me/<?php echo esc_attr( $wa_clean ); ?>?text=<?php echo rawurlencode( $wa_def_msg ); ?>" target="_blank" rel="noopener" class="edukarsa-wa-float" title="<?php echo esc_attr( $wa_btn_label ); ?>">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="#ffffff"><path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.711 2.598 2.664-.699c.971.53 1.777.82 2.796.82h.005c3.18 0 5.767-2.586 5.768-5.766 0-3.18-2.587-5.806-5.773-5.806zm3.376 8.214c-.149.42-.767.781-1.072.829-.304.048-.687.069-2.203-.559-1.933-.801-3.178-2.775-3.275-2.905-.095-.129-.778-1.036-.778-1.975 0-.94.492-1.401.667-1.593.175-.192.383-.24.512-.24.129 0 .258.006.371.012.12.006.279-.045.436.334.164.397.558 1.365.607 1.465.049.099.082.217.017.348-.065.131-.098.212-.195.328-.098.115-.205.258-.293.346-.098.098-.201.205-.087.401.115.196.512.846 1.099 1.368.756.673 1.393.882 1.59.98.196.098.312.082.426-.049.115-.131.492-.573.623-.77.131-.196.262-.164.442-.098.18.065 1.147.541 1.344.639.196.098.328.147.377.229.049.082.049.475-.1.895z"/></svg>
-        <span>Tanya PMB</span>
+        <span><?php echo esc_html( $wa_btn_label ); ?></span>
     </a>
     <?php endif; ?>
 
@@ -302,7 +314,70 @@ if ( substr( $wa_clean, 0, 1 ) === '0' ) {
                 localStorage.removeItem('edukarsa_a11y_grayscale');
                 localStorage.removeItem('edukarsa_a11y_links');
                 applyA11y();
+                if ('speechSynthesis' in window) {
+                    window.speechSynthesis.cancel();
+                    const pBtn = document.getElementById("a11y-speak-play");
+                    if (pBtn) { pBtn.classList.remove('speaking'); pBtn.innerText = "🔊 Baca"; }
+                }
             });
+
+            // 4. Fitur Suara Text-to-Speech (Web Speech API Native)
+            const speakPlayBtn = document.getElementById("a11y-speak-play");
+            const speakStopBtn = document.getElementById("a11y-speak-stop");
+
+            if ('speechSynthesis' in window && speakPlayBtn) {
+                const synth = window.speechSynthesis;
+
+                speakPlayBtn.addEventListener("click", function() {
+                    if (synth.speaking) {
+                        synth.cancel();
+                    }
+
+                    // Ambil konten teks utama artikel atau bodi halaman
+                    const contentEl = document.querySelector("article .entry-content") || document.getElementById("primary") || document.body;
+                    const textToRead = contentEl.innerText.replace(/\s+/g, ' ').trim();
+                    if (!textToRead) return;
+
+                    const utterance = new SpeechSynthesisUtterance(textToRead);
+
+                    // Deteksi bahasa yang sedang aktif
+                    const match = document.cookie.match(/googtrans=\/id\/([a-zA-Z\-]+)/i);
+                    const activeLang = match ? match[1].toLowerCase() : 'id';
+
+                    if (activeLang === 'en') {
+                        utterance.lang = 'en-US';
+                    } else if (activeLang === 'ar') {
+                        utterance.lang = 'ar-SA';
+                    } else {
+                        utterance.lang = 'id-ID';
+                    }
+
+                    utterance.rate = 0.95; // Kecepatan baca ideal untuk artikulasi jelas
+
+                    utterance.onstart = function() {
+                        speakPlayBtn.classList.add('speaking');
+                        speakPlayBtn.innerText = "🔊 Membaca...";
+                    };
+
+                    utterance.onend = utterance.onerror = function() {
+                        speakPlayBtn.classList.remove('speaking');
+                        speakPlayBtn.innerText = "🔊 Baca";
+                    };
+
+                    synth.speak(utterance);
+                });
+
+                speakStopBtn?.addEventListener("click", function() {
+                    if (synth.speaking) {
+                        synth.cancel();
+                        speakPlayBtn.classList.remove('speaking');
+                        speakPlayBtn.innerText = "🔊 Baca";
+                    }
+                });
+            } else if (speakPlayBtn) {
+                speakPlayBtn.style.display = 'none';
+                if (speakStopBtn) speakStopBtn.style.display = 'none';
+            }
         }
     });
     </script>

inc/admin-menu.php

@@ -61,6 +61,7 @@ function edukarsa_register_settings() {
         'edukarsa_mid_bg_image', 'edukarsa_mid_bg_color',
         'edukarsa_cta_bg', 'edukarsa_cta_title', 'edukarsa_cta_btn_teks', 'edukarsa_cta_btn_url',
         'edukarsa_footer_logo', 'edukarsa_footer_desc', 'edukarsa_footer_alamat', 'edukarsa_footer_telp', 'edukarsa_footer_email', 'edukarsa_footer_jam',
+        'edukarsa_wa_btn_text', 'edukarsa_wa_default_msg',
         'edukarsa_tampil_fb', 'edukarsa_footer_fb', 'edukarsa_tampil_ig', 'edukarsa_footer_ig', 'edukarsa_tampil_yt', 'edukarsa_footer_yt', 'edukarsa_tampil_tiktok', 'edukarsa_footer_tiktok', 'edukarsa_tampil_x', 'edukarsa_footer_x',
         'edukarsa_footer_copyright', 'edukarsa_custom_css'
     );
@@ -192,10 +193,10 @@ function edukarsa_settings_page_html() {
                             <div class="switch-row" style="background: #f0fdf4; border-color: #bbf7d0;">
                                 <div class="switch-label-wrap">
                                     <div class="switch-label" style="color: #166534;">
-                                        <span>♿ Fitur Aksesibilitas Disabilitas (WCAG Toolbar)</span>
+                                        <span>♿ Fitur Aksesibilitas Disabilitas (WCAG Toolbar & Suara)</span>
-                                        <span class="tooltip-hint">?<span class="tooltip-text">Menampilkan tombol melayang di pojok kiri bawah untuk pengunjung berkebutuhan khusus (ukuran huruf, kontras, monokrom, garis tautan).</span></span>
+                                        <span class="tooltip-hint">?<span class="tooltip-text">Menampilkan toolbar ramah disabilitas (pembaca suara/audio, kontras, monokrom, ukuran huruf, sorot tautan).</span></span>
                                     </div>
-                                    <span style="font-size: 11px; color: #15803d;">Toolbar ramah disabilitas yang dapat dioperasikan langsung oleh pengunjung situs.</span>
+                                    <span style="font-size: 11px; color: #15803d;">Dilengkapi Web Speech Synthesizer bawaan untuk membacakan artikel bagi tunanetra.</span>
                                 </div>
                                 <label class="edukarsa-switch">
                                     <input type="checkbox" name="edukarsa_tampil_accessibility" value="1" <?php checked(1, get_option('edukarsa_tampil_accessibility', 1)); ?>>
@@ -348,12 +349,11 @@ function edukarsa_settings_page_html() {
                                     <label class="edukarsa-switch"><input type="checkbox" class="section-toggle" data-target="#cta-settings-box" name="edukarsa_tampil_cta" value="1" <?php checked(1, get_option('edukarsa_tampil_cta', 1)); ?>><span class="slider-round"></span></label>
                                 </div>
                                 
-                                <!-- Toggle FAQ (Sembunyikan/Aktifkan tanpa menghapus CPT) -->
                                 <div class="switch-row">
                                     <div class="switch-label-wrap">
                                         <div class="switch-label">
                                             <span>Tampilkan Seksi FAQ</span>
-                                            <span class="tooltip-hint">?<span class="tooltip-text">Jika dimatikan, seksi FAQ disembunyikan dari beranda. Seluruh item FAQ yang sudah dibuat tetap tersimpan aman.</span></span>
+                                            <span class="tooltip-hint">?<span class="tooltip-text">Jika dinonaktifkan, seksi FAQ disembunyikan dari beranda. Seluruh item FAQ yang sudah dibuat tetap tersimpan aman di database.</span></span>
                                         </div>
                                         <a href="<?php echo admin_url('edit.php?post_type=faq'); ?>" class="cpt-shortcut-link">Kelola Data FAQ ↗</a>
                                     </div>
@@ -381,7 +381,6 @@ function edukarsa_settings_page_html() {
                                 </div>
                             </div>
 
-                            <!-- Panel Pengaturan Label FAQ -->
                             <div id="faq-settings-box" class="stat-config-box" style="margin-bottom: 20px;">
                                 <h4>Label Tampilan Seksi FAQ (Tanya Jawab)</h4>
                                 <div class="form-grid-2">
@@ -394,10 +393,29 @@ function edukarsa_settings_page_html() {
                         </div>
                     </div>
 
-                    <!-- 6. Footer & Kontak -->
+                    <!-- 6. Footer, Kontak & Floating WhatsApp -->
                     <div class="edukarsa-card">
-                        <div class="edukarsa-card-header"><h2>📞 6. Pengaturan Footer & Media Sosial Lengkap</h2></div>
+                        <div class="edukarsa-card-header"><h2>📞 6. Footer, Kontak & Tombol WhatsApp</h2></div>
                         <div class="edukarsa-card-body">
+                            
+                            <!-- Opsi Tombol WhatsApp Melayang -->
+                            <div style="background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 16px 20px; margin-bottom: 20px;">
+                                <h4 style="margin: 0 0 12px; font-size: 13px; color: #166534; display: flex; align-items: center; gap: 6px;">
+                                    💬 Kustomisasi Tombol WhatsApp Melayang (Floating Button)
+                                </h4>
+                                <div class="form-grid-2">
+                                    <div class="form-field-group" style="margin-bottom: 0;">
+                                        <label>Label / Tulisan Tombol</label>
+                                        <input type="text" name="edukarsa_wa_btn_text" value="<?php echo esc_attr(get_option('edukarsa_wa_btn_text', 'Tanya PMB')); ?>" placeholder="cth: Hubungi Kami / Tanya PMB / Konsultasi">
+                                    </div>
+                                    <div class="form-field-group" style="margin-bottom: 0;">
+                                        <label>Template Pesan Awal Otomatis</label>
+                                        <input type="text" name="edukarsa_wa_default_msg" value="<?php echo esc_attr(get_option('edukarsa_wa_default_msg', 'Halo Admin EduKarsa, saya ingin bertanya informasi lebih lanjut.')); ?>" placeholder="cth: Halo Admin, saya ingin menanyakan...">
+                                    </div>
+                                </div>
+                                <p class="description" style="margin-top: 8px; font-size: 12px; color: #15803d;">Nomor WhatsApp otomatis diambil dari kolom Nomor Telepon di bawah.</p>
+                            </div>
+
                             <div class="form-grid-2">
                                 <div class="form-field-group">
                                     <label>Logo Footer (Opsional, kosongkan jika pakai logo header)</label>

style.css

@@ -437,3 +437,16 @@ body.a11y-high-contrast { filter: contrast(160%) !important; }
 body.a11y-grayscale { filter: grayscale(100%) !important; }
 body.a11y-high-contrast.a11y-grayscale { filter: grayscale(100%) contrast(160%) !important; }
 body.a11y-underline-links a { text-decoration: underline !important; text-underline-offset: 3px !important; }
+
+/* STATE BUTTON AKSESIBILITAS SUARA AKTIF */
+.a11y-btn.speaking {
+    background: #10b981 !important;
+    border-color: #059669 !important;
+    color: #ffffff !important;
+    animation: pulse 1.5s infinite;
+}
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.04); }
+    100% { transform: scale(1); }
+}