From c280ae504587f5047bc9b54ebca7949146fd240a Mon Sep 17 00:00:00 2001
From: argenis de la rosa <theonlyhennygod@gmail.com>
Date: Mon, 9 Mar 2026 16:43:08 -0400
Subject: [PATCH] fix(web): address CodeRabbit review feedback

Fixes issues identified in PR #3076:

1. mock-server.mjs: Fix HTTP line ending escape sequence
   - Changed `\\r\\n\\r\\n` to `\r\n\r\n` for proper HTTP CRLF terminators

2. App.tsx: Add accessibility attributes to pairing form
   - Added aria-label, aria-invalid, aria-describedby to input
   - Added id="pairing-error" and role="alert" to error message

3. Header.tsx: Add accessible name to logout button
   - Added aria-label for screen readers on mobile (icon-only) view

4. Layout.tsx: Guard localStorage access with try-catch
   - Prevents runtime errors when storage is blocked/unavailable

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/e2e/mock-server.mjs              |  2 +-
 web/src/App.tsx                      |  5 ++++-
 web/src/components/layout/Header.tsx |  1 +
 web/src/components/layout/Layout.tsx | 12 ++++++++++--
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/web/e2e/mock-server.mjs b/web/e2e/mock-server.mjs
index 776681b16..61abac0ae 100644
--- a/web/e2e/mock-server.mjs
+++ b/web/e2e/mock-server.mjs
@@ -338,7 +338,7 @@ wsServer.on('connection', (socket) => {
 server.on('upgrade', (req, socket, head) => {
   const url = new URL(req.url, `http://${req.headers.host}`);
   if (url.pathname !== '/ws/chat' || !isAuthorized(req)) {
-    socket.write('HTTP/1.1 401 Unauthorized\\r\\n\\r\\n');
+    socket.write('HTTP/1.1 401 Unauthorized\r\n\r\n');
     socket.destroy();
     return;
   }
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 2cd4e7326..c0971350a 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -87,6 +87,9 @@ function PairingDialog({
         <form onSubmit={handleSubmit}>
           <input
             type="text"
+            aria-label={translate('auth.enter_code')}
+            aria-invalid={Boolean(error)}
+            aria-describedby={error ? 'pairing-error' : undefined}
             value={code}
             onChange={(e) => setCode(e.target.value)}
             placeholder={translate('auth.code_placeholder')}
@@ -95,7 +98,7 @@ function PairingDialog({
             autoFocus
           />
           {error && (
-            <p className="mb-4 text-center text-sm text-rose-300">{error}</p>
+            <p id="pairing-error" role="alert" className="mb-4 text-center text-sm text-rose-300">{error}</p>
           )}
           <button
             type="submit"
diff --git a/web/src/components/layout/Header.tsx b/web/src/components/layout/Header.tsx
index 05ce96dd2..72616f4aa 100644
--- a/web/src/components/layout/Header.tsx
+++ b/web/src/components/layout/Header.tsx
@@ -67,6 +67,7 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
         <button
           type="button"
           onClick={logout}
+          aria-label={t('auth.logout')}
           className="flex items-center gap-1 rounded-lg border border-[#2b4f97] bg-[#091937]/75 px-2.5 py-1.5 text-xs text-[#c4d8ff] transition hover:border-[#4f83ff] hover:text-white sm:gap-1.5 sm:px-3 sm:text-sm"
         >
           <LogOut className="h-4 w-4" />
diff --git a/web/src/components/layout/Layout.tsx b/web/src/components/layout/Layout.tsx
index 94f010342..531b1f4d1 100644
--- a/web/src/components/layout/Layout.tsx
+++ b/web/src/components/layout/Layout.tsx
@@ -11,14 +11,22 @@ export default function Layout() {
     if (typeof window === 'undefined') {
       return false;
     }
-    return window.localStorage.getItem(SIDEBAR_COLLAPSED_KEY) === '1';
+    try {
+      return window.localStorage.getItem(SIDEBAR_COLLAPSED_KEY) === '1';
+    } catch {
+      return false;
+    }
   });
 
   const toggleSidebarCollapsed = () => {
     setSidebarCollapsed((prev) => {
       const next = !prev;
       if (typeof window !== 'undefined') {
-        window.localStorage.setItem(SIDEBAR_COLLAPSED_KEY, next ? '1' : '0');
+        try {
+          window.localStorage.setItem(SIDEBAR_COLLAPSED_KEY, next ? '1' : '0');
+        } catch {
+          // Storage unavailable, ignore
+        }
       }
       return next;
     });