Mirror: React hooks for accessible, common web interactions. UI super powers without the UI.
Fix small discrepancies in ownerRef handling and selection logic
+21
-8
+11
-1
src/useDialogFocus.ts
+11
-1
src/useDialogFocus.ts
···
120
120
focusIndex > 0 ? focusIndex - 1 : focusTargets.length - 1;
121
121
willReceiveFocus = true;
122
122
focusTargets[nextIndex].focus();
123
+
} else if (event.code === 'Home') {
124
+
// Implement Home => first item
125
+
event.preventDefault();
126
+
willReceiveFocus = true;
127
+
focusTargets[0].focus();
128
+
} else if (event.code === 'End') {
129
+
// Implement End => last item
130
+
event.preventDefault();
131
+
willReceiveFocus = true;
132
+
focusTargets[focusTargets.length - 1].focus();
123
133
} else if (
124
134
owner &&
125
135
!contains(ref.current, owner) &&
···
140
150
event.preventDefault();
141
151
const newTarget = getFirstFocusTarget(ref.current);
142
152
if (newTarget) {
143
-
selection = snapshotSelection(owner);
153
+
willReceiveFocus = true;
144
154
newTarget.focus();
145
155
}
146
156
} else if (
+3
-5
src/useMenuFocus.ts
+3
-5
src/useMenuFocus.ts
···
36
36
selection = snapshotSelection(owner);
37
37
} else if (
38
38
contains(ref.current, target) &&
39
-
!contains(ref.current, relatedTarget)
39
+
!contains(ref.current, relatedTarget) &&
40
+
(!ownerRef || contains(relatedTarget, ownerRef.current))
40
41
) {
41
42
// Check whether focus is about to move into the container and snapshot last focus
42
43
selection = snapshotSelection(owner);
···
101
102
// Move focus to first target when enter is pressed
102
103
event.preventDefault();
103
104
const newTarget = getFirstFocusTarget(ref.current);
104
-
if (newTarget) {
105
-
selection = snapshotSelection(owner);
106
-
newTarget.focus();
107
-
}
105
+
if (newTarget) newTarget.focus();
108
106
} else if (
109
107
owner &&
110
108
!contains(ref.current, owner) &&
+7
-2
src/utils/element.ts
+7
-2
src/utils/element.ts
···
24
24
);
25
25
26
26
export const contains = (
27
-
owner: Element | null,
27
+
owner: Element | EventTarget | null,
28
28
node: Element | EventTarget | null
29
-
) => !!(node && owner && (owner === node || owner.contains(node as Element)));
29
+
) =>
30
+
!!(
31
+
node &&
32
+
owner &&
33
+
(owner === node || (owner as Element).contains(node as Element))
34
+
);