[Refactor] Code Quality Improvements: Accessibility, Mobile Support, …

[TiZorii]

…i18n Defaults

Improvements:

• Default locale: uk → en
• Type-safe validation
• Mobile/touch support
• Keyboard accessibility

Summary by CodeRabbit

• New Features

  • Added keyboard accessibility for highlighted terms; users can now tab to and interact with term highlights using Enter or Space.

• Bug Fixes

  • Improved text selection detection mechanism for more reliable behavior.
  • Enhanced cache handling with improved validation and default initialization for greater stability.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for develop-devlovers ready!

Name	Link
🔨 Latest commit	bf902d9
🔍 Latest deploy log	https://app.netlify.com/projects/develop-devlovers/deploys/6976de7634ffe20008173978
😎 Deploy Preview	https://deploy-preview-213--develop-devlovers.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (2)

• frontend/package-lock.json is excluded by !**/package-lock.json
• studio/package-lock.json is excluded by !**/package-lock.json

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

📝 Walkthrough

Walkthrough

This PR refactors AI-related frontend components by centralizing configuration constants, consolidating utility functions, and improving event handling patterns. Changes include migrating IP retrieval to an imported function, exporting the cache key for reuse, enhancing keyboard accessibility, and replacing mouseup-based text selection detection with selectionchange events.

Changes

Cohort / File(s)	Change Summary
Rate-limiting consolidation frontend/app/api/ai/explain/route.ts	Removes local getClientIp implementation and imports it from '@/lib/security/rate-limit'; adds nullish coalescing fallback to 'unknown'.
Cache key centralization frontend/lib/ai/explainCache.ts, frontend/components/q&a/AccordionList.tsx	Exports CACHE_KEY constant from explainCache; AccordionList now imports and uses it instead of hardcoded string. Improves cache validation with isValidCacheData and getDefaultCache helpers.
Keyboard accessibility frontend/components/q&a/HighlightCachedTerms.tsx	Adds role="button", tabIndex={0}, and onKeyDown handler to cached term highlights; enables Enter/Space key activation and focus ring styling.
Event handling refactoring frontend/components/q&a/FloatingExplainButton.tsx, frontend/components/q&a/SelectableText.tsx	FloatingExplainButton: Introduces onDismissRef to prevent stale closures and adds 100ms delay before attaching event listeners. SelectableText: Replaces mouseup-based selection detection with selectionchange event; computes position from selection bounding rect and uses callback refs for latest onTextSelect/onSelectionClear.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• (SP:2) [Frontend] refactor: modularize auth pages and unify layout, fields, and banners #159: Introduced getClientIp utility in rate-limit.ts that this PR now imports into the explain route.
• (SP: 3) [AI] Add AI word helper with Groq integration #200: This PR continues iterative improvements to the same AI word helper components introduced in that PR.

Suggested labels

refactor

Suggested reviewers

• AM1007
• ViktorSvertoka

Poem

🐰 A refactor hops through the code,
Centralizing keys down the road,
Callbacks freed from stale-closure chains,
Selection flows through cleaner veins,
Keyboards now can navigate with ease! 🎉

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title is vague and generic, using incomplete phrasing ('…') without conveying specific changes; the raw summary shows multiple distinct refactoring areas but the title doesn't clearly indicate the primary focus.	Revise the title to be more specific and complete, e.g., 'Refactor Q&A components for accessibility, mobile support, and cache management' or 'Improve Q&A accessibility, mobile interaction, and rate limiting'.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}