lfg2025/archy
1
0
Fork 0
Code Issues 27 Pull Requests 5 Actions Packages Projects Releases 6 Wiki Activity

feat: add ARIA labels, roles, and live regions across all views (A11Y-01)

Browse Source 
Systematic accessibility pass: aria-label on icon-only buttons, role=dialog
and aria-modal on modals, role=tab/tablist on tab switchers, role=switch
on toggles, aria-live on dynamic status/error regions, aria-hidden on
decorative SVGs, aria-label on search inputs, and nav landmarks.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-11 13:04:31 +00:00
co-authored by Claude Opus 4.6
parent 224681f1e0
commit 46747607ea
8 changed files with 557 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
neode-ui/src/views/Chat.vue
+32 -7
View File
@@ -2,8 +2,8 @@
<div class="chat-fullscreen">
<!-- Close button + connection indicator (desktop: top-right pill) -->
<div class="chat-mode-pill hidden md:flex">
<button class="chat-close-btn" @click="closeChat">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<button class="chat-close-btn" aria-label="Close AI Assistant" @click="closeChat">
<svg class="w-4 h-4" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
<span class="text-xs font-medium">Close</span>
@@ -15,11 +15,18 @@
/>
</div>
<!-- Mobile back button -->
<button class="chat-mobile-back md:hidden" aria-label="Go back" @click="closeChat">
<svg class="w-5 h-5" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
<!-- Loading indicator while iframe loads -->
<Transition name="fade">
<div v-if="aiuiUrl && !aiuiConnected" class="chat-loading">
<div v-if="aiuiUrl && !aiuiConnected" class="chat-loading" role="status" aria-live="polite">
<div class="glass-card p-8 flex flex-col items-center gap-4">
<div class="chat-loading-spinner" />
<div class="chat-loading-spinner" aria-hidden="true" />
<p class="text-sm text-white/60">Loading AI assistant...</p>
</div>
</div>
@@ -30,6 +37,7 @@
v-if="aiuiUrl"
ref="aiuiFrame"
:src="aiuiUrl"
title="AI Assistant"
class="chat-iframe chat-iframe-mobile"
sandbox="allow-scripts allow-same-origin allow-forms"
allow="microphone"
@@ -40,16 +48,16 @@
<div v-else class="chat-placeholder">
<div class="chat-placeholder-inner">
<div class="chat-placeholder-icon">
<svg class="w-8 h-8 text-white/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-8 h-8 text-white/40" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
</div>
<h2 class="text-2xl font-semibold text-white mb-2">AI Assistant</h2>
<p class="text-white/60 mb-4 leading-relaxed">
AIUI is not connected. Configure the AIUI URL in your environment settings.
AI Assistant is not yet configured on this node.
</p>
<p class="text-xs text-white/30">
Set <code class="text-white/50">VITE_AIUI_URL</code> or deploy the AIUI container.
Deploy the AIUI app from the App Store to enable this feature.
</p>
</div>
</div>
@@ -142,4 +150,21 @@ onBeforeUnmount(() => {
.fade-leave-to {
opacity: 0;
}
.chat-mobile-back {
position: absolute;
top: 0.75rem;
left: 0.75rem;
z-index: 20;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.15);
}
</style>