From c18ce512aa7d727a75e573280b8032c9c4560844 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 5 Jun 2026 12:55:16 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20accessibili?=
 =?UTF-8?q?ty=20labels=20and=20modal=20focus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Converted the non-semantic `<h4>` header to a proper `<label>` element for the Google Books API Key input.
- Added an `aria-label` to the folder path input in the library sources settings.
- Added `autoFocus` to the primary title input field in the Add Book Manually modal to improve keyboard navigation flow.

Co-authored-by: jspann21 <179991454+jspann21@users.noreply.github.com>
---
 .Jules/palette.md                                              | 0
 src/features/library/components/ManualBookModal.tsx            | 2 +-
 .../library/components/settings/IntegrationsSection.tsx        | 3 ++-
 .../library/components/settings/LibrarySourcesSection.tsx      | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..e69de29
diff --git a/src/features/library/components/ManualBookModal.tsx b/src/features/library/components/ManualBookModal.tsx
index 1ae1c5f..6de7ab8 100644
--- a/src/features/library/components/ManualBookModal.tsx
+++ b/src/features/library/components/ManualBookModal.tsx
@@ -159,7 +159,7 @@ export function ManualBookModal({
                     <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                         <div className="md:col-span-2">
                             <label htmlFor="manual-book-title" className={labelClass}>Title <span className="text-rose-500" aria-hidden="true">*</span></label>
-                            <input id="manual-book-title" required className={inputClass} value={form.title} onChange={(event) => updateField('title', event.target.value)} />
+                            <input id="manual-book-title" autoFocus required className={inputClass} value={form.title} onChange={(event) => updateField('title', event.target.value)} />
                         </div>
                         <div className="md:col-span-2">
                             <label htmlFor="manual-book-subtitle" className={labelClass}>Subtitle</label>
diff --git a/src/features/library/components/settings/IntegrationsSection.tsx b/src/features/library/components/settings/IntegrationsSection.tsx
index a9bdfd0..51623b7 100644
--- a/src/features/library/components/settings/IntegrationsSection.tsx
+++ b/src/features/library/components/settings/IntegrationsSection.tsx
@@ -35,12 +35,13 @@ export function IntegrationsSection({
             </div>
             <div className="space-y-4 p-6">
                 <div className="rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-700 dark:bg-slate-900/30">
-                    <h4 className="text-sm font-medium text-slate-900 dark:text-slate-100">Google Books API Key</h4>
+                    <label htmlFor="google-books-api-key" className="block text-sm font-medium text-slate-900 dark:text-slate-100">Google Books API Key</label>
                     <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
                         Stored in your OS credential manager (Windows Credential Manager, macOS Keychain, or Linux Secret Service). The key is never shown after save.
                     </p>
                     <div className="mt-3 grid gap-2 md:grid-cols-[1fr_auto_auto_auto]">
                         <input
+                            id="google-books-api-key"
                             type="password"
                             autoComplete="off"
                             spellCheck={false}
diff --git a/src/features/library/components/settings/LibrarySourcesSection.tsx b/src/features/library/components/settings/LibrarySourcesSection.tsx
index ed6dca4..2be70fa 100644
--- a/src/features/library/components/settings/LibrarySourcesSection.tsx
+++ b/src/features/library/components/settings/LibrarySourcesSection.tsx
@@ -64,7 +64,7 @@ export function LibrarySourcesSection({
             </div>
             <div className="space-y-4 p-6">
                 <div className="grid gap-2 md:grid-cols-[1fr_auto_auto]">
-                    <input className="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900/30" placeholder="Add folder path (e.g. C:\\Books)" value={folderPath} onChange={(event) => onSetFolderPath(event.target.value)} />
+                    <input aria-label="Folder path" className="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900/30" placeholder="Add folder path (e.g. C:\\Books)" value={folderPath} onChange={(event) => onSetFolderPath(event.target.value)} />
                     <button className="rounded-lg border border-slate-300 px-3 py-2 text-sm transition-colors hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-700" onClick={onBrowseForFolder}><FolderOpen className="mr-2 inline-block" size={14} />Browse</button>
                     <DisabledTooltip className="grid" reason={addFolderDisabledReason}>
                         <button className="rounded-lg bg-accent-600 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-700 disabled:pointer-events-none disabled:opacity-50" disabled={!folderPath.trim() || isAddingFolder} onClick={onAddFolder}>Add Folder</button>