fix: flyout sheet title CSS, ARIA role correction, sidebar-delete cleanup
Fix A: Add .flyout-sheet__title CSS rule in style.css flyout-sheet section.
- Kill confirm sheet renders a title div with class flyout-sheet__title
but no CSS rule existed; title displayed as raw unstyled text.
- Added padding/font/color/alignment rule after .flyout-sheet__handle.
Fix B: Change role='menuitem' to role='button' on Kill and Cancel buttons
in _openMobileKillConfirm() (app.js).
- Buttons inside a role='alertdialog' must use role='button' per ARIA spec;
role='menuitem' is only valid inside role='menu'.
Fix C: Remove 3 orphaned .sidebar-delete CSS rule blocks from style.css.
- .sidebar-delete, .sidebar-item:hover .sidebar-delete, .sidebar-delete:hover
were dead code after the delete button was removed from buildSidebarHTML().
Tests added:
- test_frontend_css.py: test_flyout_sheet_title_css_exists (Fix A)
- test_frontend_js.py: test_kill_confirm_buttons_use_role_button (Fix B)
- test_frontend_css.py: test_no_sidebar_delete_css (Fix C)
This commit is contained in:
@@ -1738,8 +1738,8 @@ function _openMobileKillConfirm(sessionName, remoteId) {
|
||||
html += '<div class="flyout-sheet__panel" aria-label="Confirm kill session" role="alertdialog">';
|
||||
html += '<div class="flyout-sheet__handle" aria-hidden="true"></div>';
|
||||
html += '<div class="flyout-sheet__title">Kill ' + escapeHtml(sessionName) + '?</div>';
|
||||
html += '<button class="flyout-sheet__item flyout-sheet__item--danger" data-action="confirm-kill" role="menuitem">Kill</button>';
|
||||
html += '<button class="flyout-sheet__item" data-action="cancel" role="menuitem">Cancel</button>';
|
||||
html += '<button class="flyout-sheet__item flyout-sheet__item--danger" data-action="confirm-kill" role="button">Kill</button>';
|
||||
html += '<button class="flyout-sheet__item" data-action="cancel" role="button">Cancel</button>';
|
||||
html += '</div>';
|
||||
|
||||
sheet.innerHTML = html;
|
||||
|
||||
@@ -1156,33 +1156,6 @@ body {
|
||||
|
||||
|
||||
|
||||
.sidebar-delete {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-dim);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
opacity: 0;
|
||||
transition: opacity 150ms ease;
|
||||
pointer-events: none;
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.sidebar-item:hover .sidebar-delete,
|
||||
.sidebar-item:focus-within .sidebar-delete {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.sidebar-delete:hover {
|
||||
color: #ef4444;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Header actions + settings buttons
|
||||
============================================================ */
|
||||
@@ -2432,6 +2405,14 @@ body {
|
||||
margin: 10px auto 6px;
|
||||
}
|
||||
|
||||
.flyout-sheet__title {
|
||||
padding: 8px 16px 12px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flyout-sheet__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -2274,3 +2274,38 @@ def test_tile_delete_css_removed() -> None:
|
||||
".tile-delete CSS rules must be removed from style.css — "
|
||||
"the button was removed from buildTileHTML; orphaned CSS is dead code"
|
||||
)
|
||||
|
||||
|
||||
# ── Fix A: .flyout-sheet__title CSS (Phase 3 COE re-verification) ─────────────
|
||||
|
||||
|
||||
def test_flyout_sheet_title_css_exists() -> None:
|
||||
""".flyout-sheet__title must have a CSS rule in the flyout-sheet section.
|
||||
|
||||
Fix A: The kill-confirm sheet renders a title div with class
|
||||
`flyout-sheet__title` but the CSS rule was missing, leaving the title
|
||||
as raw unstyled text.
|
||||
"""
|
||||
css = read_css()
|
||||
assert ".flyout-sheet__title" in css, (
|
||||
".flyout-sheet__title CSS rule must exist in style.css — "
|
||||
"the kill-confirm sheet renders a title div with this class"
|
||||
)
|
||||
|
||||
|
||||
# ── Fix C: .sidebar-delete orphaned CSS removed (Phase 3 COE re-verification) ──
|
||||
|
||||
|
||||
def test_no_sidebar_delete_css() -> None:
|
||||
""".sidebar-delete CSS rules must be removed from style.css (orphaned dead code).
|
||||
|
||||
Fix C: The .sidebar-delete button was removed from buildSidebarHTML() in a
|
||||
previous task. The 3 CSS rule blocks (.sidebar-delete,
|
||||
.sidebar-item:hover .sidebar-delete, .sidebar-delete:hover) are now dead
|
||||
code and must be cleaned up.
|
||||
"""
|
||||
css = read_css()
|
||||
assert ".sidebar-delete" not in css, (
|
||||
".sidebar-delete CSS rules must be removed from style.css — "
|
||||
"the button was removed from buildSidebarHTML(); orphaned CSS is dead code"
|
||||
)
|
||||
|
||||
@@ -4181,3 +4181,33 @@ def test_flyout_menu_map_is_const() -> None:
|
||||
assert "var FLYOUT_MENU_MAP" not in _JS, (
|
||||
"FLYOUT_MENU_MAP must not use 'var' — change to 'const'"
|
||||
)
|
||||
|
||||
|
||||
# ── Fix B: ARIA role correction in kill confirm sheet (Phase 3 COE re-verification) ──
|
||||
|
||||
|
||||
def test_kill_confirm_buttons_use_role_button() -> None:
|
||||
"""Kill and Cancel buttons inside the alertdialog must use role='button', not 'menuitem'.
|
||||
|
||||
Fix B: _openMobileKillConfirm() renders buttons inside a role='alertdialog'
|
||||
panel. The ARIA spec requires buttons inside an alertdialog to carry
|
||||
role='button' (not role='menuitem', which only belongs inside role='menu').
|
||||
"""
|
||||
# Negative check: role="menuitem" must NOT appear on the confirm-kill button
|
||||
assert 'data-action="confirm-kill" role="menuitem"' not in _JS, (
|
||||
"Kill button inside alertdialog must not use role='menuitem' — "
|
||||
"use role='button' instead (menuitem is only valid inside role='menu')"
|
||||
)
|
||||
# Negative check: role="menuitem" must NOT appear on the cancel button
|
||||
assert 'data-action="cancel" role="menuitem"' not in _JS, (
|
||||
"Cancel button inside alertdialog must not use role='menuitem' — "
|
||||
"use role='button' instead (menuitem is only valid inside role='menu')"
|
||||
)
|
||||
# Positive check: role="button" must appear on the confirm-kill button
|
||||
assert 'data-action="confirm-kill" role="button"' in _JS, (
|
||||
"Kill button inside alertdialog must use role='button'"
|
||||
)
|
||||
# Positive check: role="button" must appear on the cancel button
|
||||
assert 'data-action="cancel" role="button"' in _JS, (
|
||||
"Cancel button inside alertdialog must use role='button'"
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user