refactor(ui): link event-log disclosure with aria-controls

Add aria-controls to the right-rail event-log collapse toggle pointing at
the log region, and title-case the settings label for consistency.
This commit is contained in:
ginnoir
2026-06-11 22:31:24 -05:00
parent 10a43729c5
commit 4d508ae77c
2 changed files with 3 additions and 2 deletions
+2 -1
View File
@@ -31,6 +31,7 @@ export function RightRail() {
<button <button
type="button" type="button"
aria-expanded={logOpen} aria-expanded={logOpen}
aria-controls="right-rail-event-log"
onClick={() => setLogOpen((prev) => !prev)} onClick={() => setLogOpen((prev) => !prev)}
className="mb-3 flex w-full items-center justify-between font-semibold text-slate-400 text-xs tracking-wider uppercase hover:text-slate-300" className="mb-3 flex w-full items-center justify-between font-semibold text-slate-400 text-xs tracking-wider uppercase hover:text-slate-300"
> >
@@ -39,7 +40,7 @@ export function RightRail() {
{logOpen ? '▾' : '▸'} {logOpen ? '▾' : '▸'}
</span> </span>
</button> </button>
{logOpen && <EventLog />} <div id="right-rail-event-log">{logOpen && <EventLog />}</div>
</div> </div>
)} )}
</div> </div>
+1 -1
View File
@@ -84,7 +84,7 @@ export function SettingsPanel() {
<div className="flex flex-col gap-2 rounded-xl border border-slate-800 bg-slate-900/40 p-5"> <div className="flex flex-col gap-2 rounded-xl border border-slate-800 bg-slate-900/40 p-5">
<label className="flex cursor-pointer items-center justify-between gap-4"> <label className="flex cursor-pointer items-center justify-between gap-4">
<div className="flex flex-col"> <div className="flex flex-col">
<span className="font-semibold text-slate-200 text-sm">Show event log</span> <span className="font-semibold text-slate-200 text-sm">Show Event Log</span>
<span className="text-slate-400 text-xs"> <span className="text-slate-400 text-xs">
Display the scrollable event log in the right rail and on mobile. Display the scrollable event log in the right rail and on mobile.
</span> </span>