Mobil UX ve Erişilebilirlik

Achidemy’de kod yazma deneyimi masaüstü odaklıdır; mobil cihazlarda Monaco tabanlı editör kullanımı kısıtlanarak kullanıcı deneyimi korunur. Bu sayfa CodingWorkspace bileşenindeki mobil kalkan (desktop shield) mantığını ve ilgili erişilebilirlik notlarını açıklar.

Neden Mobil Kısıtlama?

• Monaco Editor: Büyük bir bileşen; mobil klavyeler ve (özellikle iOS) otomatik düzeltmelerle kullanımı zorlaşır.
• Kod çalıştırma / test: Çıktı ve test sonuçları küçük ekranda okunması güç olabilir; öğrencinin “çalışmıyor” algısı ve düşük memnuniyet riski vardır.
• Hedef: Mobilde kodlama egzersizlerini sadece okunabilir göstermek; çalıştırma/tamamlama için kullanıcıyı masaüstüne yönlendirmek.

---

CodingWorkspace Mobil Kalkanı

Dosya: app/components/learn/CodingWorkspace.tsx

Breakpoint ve Tespit

• Breakpoint: 1024px (Tailwind lg). Ekran genişliği 1024px’in altındaysa mobil/tablet kabul edilir.
• State: isMobile (boolean) — useState(false) ile başlatılır.
• Güncelleme: useEffect içinde window.innerWidth < 1024 kontrolü yapılır; resize event’i dinlenir, unmount’ta listener kaldırılır. İlk mount’ta da bir kez kontrol edilir.

Görsel ve Etkileşim Kısıtlamaları

1. Uyarı banner’ı: isMobile === true iken editörün üstünde bir bant gösterilir:

   • İkon (örn. MonitorSmartphone), kısa açıklama: Kodlama egzersizleri masaüstünde daha iyi çalışır; kodu çalıştırmak ve egzersizi tamamlamak için masaüstünden giriş yapılması önerilir.
   • Stil: Dikkat çekici ama rahatsız etmeyen (örn. amber/sarı ton, border).

2. Editör kilit: Editörü saran div’e isMobile ise şu sınıflar verilir: pointer-events-none, opacity-40, blur-[1px], select-none. Böylece tıklama/klavye ile düzenleme pratikte devre dışı kalır.

   • Monaco’nun readOnly seçeneği de isMobile iken açılır: options={{ readOnly: isMobile }}.

3. Çalıştır butonları: “Kodu Çalıştır” ve “Testleri Çalıştır” benzeri butonlara disabled={isMobile} eklenir; mobilde tıklansa bile işlem yapılmaz.

Sonuç: Mobilde öğrenci içeriği okuyabilir ama düzenleyemez ve çalıştıramaz; net bir mesajla masaüstüne yönlendirilir.

---

Erişilebilirlik Notları

• Banner: Metin ve ikon anlamlı; gerekirse aria-live="polite" ile ekran okuyucuya duyurulabilir.
• Butonlar: disabled olduğunda klavye ile odaklanılabilir olup olmaması platforma göre değişir; “Neden devre dışı?” sorusu için tooltip veya banner metni yanıt sağlar.
• Genel: Kurs oynatıcı ve diğer öğrenme bileşenlerinde aria-label, tabIndex, klavye navigasyonu kullanımı kod konvansiyonları ve Kod Konvansiyonları ile uyumlu tutulur.

---

Özet

Konu	Açıklama
Breakpoint	1024px (lg); altı mobil.
Tespit	window.innerWidth + resize listener.
Banner	Mobilde üstte uyarı; masaüstü önerisi.
Editör	pointer-events-none, opacity, blur, readOnly.
Butonlar	Run / Run Tests disabled when isMobile.

---

İlgili Dosyalar

• app/components/learn/CodingWorkspace.tsx — isMobile, banner, editör wrapper, Run butonları.