feat(docs): improve a11y and lazy-load Inkeep search widget

[FarhanAliRaza]

Add accessible names to icon-only controls (copy-code, clear-input, search) and card overlay links, mark the feedback thumbs as a labeled group, and make the mobile nav overlay a real button.

Defer mounting the ~276 KB Inkeep widget (and its Google Fonts stylesheet) until the user activates search: render a lightweight placeholder trigger that mirrors the widget styling to avoid layout shift, forward Cmd/Ctrl+K to it, and mount the real widget with its controlled modal starting open so the same interaction opens search.

All Submissions:

• Have you followed the guidelines stated in CONTRIBUTING.md file?
• Have you checked to ensure there aren't any other open Pull Requests for the desired changed?

Type of change

Please delete options that are not relevant.

• New feature (non-breaking change which adds functionality)

New Feature Submission:

• Does your submission pass the tests?
• Have you linted your code locally prior to submission?

Changes To Core Features:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your core changes, as applicable?
• Have you successfully ran tests with your changes locally?

[codspeed-hq]

Merging this PR will not alter performance

✅ 26 untouched benchmarks
⏩ 8 skipped benchmarks¹

---

_{Comparing FarhanAliRaza:improve-lighhouse-score (c687125) with main (948c619)²}

Footnotes

1. 8 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

2. No successful run was found on main (3b97060) during the generation of this report, so 948c619 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

[greptile-apps]

Greptile Summary

This PR improves accessibility across the docs site and defers loading the ~276 KB Inkeep search widget until first user interaction. The a11y fixes (accessible labels on copy/clear/search controls, role="group" on the feedback thumbs, semantic <button> for the mobile nav overlay, and aria-label on card overlay anchors) are straightforward and correct across all nine changed files.

• The lazy-load mechanism works by showing a lightweight placeholder button that mirrors the Inkeep trigger styling; clicking it (or pressing Cmd/Ctrl+K) sets a ClientStateVar that mounts the real widget with its modal controlled open, while a CSS :has() rule hides the placeholder once Inkeep's shadow host appears.
• Platform detection and Cmd/Ctrl+K forwarding are handled in a useEffect hook that gracefully no-ops once the widget is ready.
• New tests cover the memoization boundary, placeholder visibility logic, kbd-hint font consistency, and dark-color overrides.

Confidence Score: 5/5

Safe to merge; all changes are additive a11y attributes and a well-isolated lazy-load wrapper with no server-side state involved.

The a11y additions are mechanical and low-risk. The Inkeep lazy-load refactor is self-contained within the Search component, uses only client-side state, and is backed by new tests. The one open question is whether the CSS direct-child selector correctly hides the placeholder in the live DOM — if it does not, the worst outcome is a cosmetic duplicate trigger, not breakage of core functionality.

docs/app/reflex_docs/views/inkeep.py — verify the :has(>) selector matches the actual DOM depth of Inkeep's shadow host.

Important Files Changed

Filename	Overview
docs/app/reflex_docs/views/inkeep.py	Major refactor: adds lazy loading for the Inkeep widget via ClientStateVar-controlled mount, a lightweight placeholder button, a CSS fallback to hide the placeholder once the widget loads, and a useEffect hook to adapt the keyboard shortcut label per platform and forward Cmd/Ctrl+K before the widget is ready. CSS direct-child selector in the fallback style may not match if intermediate DOM wrappers exist.
docs/app/reflex_docs/templates/docpage/docpage.py	Mobile nav overlay converted from rx.box to a semantic rx.el.button; feedback thumbs wrapped in a div with role=group and aria_label. Two separate Popover.Trigger elements inside one Popover.Root (pre-existing concern flagged in prior review thread).
docs/app/tests/test_inkeep.py	New test file covering memoization boundary, placeholder visibility logic, kbd-hint font consistency, and dark-color overrides for the lazy-load search widget.
packages/reflex-components-code/src/reflex_components_code/code.py	Adds aria_label="Copy code" to the icon-only copy button in CodeBlock.
packages/reflex-components-code/src/reflex_components_code/shiki_code_block.py	Adds aria_label="Copy code" to the icon-only copy button in ShikiHighLevelCodeBlock.
packages/reflex-components-internal/src/reflex_components_internal/components/base/input.py	Adds aria_label="Clear input" to the cancel button in HighLevelInput.
docs/app/reflex_docs/pages/docs_landing/views/ai_builder.py	Adds aria_label=title to the full-card overlay anchor so screen readers announce the card destination.
docs/app/reflex_docs/pages/docs_landing/views/framework.py	Adds aria_label=title to the full-card overlay anchor in docs_item.
docs/app/reflex_docs/pages/docs_landing/views/link_item.py	Adds aria_label=title to the full-card overlay anchor in link_item.

_{Reviews (4): Last reviewed commit: "fix(docs): match Inkeep kbd hint to the ..." | Re-trigger Greptile}

[masenf]

the text color in the placeholder doesn't quite match the text color after the widget loads

before load

after load

There's also a little blip between the hiding of the placeholder and the showing of the actual widget that would be nice to eliminate if possible

Screen.Recording.2026-07-09.at.3.40.59.PM.mov

[FarhanAliRaza]

fixed