monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix(app): session screen accessibility improvements (#9907)

Browse Source
This commit is contained in:
Nolan Darilek
2026-01-22 05:10:53 -06:00
committed by GitHub
parent 8a043edfd5
commit 3435327bc0
19 changed files with 120 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/app/src/pages/layout.tsx
View File

@@ -1916,6 +1916,7 @@ export default function Layout(props: ParentProps) {
"bg-surface-base-hover border border-border-weak-base": !selected() && open(),
}}
onClick={() => navigateToProject(props.project.worktree)}
onBlur={() => setOpen(false)}
>
<ProjectIcon project={props.project} notify />
</button>
@@ -2343,7 +2344,8 @@ export default function Layout(props: ParentProps) {
<div class="relative bg-background-base flex-1 min-h-0 flex flex-col select-none [&_input]:select-text [&_textarea]:select-text [&_[contenteditable]]:select-text">
<Titlebar />
<div class="flex-1 min-h-0 flex">
<div
<nav
aria-label="Projects and sessions"
classList={{
"hidden xl:block": true,
"relative shrink-0": true,
@@ -2364,7 +2366,7 @@ export default function Layout(props: ParentProps) {
onCollapse={layout.sidebar.close}
/>
</Show>
</div>
</nav>
<div class="xl:hidden">
<div
classList={{
@@ -2376,7 +2378,8 @@ export default function Layout(props: ParentProps) {
if (e.target === e.currentTarget) layout.mobileSidebar.hide()
}}
/>
<div
<nav
aria-label="Projects and sessions"
classList={{
"@container fixed top-10 bottom-0 left-0 z-50 w-72 bg-background-base transition-transform duration-200 ease-out": true,
"translate-x-0": layout.mobileSidebar.opened(),
@@ -2385,7 +2388,7 @@ export default function Layout(props: ParentProps) {
onClick={(e) => e.stopPropagation()}
>
<SidebarContent mobile />
</div>
</nav>
</div>
<main

15
packages/app/src/pages/session.tsx
View File

@@ -782,7 +782,7 @@ export default function Page() {
const activeElement = document.activeElement as HTMLElement | undefined
if (activeElement) {
const isProtected = activeElement.closest("[data-prevent-autofocus]")
const isInput = /^(INPUT|TEXTAREA|SELECT)$/.test(activeElement.tagName) || activeElement.isContentEditable
const isInput = /^(INPUT|TEXTAREA|SELECT|BUTTON)$/.test(activeElement.tagName) || activeElement.isContentEditable
if (isProtected || isInput) return
}
if (dialog.active) return
@@ -1404,6 +1404,7 @@ export default function Page() {
<div
ref={autoScroll.contentRef}
role="log"
class="flex flex-col gap-32 items-start justify-start pb-[calc(var(--prompt-height,8rem)+64px)] md:pb-[calc(var(--prompt-height,10rem)+64px)] transition-[margin]"
classList={{
"w-full": true,
@@ -1552,7 +1553,7 @@ export default function Page() {
{/* Desktop tabs panel (Review + Context + Files) - hidden on mobile */}
<Show when={isDesktop() && showTabs()}>
<div class="relative flex-1 min-w-0 h-full border-l border-border-weak-base">
<aside id="review-panel" aria-label="Review and files" class="relative flex-1 min-w-0 h-full border-l border-border-weak-base">
<DragDropProvider
onDragStart={handleDragStart}
onDragEnd={handleDragEnd}
@@ -1586,7 +1587,7 @@ export default function Page() {
value="context"
closeButton={
<Tooltip value={language.t("common.closeTab")} placement="bottom">
<IconButton icon="close" variant="ghost" onClick={() => tabs().close("context")} />
<IconButton icon="close" variant="ghost" onClick={() => tabs().close("context")} aria-label="Close context tab" />
</Tooltip>
}
hideCloseButton
@@ -1612,6 +1613,7 @@ export default function Page() {
variant="ghost"
iconSize="large"
onClick={() => dialog.show(() => <DialogSelectFile />)}
aria-label="Open file"
/>
</TooltipKeybind>
</div>
@@ -1913,12 +1915,15 @@ export default function Page() {
</Show>
</DragOverlay>
</DragDropProvider>
</div>
</aside>
</Show>
</div>
<Show when={isDesktop() && view().terminal.opened()}>
<div
id="terminal-panel"
role="region"
aria-label="Terminal"
class="relative w-full flex flex-col shrink-0 border-t border-border-weak-base"
style={{ height: `${layout.terminal.height()}px` }}
>
@@ -1990,7 +1995,7 @@ export default function Page() {
keybind={command.keybind("terminal.new")}
class="flex items-center"
>
<IconButton icon="plus-small" variant="ghost" iconSize="large" onClick={terminal.new} />
<IconButton icon="plus-small" variant="ghost" iconSize="large" onClick={terminal.new} aria-label="New terminal" />
</TooltipKeybind>
</div>
</Tabs.List>