Address review: explicit button types + Target select label

- Set type="button" on the × close control and the Reset/Copy buttons so
  they can never act as submit if the panel is ever nested in a <form>.
- Add aria-label="Target pane" to the Target <select> so screen readers can
  identify the control.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: topkoa <topkoa@gmail.com>
This commit is contained in:
topkoa
2026-07-01 02:32:16 -04:00
co-authored by Claude Opus 4.8
parent 9f914770c6
commit 817db6382b
+3
View File
@@ -1866,6 +1866,7 @@
title.textContent = 'Wide-pane framing'; title.textContent = 'Wide-pane framing';
title.style.cssText = 'font-weight:700;color:#e8c040;'; title.style.cssText = 'font-weight:700;color:#e8c040;';
const close = document.createElement('button'); const close = document.createElement('button');
close.type = 'button'; // never submit if nested in a <form>
close.textContent = '×'; close.textContent = '×';
close.title = 'Close (Shift+A)'; close.title = 'Close (Shift+A)';
close.setAttribute('aria-label', 'Close'); close.setAttribute('aria-label', 'Close');
@@ -1879,6 +1880,7 @@
const tgtLab = document.createElement('div'); const tgtLab = document.createElement('div');
tgtLab.textContent = 'Target'; tgtLab.style.cssText = 'color:#9fb0c8;margin-bottom:2px;'; tgtLab.textContent = 'Target'; tgtLab.style.cssText = 'color:#9fb0c8;margin-bottom:2px;';
_aspectTargetSel = document.createElement('select'); _aspectTargetSel = document.createElement('select');
_aspectTargetSel.setAttribute('aria-label', 'Target pane');
_aspectTargetSel.style.cssText = 'width:100%;background:rgba(30,44,66,0.9);color:#cfe0f5;border:1px solid rgba(120,150,200,0.4);border-radius:4px;padding:3px;'; _aspectTargetSel.style.cssText = 'width:100%;background:rgba(30,44,66,0.9);color:#cfe0f5;border:1px solid rgba(120,150,200,0.4);border-radius:4px;padding:3px;';
_aspectTargetSel.addEventListener('change', () => { _aspectTargetSel.addEventListener('change', () => {
_aspectEditTarget = _aspectTargetSel.value; _syncAspectPanel(); _aspectEditTarget = _aspectTargetSel.value; _syncAspectPanel();
@@ -1961,6 +1963,7 @@
btnRow.style.cssText = 'display:flex;gap:6px;margin-top:8px;'; btnRow.style.cssText = 'display:flex;gap:6px;margin-top:8px;';
const mkBtn = (txt, fn) => { const mkBtn = (txt, fn) => {
const b = document.createElement('button'); const b = document.createElement('button');
b.type = 'button'; // never submit if nested in a <form>
b.textContent = txt; b.textContent = txt;
b.style.cssText = 'flex:1;padding:4px 0;border-radius:5px;border:1px solid rgba(120,150,200,0.4);background:rgba(40,60,90,0.6);color:#cfe0f5;cursor:pointer;font:11px system-ui;'; b.style.cssText = 'flex:1;padding:4px 0;border-radius:5px;border:1px solid rgba(120,150,200,0.4);background:rgba(40,60,90,0.6);color:#cfe0f5;cursor:pointer;font:11px system-ui;';
b.addEventListener('click', fn); b.addEventListener('click', fn);