Fix required keys validation tooltip position in emergency access settings

[mindmonk]

• Validation tooltip for the "Required Keys" input in AdminSettingsEmergencyAccess was rendered below the input instead of above it
• Restructured tooltip markup to match the existing pattern used by the keyholders field (MultiUserSelectInputGroup): -translate-y-full to position above, arrow inside the tooltip box pointing downward

Before:

After:

[coderabbitai]

Walkthrough

A tooltip layout component in the AdminSettingsEmergencyAccess.vue file was refactored to simplify its DOM structure and CSS positioning. The wrapper arrangement was restructured, the tooltip arrow element was moved inside the tooltip content with centered positioning, and a duplicate arrow markup was removed. The functional behavior and conditional rendering logic remain unchanged. Approximately 19 lines were added and 18 removed.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested reviewers

• overheadhunter
• SailReal

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: fixing the tooltip position for required keys validation in emergency access settings.
Description check	✅ Passed	The description is clearly related to the changeset, explaining the validation tooltip positioning issue, the restructuring approach, and providing before/after screenshots.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/required-key-validation-tooltip-position

---

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.}

[coderabbitai]

🧹 Nitpick comments (1)

frontend/src/components/AdminSettingsEmergencyAccess.vue (1)

55-72: Improve error tooltip accessibility linkage to the input.

Please link the tooltip and input for screen readers (aria-invalid, aria-describedby, role="alert"), and make the tooltip box relative so the arrow is anchored to it predictably.

Suggested patch

             <div
               v-if="defaultRequiredEmergencyKeySharesLessThenTwoError || defaultRequiredEmergencyKeySharesToHighError instanceof FormValidationFailedError"
+              id="requiredKeySharesError"
+              role="alert"
+              aria-live="polite"
               class="absolute left-1/2 -translate-x-1/2 -top-2 transform -translate-y-full z-10"
             >
-              <div class="bg-red-50 border border-red-300 text-red-900 px-2 py-1 rounded shadow-sm text-sm hyphens-auto">
+              <div class="relative bg-red-50 border border-red-300 text-red-900 px-2 py-1 rounded shadow-sm text-sm hyphens-auto">
                 {{ requiredKeySharesValidationText }}
                 <!-- Arrow -->
                 <div class="absolute bottom-0 left-1/2 transform translate-y-1/2 rotate-45 w-2 h-2 bg-red-50 border-r border-b border-red-300"></div>
               </div>
             </div>
             <input
               id="requiredKeyShares"
               v-model.number="requiredShares"
               type="number" min="2" max="255"
               :disabled="!enableEmergencyAccess"
               class="rounded-md border-gray-300 shadow-sm sm:text-sm focus:ring-primary focus:border-primary text-left w-full disabled:cursor-not-allowed disabled:bg-gray-200"
               :class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': defaultRequiredEmergencyKeySharesError || defaultRequiredEmergencyKeySharesToHighError instanceof FormValidationFailedError}"
+              :aria-invalid="!!(defaultRequiredEmergencyKeySharesLessThenTwoError || defaultRequiredEmergencyKeySharesToHighError)"
+              :aria-describedby="(defaultRequiredEmergencyKeySharesLessThenTwoError || defaultRequiredEmergencyKeySharesToHighError) ? 'requiredKeySharesError' : undefined"
               :aria-label="t('admin.emergencyAccess.requiredKeys.ariaLabel')"
             />

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/src/components/AdminSettingsEmergencyAccess.vue` around lines 55 -
72, Make the validation tooltip accessible by giving the tooltip a stable id and
a relative container, adding role="alert" to it, and linking it to the input via
aria-describedby and aria-invalid when any validation error is present: update
the tooltip div (the element shown when
defaultRequiredEmergencyKeySharesLessThenTwoError ||
defaultRequiredEmergencyKeySharesToHighError instanceof
FormValidationFailedError) to include a unique id (e.g.,
requiredKeySharesErrorId), add the CSS positioning class relative to the tooltip
container so the arrow anchors predictably, and add role="alert"; then update
the input with id="requiredKeyShares" to set :aria-describedby="error ?
'requiredKeySharesErrorId' : null" and :aria-invalid="error" (where error is the
existing expression checking defaultRequiredEmergencyKeyShares... and
defaultRequiredEmergencyKeySharesToHighError instanceof
FormValidationFailedError or defaultRequiredEmergencyKeySharesError), keeping
the existing v-model.number="requiredShares" and class bindings unchanged and
referencing the same boolean expressions (or a new computed like
hasRequiredKeySharesError) to ensure screen readers are informed.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@frontend/src/components/AdminSettingsEmergencyAccess.vue`:
- Around line 55-72: Make the validation tooltip accessible by giving the
tooltip a stable id and a relative container, adding role="alert" to it, and
linking it to the input via aria-describedby and aria-invalid when any
validation error is present: update the tooltip div (the element shown when
defaultRequiredEmergencyKeySharesLessThenTwoError ||
defaultRequiredEmergencyKeySharesToHighError instanceof
FormValidationFailedError) to include a unique id (e.g.,
requiredKeySharesErrorId), add the CSS positioning class relative to the tooltip
container so the arrow anchors predictably, and add role="alert"; then update
the input with id="requiredKeyShares" to set :aria-describedby="error ?
'requiredKeySharesErrorId' : null" and :aria-invalid="error" (where error is the
existing expression checking defaultRequiredEmergencyKeyShares... and
defaultRequiredEmergencyKeySharesToHighError instanceof
FormValidationFailedError or defaultRequiredEmergencyKeySharesError), keeping
the existing v-model.number="requiredShares" and class bindings unchanged and
referencing the same boolean expressions (or a new computed like
hasRequiredKeySharesError) to ensure screen readers are informed.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: cdaa2913-a848-458f-89c4-06dc9ebff44e

📥 Commits

Reviewing files that changed from the base of the PR and between 23fe979 and 77b1dc2.

📒 Files selected for processing (1)

• frontend/src/components/AdminSettingsEmergencyAccess.vue