Skip to content

🎨 Palette: Search panel accessibility improvements #143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
dezren39 wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

🎨 Palette: Search panel accessibility improvements #143

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
29972bf
UX: Add ARIA labels to search panel inputs and icon buttons
google-labs-jules[bot] Oct 7, 2026
500c402
CI: fix auto-assign workflow by upgrading action version
google-labs-jules[bot] Oct 7, 2026
8060871
Build: Add cmake to nativeBuildInputs for id-web and id-lib
google-labs-jules[bot] Oct 7, 2026
bd7b396
Build: Fix missing cmake build dependency for libsql-ffi
google-labs-jules[bot] Oct 7, 2026
6f7b162
Build: Fix missing cmake in nix check environments
google-labs-jules[bot] Oct 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## 2024-05-24 - Search Panel Accessibility
**Learning:** Found a specific accessibility issue pattern in the custom ProseMirror search panel components where icon-only buttons (like prev/next/close) and search inputs lacked aria-labels, relying solely on placeholder text and visual titles which are insufficient for screen readers.
**Action:** Always ensure custom Prosemirror floating panels use explicit `aria-label` attributes for inputs and icon-only buttons, as they don't inherit default accessible structures from the main editor.
6 changes: 4 additions & 2 deletions pkgs/id/flake.nix
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
name = "id-integration-test-runner";
src = ./.;
inherit buildInputs;
nativeBuildInputs = nativeBuildInputs ++ [ bun2nixPkg.hook ];
nativeBuildInputs = nativeBuildInputs ++ [ bun2nixPkg.hook pkgs.cmake ];
inherit (opensslEnv) OPENSSL_DIR;
inherit (opensslEnv) OPENSSL_LIB_DIR;
inherit (opensslEnv) OPENSSL_INCLUDE_DIR;
Expand Down Expand Up @@ -169,7 +169,7 @@
name = "id-${name}";
src = ./.;
inherit buildInputs;
nativeBuildInputs = nativeBuildInputs ++ [ bun2nixPkg.hook ];
nativeBuildInputs = nativeBuildInputs ++ [ bun2nixPkg.hook pkgs.cmake ];
inherit (opensslEnv) OPENSSL_DIR;
inherit (opensslEnv) OPENSSL_LIB_DIR;
inherit (opensslEnv) OPENSSL_INCLUDE_DIR;
Expand Down Expand Up @@ -589,6 +589,7 @@

inherit buildInputs;
nativeBuildInputs = [
pkgs.cmake
pkgs.pkg-config
rustToolchain
pkgs.bun
Expand Down Expand Up @@ -646,6 +647,7 @@

inherit buildInputs;
nativeBuildInputs = [
pkgs.cmake
pkgs.pkg-config
rustToolchain
];
Expand Down
10 changes: 5 additions & 5 deletions pkgs/id/web/src/search-panel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,20 +104,20 @@ function createPanel(container: HTMLElement): HTMLElement {

panel.innerHTML = `
<div class="search-panel-row">
<input type="text" id="search-input" class="search-field" placeholder="Find…" autocomplete="off" spellcheck="false" />
<input type="text" id="search-input" class="search-field" placeholder="Find…" aria-label="Find text" autocomplete="off" spellcheck="false" />
<span class="search-match-count" id="search-match-count"></span>
<button class="search-btn" id="search-prev" title="Previous (Shift+Enter)">&#x25B2;</button>
<button class="search-btn" id="search-next" title="Next (Enter)">&#x25BC;</button>
<button class="search-btn" id="search-prev" title="Previous (Shift+Enter)" aria-label="Find previous match">&#x25B2;</button>
<button class="search-btn" id="search-next" title="Next (Enter)" aria-label="Find next match">&#x25BC;</button>
<label class="search-toggle" title="Case sensitive">
<input type="checkbox" id="search-case" /><span>Aa</span>
</label>
<label class="search-toggle" title="Regular expression">
<input type="checkbox" id="search-regex" /><span>.*</span>
</label>
<button class="search-btn search-close" id="search-close" title="Close (Escape)">&times;</button>
<button class="search-btn search-close" id="search-close" title="Close (Escape)" aria-label="Close search panel">&times;</button>
</div>
<div class="search-panel-row search-replace-row" id="search-replace-row" style="display:none">
<input type="text" id="replace-input" class="search-field" placeholder="Replace…" autocomplete="off" spellcheck="false" />
<input type="text" id="replace-input" class="search-field" placeholder="Replace…" aria-label="Replace text" autocomplete="off" spellcheck="false" />
<button class="search-btn" id="replace-one" title="Replace">Replace</button>
<button class="search-btn" id="replace-all" title="Replace all">All</button>
</div>
Expand Down
Loading