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:
@@ -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';
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user