kaffa/anvil-hosting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix medium priority issues from code review

Browse Source 
- Add DEPLOY_TIMING constants for deployment simulation
- Add null checks in switchTab function for consistency
- Add role="radiogroup" and fieldset/legend to wizard steps
- Add role="log" and aria-live="polite" to chat container
- Add bottom border to active pricing region button for better visual distinction

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kappa
2026-01-20 23:44:13 +09:00
parent 8374cbc19b
commit 7463a2a481
2 changed files with 28 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
index.html
View File

@@ -551,11 +551,11 @@
<!-- Tab Buttons -->
<div class="flex justify-center mb-8">
<div class="glass-panel p-1.5 rounded-2xl inline-flex gap-1">
<button @click="region = 'global'" :class="region === 'global' ? 'bg-gradient-to-r from-brand-600 to-brand-500 text-white shadow-lg shadow-brand-500/30' : 'text-slate-400 hover:text-white hover:bg-white/5'" class="px-6 py-3 rounded-xl text-sm font-bold transition-all flex items-center gap-2">
<button @click="region = 'global'" :class="region === 'global' ? 'bg-gradient-to-r from-brand-600 to-brand-500 text-white shadow-lg shadow-brand-500/30 border-b-2 border-b-white/60' : 'text-slate-400 hover:text-white hover:bg-white/5'" class="px-6 py-3 rounded-xl text-sm font-bold transition-all flex items-center gap-2">
<span>🌏 Global</span>
<span class="text-[10px] font-normal opacity-80">(Tokyo/SG/HK)</span>
</button>
<button @click="region = 'seoul'" :class="region === 'seoul' ? 'bg-gradient-to-r from-brand-600 to-brand-500 text-white shadow-lg shadow-brand-500/30' : 'text-slate-400 hover:text-white hover:bg-white/5'" class="px-6 py-3 rounded-xl text-sm font-bold transition-all flex items-center gap-2">
<button @click="region = 'seoul'" :class="region === 'seoul' ? 'bg-gradient-to-r from-brand-600 to-brand-500 text-white shadow-lg shadow-brand-500/30 border-b-2 border-b-white/60' : 'text-slate-400 hover:text-white hover:bg-white/5'" class="px-6 py-3 rounded-xl text-sm font-bold transition-all flex items-center gap-2">
<span>🇰🇷 Seoul</span>
<span class="text-[10px] font-normal opacity-80">(Premium)</span>
</button>
@@ -774,7 +774,7 @@
</div>
<!-- Chat Container -->
<div id="chat-container" class="flex-1 overflow-y-auto px-3 sm:px-6 py-3 sm:py-4 space-y-2 sm:space-y-4" x-show="wizardStep < 5">
<div id="chat-container" role="log" aria-live="polite" class="flex-1 overflow-y-auto px-3 sm:px-6 py-3 sm:py-4 space-y-2 sm:space-y-4" x-show="wizardStep < 5">
<!-- Messages -->
<template x-for="(msg, idx) in messages" :key="idx">
<div :class="msg.type === 'bot' ? 'flex justify-start' : 'flex justify-end'"
@@ -793,7 +793,7 @@
<!-- Current Step Options -->
<div class="pt-2">
<!-- Step 0: Region Selection -->
<fieldset x-show="wizardStep === 0" class="space-y-3">
<fieldset x-show="wizardStep === 0" role="radiogroup" aria-label="리전 선택" class="space-y-3">
<legend class="sr-only">리전 선택 (지역 선택)</legend>
<template x-for="r in regions" :key="r.id">
<button @click="selectRegion(r)"
@@ -817,7 +817,8 @@
</fieldset>
<!-- Step 1: Plan Selection -->
<div x-show="wizardStep === 1" class="space-y-3">
<fieldset x-show="wizardStep === 1" class="space-y-3">
<legend class="sr-only">플랜 선택 (서버 사양 선택)</legend>
<template x-for="p in plans" :key="p">
<button @click="selectPlan(p)"
class="w-full flex items-center justify-between px-5 py-4 bg-slate-800/80 hover:bg-slate-700 border border-slate-700/50 hover:border-brand-500/50 rounded-xl transition-all">
@@ -835,10 +836,11 @@
</div>
</button>
</template>
</div>
</fieldset>
<!-- Step 2: OS Selection -->
<div x-show="wizardStep === 2" class="space-y-3">
<fieldset x-show="wizardStep === 2" class="space-y-3">
<legend class="sr-only">운영체제 선택</legend>
<template x-for="os in osList" :key="os.id">
<button @click="selectOS(os)"
class="w-full flex items-center gap-4 px-5 py-4 bg-slate-800/80 hover:bg-slate-700 border border-slate-700/50 hover:border-purple-500/50 rounded-xl transition-all">
@@ -846,10 +848,11 @@
<span class="font-semibold text-white text-base" x-text="os.name"></span>
</button>
</template>
</div>
</fieldset>
<!-- Step 3: Payment Selection -->
<div x-show="wizardStep === 3" class="space-y-3">
<fieldset x-show="wizardStep === 3" class="space-y-3">
<legend class="sr-only">결제 방식 선택</legend>
<template x-for="pay in paymentMethods" :key="pay.id">
<button @click="selectPayment(pay)"
class="w-full flex items-center justify-between px-5 py-4 bg-slate-800/80 hover:bg-slate-700 border border-slate-700/50 hover:border-green-500/50 rounded-xl transition-all">
@@ -862,7 +865,7 @@
</div>
</button>
</template>
</div>
</fieldset>
<!-- Step 4: Confirmation -->
<div x-show="wizardStep === 4" class="space-y-4">