diff --git a/muxplex/frontend/app.js b/muxplex/frontend/app.js index 5821e1d..3892347 100644 --- a/muxplex/frontend/app.js +++ b/muxplex/frontend/app.js @@ -1198,11 +1198,13 @@ function _buildRemoteInstanceRow(url, name) { urlInput.className = 'settings-remote-url'; urlInput.placeholder = 'http://192.168.1.x:8000'; urlInput.value = url || ''; + urlInput.setAttribute('aria-label', 'Remote instance URL'); var nameInput = document.createElement('input'); nameInput.type = 'text'; nameInput.className = 'settings-remote-name'; nameInput.placeholder = 'Device name'; nameInput.value = name || ''; + nameInput.setAttribute('aria-label', 'Remote instance display name'); var removeBtn = document.createElement('button'); removeBtn.className = 'settings-remote-remove'; removeBtn.textContent = '\u00d7'; diff --git a/muxplex/frontend/style.css b/muxplex/frontend/style.css index 8537afd..634d8b4 100644 --- a/muxplex/frontend/style.css +++ b/muxplex/frontend/style.css @@ -1485,8 +1485,8 @@ body { align-items: center; } -.settings-remote-url { - flex: 2; +.settings-remote-url, +.settings-remote-name { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 4px; @@ -1497,22 +1497,15 @@ body { transition: border-color 0.15s; } -.settings-remote-url:focus { - border-color: var(--accent); +.settings-remote-url { + flex: 2; } .settings-remote-name { flex: 1; - background: var(--bg-secondary); - border: 1px solid var(--border); - border-radius: 4px; - color: var(--text); - font-size: 13px; - padding: 5px 8px; - outline: none; - transition: border-color 0.15s; } +.settings-remote-url:focus, .settings-remote-name:focus { border-color: var(--accent); } @@ -1531,6 +1524,7 @@ body { } .settings-remote-remove:hover { - border-color: var(--accent); - color: var(--text); + border-color: #ef4444; + color: #ef4444; + background: rgba(239, 68, 68, 0.1); } diff --git a/muxplex/tests/test_frontend_js.py b/muxplex/tests/test_frontend_js.py index 3055ec3..fc7b3f9 100644 --- a/muxplex/tests/test_frontend_js.py +++ b/muxplex/tests/test_frontend_js.py @@ -2416,3 +2416,31 @@ def test_bind_static_event_listeners_remote_instance_remove() -> None: assert "settings-remote-remove" in body, ( "bindStaticEventListeners must handle delegated clicks on .settings-remote-remove buttons" ) + + +def test_build_remote_instance_row_url_input_aria_label() -> None: + """urlInput in _buildRemoteInstanceRow must have an aria-label attribute.""" + match = re.search( + r"function _buildRemoteInstanceRow\s*\(.*?\)\s*\{(.*?)(?=\n(?:function|/\*\*|window\.)|\n})", + _JS, + re.DOTALL, + ) + assert match, "_buildRemoteInstanceRow function not found in app.js" + body = match.group(1) + assert "Remote instance URL" in body, ( + "urlInput must have aria-label='Remote instance URL' for screen-reader accessibility" + ) + + +def test_build_remote_instance_row_name_input_aria_label() -> None: + """nameInput in _buildRemoteInstanceRow must have an aria-label attribute.""" + match = re.search( + r"function _buildRemoteInstanceRow\s*\(.*?\)\s*\{(.*?)(?=\n(?:function|/\*\*|window\.)|\n})", + _JS, + re.DOTALL, + ) + assert match, "_buildRemoteInstanceRow function not found in app.js" + body = match.group(1) + assert "Remote instance display name" in body, ( + "nameInput must have aria-label='Remote instance display name' for screen-reader accessibility" + )