From a09fabef9cf5c93ddf8a9fc6652b56f9db194ea4 Mon Sep 17 00:00:00 2001
From: PJ Doland <pj@doland.org>
Date: Mon, 18 May 2026 12:24:46 -0400
Subject: [PATCH 1/3] a11y(chat-sidebar): promote header icon-divs to real
 buttons

The new-chat, resume-session, settings, and tools-button icons in the
chat sidebar were <div onClick> nodes with no tabIndex or keyboard
handler. Keyboard users could not reach them at all and screen readers
announced them as generic group nodes. Promote to <button type='button'>
so they pick up native Enter/Space, the browser focus ring, and 'button'
role announcement.

Also fills in missing aria-labels (resume-session, tools-button) so the
icon-only buttons no longer announce as empty.

Adds a :focus-visible outline using --jp-brand-color1 so the converted
buttons surface a visible focus ring without firing on plain clicks.
---
 src/chat-sidebar.tsx | 26 ++++++++++++++++++--------
 style/base.css       | 10 ++++++++++
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/chat-sidebar.tsx b/src/chat-sidebar.tsx
index 47d9f849..fb1645d8 100644
--- a/src/chat-sidebar.tsx
+++ b/src/chat-sidebar.tsx
@@ -3552,31 +3552,35 @@ function SidebarComponent(props: any) {
         <div className="sidebar-title">Notebook Intelligence</div>
         {NBIAPI.config.isInClaudeCodeMode && (
           <>
-            <div
+            <button
+              type="button"
               className="user-input-footer-button"
               onClick={() => startNewChatSession()}
               title="Start a new chat session (restarts the Claude client)"
               aria-label="Start a new chat session"
             >
               <VscAdd />
-            </div>
-            <div
+            </button>
+            <button
+              type="button"
               className="user-input-footer-button"
               onClick={() => setShowClaudeSessionPicker(true)}
               title="Resume previous Claude session"
+              aria-label="Resume previous Claude session"
             >
               <VscHistory />
-            </div>
+            </button>
           </>
         )}
-        <div
+        <button
+          type="button"
           className="user-input-footer-button"
           onClick={() => handleSettingsButtonClick()}
           title="Open Notebook Intelligence settings"
           aria-label="Open Notebook Intelligence settings"
         >
           <VscSettingsGear />
-        </div>
+        </button>
       </div>
       <div className="nbi-status-banner-live" aria-live="polite">
         {skillsReloadedVisible && (
@@ -3871,7 +3875,8 @@ function SidebarComponent(props: any) {
                 </div>
               )}
               {chatMode !== 'ask' && !NBIAPI.config.isInClaudeCodeMode && (
-                <div
+                <button
+                  type="button"
                   className={`user-input-footer-button tools-button ${unsafeToolSelected ? 'tools-button-warning' : selectedToolCount > 0 ? 'tools-button-active' : ''}`}
                   onClick={() => handleChatToolsButtonClick()}
                   title={
@@ -3879,10 +3884,15 @@ function SidebarComponent(props: any) {
                       ? `Tool selection can cause irreversible changes! Review each tool execution carefully.\n${toolSelectionTitle}`
                       : toolSelectionTitle
                   }
+                  aria-label={
+                    unsafeToolSelected
+                      ? 'Configure tools (warning: irreversible tools selected)'
+                      : 'Configure tools'
+                  }
                 >
                   <VscTools />
                   {selectedToolCount > 0 && <>{selectedToolCount}</>}
-                </div>
+                </button>
               )}
               {NBIAPI.config.isInClaudeCodeMode && (
                 <span
diff --git a/style/base.css b/style/base.css
index f5f2087d..6c977746 100644
--- a/style/base.css
+++ b/style/base.css
@@ -287,6 +287,16 @@ button.user-input-footer-button {
   justify-content: center;
 }
 
+/* Visible focus ring for keyboard users. :focus-visible keeps it from
+   firing on a plain click. The 2px outline + 1px offset mirrors how
+   JupyterLab's own toolbar buttons signal focus. */
+.user-input-footer-button:focus-visible {
+  outline: 2px solid var(--jp-brand-color1, #2196f3);
+  outline-offset: 1px;
+  border-radius: 3px;
+  color: var(--jp-ui-font-color1);
+}
+
 /* The slash-button (mentions and commands) renders text rather than an
    svg, so size and center the glyph instead of relying on the svg rule. */
 .user-input-footer-slash-button {

From 000fb2d106bfc838b0b0ec8b93e6dfc08cd1e665 Mon Sep 17 00:00:00 2001
From: PJ Doland <pj@doland.org>
Date: Mon, 18 May 2026 12:28:10 -0400
Subject: [PATCH 2/3] review: differentiate title vs aria-label, tighten button
 reset

Six-reviewer pass surfaced two convergent points: identical title and
aria-label strings get read twice by NVDA, and the focus-ring fallback
color drifts from the rest of base.css. Differentiate the strings (short
name in aria-label, longer description in title) and drop the literal
#2196f3 fallback. Also adds line-height: 1 to the button reset so the
tools-button badge stays aligned across the div-to-button conversion.
---
 src/chat-sidebar.tsx |  4 ++--
 style/base.css       | 11 +++++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/chat-sidebar.tsx b/src/chat-sidebar.tsx
index fb1645d8..cd3c7c74 100644
--- a/src/chat-sidebar.tsx
+++ b/src/chat-sidebar.tsx
@@ -3565,8 +3565,8 @@ function SidebarComponent(props: any) {
               type="button"
               className="user-input-footer-button"
               onClick={() => setShowClaudeSessionPicker(true)}
-              title="Resume previous Claude session"
               aria-label="Resume previous Claude session"
+              title="Resume a Claude session you started earlier in this workspace"
             >
               <VscHistory />
             </button>
@@ -3576,8 +3576,8 @@ function SidebarComponent(props: any) {
           type="button"
           className="user-input-footer-button"
           onClick={() => handleSettingsButtonClick()}
-          title="Open Notebook Intelligence settings"
           aria-label="Open Notebook Intelligence settings"
+          title="Configure providers, API keys, MCP servers, and skills"
         >
           <VscSettingsGear />
         </button>
diff --git a/style/base.css b/style/base.css
index 6c977746..82ef2083 100644
--- a/style/base.css
+++ b/style/base.css
@@ -277,21 +277,24 @@
 }
 
 /* Reset native chrome on the footer buttons that now render as <button>
-   so they line up visually with the older <div onClick> variants. */
+   so they line up visually with the older <div onClick> variants.
+   `line-height: 1` keeps the tools-button badge from drifting a pixel
+   relative to the icon when rendered inside a button vs a div. */
 button.user-input-footer-button {
   background: none;
   border: none;
   font: inherit;
+  line-height: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
 /* Visible focus ring for keyboard users. :focus-visible keeps it from
-   firing on a plain click. The 2px outline + 1px offset mirrors how
-   JupyterLab's own toolbar buttons signal focus. */
+   firing on a plain click. Matches the brand-color focus indicator
+   the other NBI buttons use elsewhere in this stylesheet. */
 .user-input-footer-button:focus-visible {
-  outline: 2px solid var(--jp-brand-color1, #2196f3);
+  outline: 2px solid var(--jp-brand-color1);
   outline-offset: 1px;
   border-radius: 3px;
   color: var(--jp-ui-font-color1);

From 0e7c48092e3b19dc228781ebe6960d08b1ea8d96 Mon Sep 17 00:00:00 2001
From: PJ Doland <pj@doland.org>
Date: Mon, 18 May 2026 12:29:27 -0400
Subject: [PATCH 3/3] test(galata): pin keyboard focus + Enter activation on
 sidebar gear
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sixth-reviewer pass flagged that the existing gear test pinned a title
attribute, not the underlying button semantics. Update the assertion to
target the new aria-label, then drive the gear via Tab/Enter so the test
fails if a future refactor regresses the div→button conversion.
---
 ui-tests/tests/chat-sidebar.spec.ts | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/ui-tests/tests/chat-sidebar.spec.ts b/ui-tests/tests/chat-sidebar.spec.ts
index 11617d4c..1affe4d0 100644
--- a/ui-tests/tests/chat-sidebar.spec.ts
+++ b/ui-tests/tests/chat-sidebar.spec.ts
@@ -35,14 +35,30 @@ test.describe('chat sidebar layout', () => {
     await expect(slash).toHaveText('/');
   });
 
-  test('sidebar-header gear icon carries a title', async ({ page }) => {
-    // The gear used to ship without a title attribute while its neighbours
-    // had one; users hovering the icon got no affordance. Pin the title.
+  test('sidebar-header gear is a focusable, labelled button', async ({
+    page
+  }) => {
+    // Regression guard for D155 / D156: the gear used to be a <div onClick>
+    // so keyboard users could not reach it. Pin that it is now a real
+    // <button> with an aria-label, that Tab focus lands on it, and that
+    // pressing Enter dispatches its click handler (the settings dialog
+    // opens as the observable side effect).
     await openChatSidebar(page);
     const gear = page
-      .locator('.sidebar-header [title="Open Notebook Intelligence settings"]')
+      .locator(
+        '.sidebar-header button[aria-label="Open Notebook Intelligence settings"]'
+      )
       .first();
     await expect(gear).toBeVisible();
+    await gear.focus();
+    await expect(gear).toBeFocused();
+    await page.keyboard.press('Enter');
+    // The settings command opens an NBI settings widget in the main area.
+    // Asserting the panel's wrapper appears proves Enter dispatched the
+    // button's onClick handler.
+    await expect(page.locator('.nbi-settings-panel').first()).toBeVisible({
+      timeout: 5000
+    });
   });
 });