Fix accessibility and Enter-key follow-ups in Gemini search

What does this MR do and why?

Follow-up to !246214 (merged) ("Add 'Search with Gemini' button and results to feature library modal"), addressing accessibility and UX issues identified in feature_library_modal.vue:

  1. No live region for async state changes — the Gemini section's searching/results/empty/error states were not announced to screen readers. Adds a persistent role="status" / aria-live="polite" region whose content updates across those states.
  2. Focus loss on button click — clicking "Search with Gemini" unmounted the button, silently dropping keyboard focus to <body>. Focus is now returned to the search input, which stays mounted throughout.
  3. Gemini section top border condition — extracted the inline template condition into a showGeminiTopBorder computed property for readability.
  4. Enter key in the search box closed the modal — pressing Enter navigated to the first result and closed the modal, which is surprising now that the search box is a real input. Enter now moves keyboard focus to the first result instead.
  5. Updated Gemini section results padding.

References

Related to #607535

Screenshots or screen recordings

Mostly behavioral/accessibility fixes (live region announcements, focus management). A small visual change to the Gemini section results padding is also included.

Before After

Gemini section padding:

Screenshot 2026-08-04 at 12.29.03 PM.png

How to set up and validate locally

  1. Open a project or group and open the "More Features" modal from the super sidebar.
  2. Type a search query of 2+ characters and click "Search with Gemini".
  3. With a screen reader enabled, confirm the searching/results/empty/error states are announced.
  4. Confirm keyboard focus returns to the search input after clicking "Search with Gemini" (it no longer stays on the removed button or drops to <body>).
  5. Type a query and press Enter in the search box — confirm the modal stays open and focus moves to the first result instead of navigating away.
  6. Trigger a Gemini search and confirm the results padding in the Gemini section looks correct.

If you don't have AI Gateway set up locally, apply this patch to stub out Gemini results instead of calling the AI Gateway:

Index: ee/app/services/ee/onboarding/feature_library/feature_match_service.rb
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/ee/app/services/ee/onboarding/feature_library/feature_match_service.rb b/ee/app/services/ee/onboarding/feature_library/feature_match_service.rb
--- a/ee/app/services/ee/onboarding/feature_library/feature_match_service.rb	(revision Staged)
+++ b/ee/app/services/ee/onboarding/feature_library/feature_match_service.rb	(date 1785893193293)
@@ -72,6 +72,7 @@
             resource: resource
           ).execute

+          return catalog.first(4).pluck(:id)
           return [] if catalog.empty?

           result = completion(catalog, normalized_query).execute

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Kiesha Herman

Merge request reports

Loading
Loading