mirror of
https://github.com/nimbold/Firelink.git
synced 2026-08-06 17:38:06 +00:00
fix(ui): avoid default modal action focus
This commit is contained in:
@@ -247,7 +247,6 @@ export const KeychainPermissionModal: React.FC<KeychainPermissionModalProps> = (
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={handleLater}
|
onClick={handleLater}
|
||||||
data-modal-autofocus="true"
|
|
||||||
className="keychain-modal-action px-4 py-2 rounded-lg text-sm font-medium text-text-secondary hover:bg-item-hover hover:text-text-primary disabled:opacity-50"
|
className="keychain-modal-action px-4 py-2 rounded-lg text-sm font-medium text-text-secondary hover:bg-item-hover hover:text-text-primary disabled:opacity-50"
|
||||||
>
|
>
|
||||||
{t($ => $.keychain.later)}
|
{t($ => $.keychain.later)}
|
||||||
|
|||||||
@@ -66,8 +66,10 @@ export const useModalFocus = (enabled = true) => {
|
|||||||
|
|
||||||
const focusInitialElement = () => {
|
const focusInitialElement = () => {
|
||||||
if (!isTopmostModal(surface)) return;
|
if (!isTopmostModal(surface)) return;
|
||||||
|
// Keep initial focus on the dialog itself. This avoids visually selecting
|
||||||
|
// an action when a modal opens from a pointer interaction; Tab still
|
||||||
|
// enters the first available control through the trap below.
|
||||||
const initialElement = surface.querySelector<HTMLElement>('[data-modal-autofocus="true"]')
|
const initialElement = surface.querySelector<HTMLElement>('[data-modal-autofocus="true"]')
|
||||||
|| getFocusableElements(surface)[0]
|
|
||||||
|| surface;
|
|| surface;
|
||||||
initialElement.focus({ preventScroll: true });
|
initialElement.focus({ preventScroll: true });
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -632,6 +632,11 @@ html[data-list-density="relaxed"] {
|
|||||||
contain: layout;
|
contain: layout;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* The panel is a focus anchor for the modal trap, not an action control. */
|
||||||
|
.app-modal[tabindex="-1"]:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
.keychain-modal {
|
.keychain-modal {
|
||||||
max-width: 560px;
|
max-width: 560px;
|
||||||
max-height: min(680px, 100%);
|
max-height: min(680px, 100%);
|
||||||
|
|||||||
Reference in New Issue
Block a user