Coder/deepseek-harness
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): keyboard reach and resting metrics on the approval scroll region

Browse Source 
Review follow-ups on the approval takeover:

The scroll region is now a tab stop (tabIndex + named role="group"). The
question composer's scroll body needs none — its option rows are focusable and
pull the container along — but this one holds nothing but text, so a
keyboard-only user could reach the buttons and never the command's tail, and
approve what they could not finish reading.

The action row's padding reproduces the 14px gap it had inside the body: the
flex gap of 6 plus its 8px top margin, neither of which reaches it now that the
row sits outside the scroll region. The resting card is unchanged again.
This commit is contained in:
creatixchu
2026-07-30 18:35:20 +08:00
parent 14482fcef1
commit 12b55adf6b
6 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/client/ui-conversation/src/client/skeleton/ApprovalPanel.module.css
View File

@@ -81,13 +81,15 @@
word-break: break-all;
}
/* Card-level row, not body content: it carries the body's former bottom pad so
the resting card keeps the draft's metrics while the scroll cap applies. */
/* Card-level row, not body content. Its padding reproduces the metrics the row
had inside the body: 14px above (the flex gap of 6 plus the row's 8px top
margin, neither of which reaches it out here) and the body's former 14px
bottom pad below, so the resting card is unchanged. */
.actionRow {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 8px 16px 14px;
padding: 14px 16px 14px;
}
.allow,

5
packages/client/ui-conversation/src/client/skeleton/ApprovalPanel.tsx
View File

@@ -57,7 +57,10 @@ function ApprovalFlow({ pending, command }: { pending: PendingApproval; command?
<div className={css.root} data-approval-key={pending.key}>
<div className={css.card}>
<div className={css.strip}><span className={css.dot} />等待审批</div>
<div className={css.body} data-approval-scroll="">
{/* Tab stop: the region scrolls once the command passes the cap and
holds nothing focusable of its own, so without one a keyboard-only
user cannot reach the command's tail before answering. */}
<div className={css.body} data-approval-scroll="" tabIndex={0} role="group" aria-label="审批详情">
<div className={css.headline}>{pending.reason ?? `工具 ${pending.toolName} 请求越权执行`}</div>
{command !== undefined && <div className={css.command}>{command}</div>}
</div>