style: fix code quality issues from review for task-15 remote instances UI

- Deduplicate CSS: merge shared properties of .settings-remote-url and
  .settings-remote-name into a combined selector, keeping only flex
  values in individual rules. Reduces 18 lines to 10.

- Fix remove button hover color: .settings-remote-remove:hover now uses
  #ef4444 (red) and rgba(239, 68, 68, 0.1) background, consistent with
  .tile-delete:hover and .sidebar-delete:hover for destructive actions.

- Add aria-label attributes to urlInput and nameInput in
  _buildRemoteInstanceRow for screen-reader accessibility:
  'Remote instance URL' and 'Remote instance display name'.

- Add 2 tests to verify aria-label attributes are set on both inputs
  (test_build_remote_instance_row_url_input_aria_label,
  test_build_remote_instance_row_name_input_aria_label).

All 615 tests pass.

Co-authored-by: Amplifier <amplifier@sourcegraph.com>
This commit is contained in:
Brian Krabach
2026-03-31 01:09:27 -07:00
parent c8a963f28e
commit 88102751c8
3 changed files with 38 additions and 14 deletions
+2
View File
@@ -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';
+8 -14
View File
@@ -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);
}