Loading
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:
- 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. - 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. - Gemini section top border condition — extracted the inline template condition into a
showGeminiTopBordercomputed property for readability. - 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.
- 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: |
How to set up and validate locally
- Open a project or group and open the "More Features" modal from the super sidebar.
- Type a search query of 2+ characters and click "Search with Gemini".
- With a screen reader enabled, confirm the searching/results/empty/error states are announced.
- 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>). - 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.
- 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).executeMR 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
