@react-aria/landmark 3.0.0-nightly.4624 → 3.0.0-nightly.4637
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/useLandmark.main.js +25 -25
- package/dist/useLandmark.mjs +25 -25
- package/dist/useLandmark.module.js +25 -25
- package/package.json +4 -4
package/dist/useLandmark.main.js
CHANGED
|
@@ -26,20 +26,20 @@ $parcel$export(module.exports, "useLandmark", () => $202c109aedff6705$export$4cc
|
|
|
26
26
|
// LandmarkManagerApi or Landmark interfaces change.
|
|
27
27
|
const $202c109aedff6705$var$LANDMARK_API_VERSION = 1;
|
|
28
28
|
// Symbol under which the singleton landmark manager instance is attached to the document.
|
|
29
|
-
const $202c109aedff6705$var$landmarkSymbol = Symbol.for(
|
|
29
|
+
const $202c109aedff6705$var$landmarkSymbol = Symbol.for('react-aria-landmark-manager');
|
|
30
30
|
function $202c109aedff6705$var$subscribe(fn) {
|
|
31
|
-
document.addEventListener(
|
|
32
|
-
return ()=>document.removeEventListener(
|
|
31
|
+
document.addEventListener('react-aria-landmark-manager-change', fn);
|
|
32
|
+
return ()=>document.removeEventListener('react-aria-landmark-manager-change', fn);
|
|
33
33
|
}
|
|
34
34
|
function $202c109aedff6705$var$getLandmarkManager() {
|
|
35
|
-
if (typeof document ===
|
|
35
|
+
if (typeof document === 'undefined') return null;
|
|
36
36
|
// Reuse an existing instance if it has the same or greater version.
|
|
37
37
|
let instance = document[$202c109aedff6705$var$landmarkSymbol];
|
|
38
38
|
if (instance && instance.version >= $202c109aedff6705$var$LANDMARK_API_VERSION) return instance;
|
|
39
39
|
// Otherwise, create a new instance and dispatch an event so anything using the existing
|
|
40
40
|
// instance updates and re-registers their landmarks with the new one.
|
|
41
41
|
document[$202c109aedff6705$var$landmarkSymbol] = new $202c109aedff6705$var$LandmarkManager();
|
|
42
|
-
document.dispatchEvent(new CustomEvent(
|
|
42
|
+
document.dispatchEvent(new CustomEvent('react-aria-landmark-manager-change'));
|
|
43
43
|
return document[$202c109aedff6705$var$landmarkSymbol];
|
|
44
44
|
}
|
|
45
45
|
// Subscribes a React component to the current landmark manager instance.
|
|
@@ -49,26 +49,26 @@ function $202c109aedff6705$var$useLandmarkManager() {
|
|
|
49
49
|
class $202c109aedff6705$var$LandmarkManager {
|
|
50
50
|
setupIfNeeded() {
|
|
51
51
|
if (this.isListening) return;
|
|
52
|
-
document.addEventListener(
|
|
52
|
+
document.addEventListener('keydown', this.f6Handler, {
|
|
53
53
|
capture: true
|
|
54
54
|
});
|
|
55
|
-
document.addEventListener(
|
|
55
|
+
document.addEventListener('focusin', this.focusinHandler, {
|
|
56
56
|
capture: true
|
|
57
57
|
});
|
|
58
|
-
document.addEventListener(
|
|
58
|
+
document.addEventListener('focusout', this.focusoutHandler, {
|
|
59
59
|
capture: true
|
|
60
60
|
});
|
|
61
61
|
this.isListening = true;
|
|
62
62
|
}
|
|
63
63
|
teardownIfNeeded() {
|
|
64
64
|
if (!this.isListening || this.landmarks.length > 0 || this.refCount > 0) return;
|
|
65
|
-
document.removeEventListener(
|
|
65
|
+
document.removeEventListener('keydown', this.f6Handler, {
|
|
66
66
|
capture: true
|
|
67
67
|
});
|
|
68
|
-
document.removeEventListener(
|
|
68
|
+
document.removeEventListener('focusin', this.focusinHandler, {
|
|
69
69
|
capture: true
|
|
70
70
|
});
|
|
71
|
-
document.removeEventListener(
|
|
71
|
+
document.removeEventListener('focusout', this.focusoutHandler, {
|
|
72
72
|
capture: true
|
|
73
73
|
});
|
|
74
74
|
this.isListening = false;
|
|
@@ -90,7 +90,7 @@ class $202c109aedff6705$var$LandmarkManager {
|
|
|
90
90
|
addLandmark(newLandmark) {
|
|
91
91
|
this.setupIfNeeded();
|
|
92
92
|
if (this.landmarks.find((landmark)=>landmark.ref === newLandmark.ref) || !newLandmark.ref.current) return;
|
|
93
|
-
if (this.landmarks.filter((landmark)=>landmark.role ===
|
|
93
|
+
if (this.landmarks.filter((landmark)=>landmark.role === 'main').length > 1) console.error('Page can contain no more than one landmark with the role "main".');
|
|
94
94
|
if (this.landmarks.length === 0) {
|
|
95
95
|
this.landmarks = [
|
|
96
96
|
newLandmark
|
|
@@ -177,18 +177,18 @@ class $202c109aedff6705$var$LandmarkManager {
|
|
|
177
177
|
// When we reach the end of the landmark sequence, fire a custom event that can be listened for by applications.
|
|
178
178
|
// If this event is canceled, we return immediately. This can be used to implement landmark navigation across iframes.
|
|
179
179
|
if (nextLandmarkIndex < 0) {
|
|
180
|
-
if (!element.dispatchEvent(new CustomEvent(
|
|
180
|
+
if (!element.dispatchEvent(new CustomEvent('react-aria-landmark-navigation', {
|
|
181
181
|
detail: {
|
|
182
|
-
direction:
|
|
182
|
+
direction: 'backward'
|
|
183
183
|
},
|
|
184
184
|
bubbles: true,
|
|
185
185
|
cancelable: true
|
|
186
186
|
}))) return true;
|
|
187
187
|
nextLandmarkIndex = this.landmarks.length - 1;
|
|
188
188
|
} else if (nextLandmarkIndex >= this.landmarks.length) {
|
|
189
|
-
if (!element.dispatchEvent(new CustomEvent(
|
|
189
|
+
if (!element.dispatchEvent(new CustomEvent('react-aria-landmark-navigation', {
|
|
190
190
|
detail: {
|
|
191
|
-
direction:
|
|
191
|
+
direction: 'forward'
|
|
192
192
|
},
|
|
193
193
|
bubbles: true,
|
|
194
194
|
cancelable: true
|
|
@@ -201,7 +201,7 @@ class $202c109aedff6705$var$LandmarkManager {
|
|
|
201
201
|
if (wrapIfNeeded()) return undefined;
|
|
202
202
|
// Skip over hidden landmarks.
|
|
203
203
|
let i = nextLandmarkIndex;
|
|
204
|
-
while((_this_landmarks_nextLandmarkIndex_ref_current = this.landmarks[nextLandmarkIndex].ref.current) === null || _this_landmarks_nextLandmarkIndex_ref_current === void 0 ? void 0 : _this_landmarks_nextLandmarkIndex_ref_current.closest(
|
|
204
|
+
while((_this_landmarks_nextLandmarkIndex_ref_current = this.landmarks[nextLandmarkIndex].ref.current) === null || _this_landmarks_nextLandmarkIndex_ref_current === void 0 ? void 0 : _this_landmarks_nextLandmarkIndex_ref_current.closest('[aria-hidden=true]')){
|
|
205
205
|
nextLandmarkIndex += backward ? -1 : 1;
|
|
206
206
|
if (wrapIfNeeded()) return undefined;
|
|
207
207
|
if (nextLandmarkIndex === i) break;
|
|
@@ -213,7 +213,7 @@ class $202c109aedff6705$var$LandmarkManager {
|
|
|
213
213
|
* If not, focus the landmark itself.
|
|
214
214
|
* If no landmarks at all, or none with focusable elements, don't move focus.
|
|
215
215
|
*/ f6Handler(e) {
|
|
216
|
-
if (e.key ===
|
|
216
|
+
if (e.key === 'F6') {
|
|
217
217
|
// If alt key pressed, focus main landmark, otherwise navigate forward or backward based on shift key.
|
|
218
218
|
let handled = e.altKey ? this.focusMain() : this.navigate(e.target, e.shiftKey);
|
|
219
219
|
if (handled) {
|
|
@@ -223,9 +223,9 @@ class $202c109aedff6705$var$LandmarkManager {
|
|
|
223
223
|
}
|
|
224
224
|
}
|
|
225
225
|
focusMain() {
|
|
226
|
-
let main = this.getLandmarkByRole(
|
|
226
|
+
let main = this.getLandmarkByRole('main');
|
|
227
227
|
if (main && main.ref.current && document.contains(main.ref.current)) {
|
|
228
|
-
this.focusLandmark(main.ref.current,
|
|
228
|
+
this.focusLandmark(main.ref.current, 'forward');
|
|
229
229
|
return true;
|
|
230
230
|
}
|
|
231
231
|
return false;
|
|
@@ -245,7 +245,7 @@ class $202c109aedff6705$var$LandmarkManager {
|
|
|
245
245
|
}
|
|
246
246
|
// Otherwise, focus the landmark itself
|
|
247
247
|
if (nextLandmark.ref.current && document.contains(nextLandmark.ref.current)) {
|
|
248
|
-
this.focusLandmark(nextLandmark.ref.current, backward ?
|
|
248
|
+
this.focusLandmark(nextLandmark.ref.current, backward ? 'backward' : 'forward');
|
|
249
249
|
return true;
|
|
250
250
|
}
|
|
251
251
|
return false;
|
|
@@ -284,7 +284,7 @@ class $202c109aedff6705$var$LandmarkManager {
|
|
|
284
284
|
return {
|
|
285
285
|
navigate (direction, opts) {
|
|
286
286
|
let element = (opts === null || opts === void 0 ? void 0 : opts.from) || document.activeElement;
|
|
287
|
-
return instance.navigate(element, direction ===
|
|
287
|
+
return instance.navigate(element, direction === 'backward');
|
|
288
288
|
},
|
|
289
289
|
focusNext (opts) {
|
|
290
290
|
let element = (opts === null || opts === void 0 ? void 0 : opts.from) || document.activeElement;
|
|
@@ -355,7 +355,7 @@ function $202c109aedff6705$export$f50151dbd51cd1d9() {
|
|
|
355
355
|
};
|
|
356
356
|
}
|
|
357
357
|
function $202c109aedff6705$export$4cc632584fd87fae(props, ref) {
|
|
358
|
-
const { role: role,
|
|
358
|
+
const { role: role, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, focus: focus } = props;
|
|
359
359
|
let manager = $202c109aedff6705$var$useLandmarkManager();
|
|
360
360
|
let label = ariaLabel || ariaLabelledby;
|
|
361
361
|
let [isLandmarkFocused, setIsLandmarkFocused] = (0, $iIApB$react.useState)(false);
|
|
@@ -397,8 +397,8 @@ function $202c109aedff6705$export$4cc632584fd87fae(props, ref) {
|
|
|
397
397
|
landmarkProps: {
|
|
398
398
|
role: role,
|
|
399
399
|
tabIndex: isLandmarkFocused ? -1 : undefined,
|
|
400
|
-
|
|
401
|
-
|
|
400
|
+
'aria-label': ariaLabel,
|
|
401
|
+
'aria-labelledby': ariaLabelledby
|
|
402
402
|
}
|
|
403
403
|
};
|
|
404
404
|
}
|
package/dist/useLandmark.mjs
CHANGED
|
@@ -19,20 +19,20 @@ import {useSyncExternalStore as $3xCwh$useSyncExternalStore} from "use-sync-exte
|
|
|
19
19
|
// LandmarkManagerApi or Landmark interfaces change.
|
|
20
20
|
const $a86207c5d7f7e1fb$var$LANDMARK_API_VERSION = 1;
|
|
21
21
|
// Symbol under which the singleton landmark manager instance is attached to the document.
|
|
22
|
-
const $a86207c5d7f7e1fb$var$landmarkSymbol = Symbol.for(
|
|
22
|
+
const $a86207c5d7f7e1fb$var$landmarkSymbol = Symbol.for('react-aria-landmark-manager');
|
|
23
23
|
function $a86207c5d7f7e1fb$var$subscribe(fn) {
|
|
24
|
-
document.addEventListener(
|
|
25
|
-
return ()=>document.removeEventListener(
|
|
24
|
+
document.addEventListener('react-aria-landmark-manager-change', fn);
|
|
25
|
+
return ()=>document.removeEventListener('react-aria-landmark-manager-change', fn);
|
|
26
26
|
}
|
|
27
27
|
function $a86207c5d7f7e1fb$var$getLandmarkManager() {
|
|
28
|
-
if (typeof document ===
|
|
28
|
+
if (typeof document === 'undefined') return null;
|
|
29
29
|
// Reuse an existing instance if it has the same or greater version.
|
|
30
30
|
let instance = document[$a86207c5d7f7e1fb$var$landmarkSymbol];
|
|
31
31
|
if (instance && instance.version >= $a86207c5d7f7e1fb$var$LANDMARK_API_VERSION) return instance;
|
|
32
32
|
// Otherwise, create a new instance and dispatch an event so anything using the existing
|
|
33
33
|
// instance updates and re-registers their landmarks with the new one.
|
|
34
34
|
document[$a86207c5d7f7e1fb$var$landmarkSymbol] = new $a86207c5d7f7e1fb$var$LandmarkManager();
|
|
35
|
-
document.dispatchEvent(new CustomEvent(
|
|
35
|
+
document.dispatchEvent(new CustomEvent('react-aria-landmark-manager-change'));
|
|
36
36
|
return document[$a86207c5d7f7e1fb$var$landmarkSymbol];
|
|
37
37
|
}
|
|
38
38
|
// Subscribes a React component to the current landmark manager instance.
|
|
@@ -42,26 +42,26 @@ function $a86207c5d7f7e1fb$var$useLandmarkManager() {
|
|
|
42
42
|
class $a86207c5d7f7e1fb$var$LandmarkManager {
|
|
43
43
|
setupIfNeeded() {
|
|
44
44
|
if (this.isListening) return;
|
|
45
|
-
document.addEventListener(
|
|
45
|
+
document.addEventListener('keydown', this.f6Handler, {
|
|
46
46
|
capture: true
|
|
47
47
|
});
|
|
48
|
-
document.addEventListener(
|
|
48
|
+
document.addEventListener('focusin', this.focusinHandler, {
|
|
49
49
|
capture: true
|
|
50
50
|
});
|
|
51
|
-
document.addEventListener(
|
|
51
|
+
document.addEventListener('focusout', this.focusoutHandler, {
|
|
52
52
|
capture: true
|
|
53
53
|
});
|
|
54
54
|
this.isListening = true;
|
|
55
55
|
}
|
|
56
56
|
teardownIfNeeded() {
|
|
57
57
|
if (!this.isListening || this.landmarks.length > 0 || this.refCount > 0) return;
|
|
58
|
-
document.removeEventListener(
|
|
58
|
+
document.removeEventListener('keydown', this.f6Handler, {
|
|
59
59
|
capture: true
|
|
60
60
|
});
|
|
61
|
-
document.removeEventListener(
|
|
61
|
+
document.removeEventListener('focusin', this.focusinHandler, {
|
|
62
62
|
capture: true
|
|
63
63
|
});
|
|
64
|
-
document.removeEventListener(
|
|
64
|
+
document.removeEventListener('focusout', this.focusoutHandler, {
|
|
65
65
|
capture: true
|
|
66
66
|
});
|
|
67
67
|
this.isListening = false;
|
|
@@ -83,7 +83,7 @@ class $a86207c5d7f7e1fb$var$LandmarkManager {
|
|
|
83
83
|
addLandmark(newLandmark) {
|
|
84
84
|
this.setupIfNeeded();
|
|
85
85
|
if (this.landmarks.find((landmark)=>landmark.ref === newLandmark.ref) || !newLandmark.ref.current) return;
|
|
86
|
-
if (this.landmarks.filter((landmark)=>landmark.role ===
|
|
86
|
+
if (this.landmarks.filter((landmark)=>landmark.role === 'main').length > 1) console.error('Page can contain no more than one landmark with the role "main".');
|
|
87
87
|
if (this.landmarks.length === 0) {
|
|
88
88
|
this.landmarks = [
|
|
89
89
|
newLandmark
|
|
@@ -170,18 +170,18 @@ class $a86207c5d7f7e1fb$var$LandmarkManager {
|
|
|
170
170
|
// When we reach the end of the landmark sequence, fire a custom event that can be listened for by applications.
|
|
171
171
|
// If this event is canceled, we return immediately. This can be used to implement landmark navigation across iframes.
|
|
172
172
|
if (nextLandmarkIndex < 0) {
|
|
173
|
-
if (!element.dispatchEvent(new CustomEvent(
|
|
173
|
+
if (!element.dispatchEvent(new CustomEvent('react-aria-landmark-navigation', {
|
|
174
174
|
detail: {
|
|
175
|
-
direction:
|
|
175
|
+
direction: 'backward'
|
|
176
176
|
},
|
|
177
177
|
bubbles: true,
|
|
178
178
|
cancelable: true
|
|
179
179
|
}))) return true;
|
|
180
180
|
nextLandmarkIndex = this.landmarks.length - 1;
|
|
181
181
|
} else if (nextLandmarkIndex >= this.landmarks.length) {
|
|
182
|
-
if (!element.dispatchEvent(new CustomEvent(
|
|
182
|
+
if (!element.dispatchEvent(new CustomEvent('react-aria-landmark-navigation', {
|
|
183
183
|
detail: {
|
|
184
|
-
direction:
|
|
184
|
+
direction: 'forward'
|
|
185
185
|
},
|
|
186
186
|
bubbles: true,
|
|
187
187
|
cancelable: true
|
|
@@ -194,7 +194,7 @@ class $a86207c5d7f7e1fb$var$LandmarkManager {
|
|
|
194
194
|
if (wrapIfNeeded()) return undefined;
|
|
195
195
|
// Skip over hidden landmarks.
|
|
196
196
|
let i = nextLandmarkIndex;
|
|
197
|
-
while((_this_landmarks_nextLandmarkIndex_ref_current = this.landmarks[nextLandmarkIndex].ref.current) === null || _this_landmarks_nextLandmarkIndex_ref_current === void 0 ? void 0 : _this_landmarks_nextLandmarkIndex_ref_current.closest(
|
|
197
|
+
while((_this_landmarks_nextLandmarkIndex_ref_current = this.landmarks[nextLandmarkIndex].ref.current) === null || _this_landmarks_nextLandmarkIndex_ref_current === void 0 ? void 0 : _this_landmarks_nextLandmarkIndex_ref_current.closest('[aria-hidden=true]')){
|
|
198
198
|
nextLandmarkIndex += backward ? -1 : 1;
|
|
199
199
|
if (wrapIfNeeded()) return undefined;
|
|
200
200
|
if (nextLandmarkIndex === i) break;
|
|
@@ -206,7 +206,7 @@ class $a86207c5d7f7e1fb$var$LandmarkManager {
|
|
|
206
206
|
* If not, focus the landmark itself.
|
|
207
207
|
* If no landmarks at all, or none with focusable elements, don't move focus.
|
|
208
208
|
*/ f6Handler(e) {
|
|
209
|
-
if (e.key ===
|
|
209
|
+
if (e.key === 'F6') {
|
|
210
210
|
// If alt key pressed, focus main landmark, otherwise navigate forward or backward based on shift key.
|
|
211
211
|
let handled = e.altKey ? this.focusMain() : this.navigate(e.target, e.shiftKey);
|
|
212
212
|
if (handled) {
|
|
@@ -216,9 +216,9 @@ class $a86207c5d7f7e1fb$var$LandmarkManager {
|
|
|
216
216
|
}
|
|
217
217
|
}
|
|
218
218
|
focusMain() {
|
|
219
|
-
let main = this.getLandmarkByRole(
|
|
219
|
+
let main = this.getLandmarkByRole('main');
|
|
220
220
|
if (main && main.ref.current && document.contains(main.ref.current)) {
|
|
221
|
-
this.focusLandmark(main.ref.current,
|
|
221
|
+
this.focusLandmark(main.ref.current, 'forward');
|
|
222
222
|
return true;
|
|
223
223
|
}
|
|
224
224
|
return false;
|
|
@@ -238,7 +238,7 @@ class $a86207c5d7f7e1fb$var$LandmarkManager {
|
|
|
238
238
|
}
|
|
239
239
|
// Otherwise, focus the landmark itself
|
|
240
240
|
if (nextLandmark.ref.current && document.contains(nextLandmark.ref.current)) {
|
|
241
|
-
this.focusLandmark(nextLandmark.ref.current, backward ?
|
|
241
|
+
this.focusLandmark(nextLandmark.ref.current, backward ? 'backward' : 'forward');
|
|
242
242
|
return true;
|
|
243
243
|
}
|
|
244
244
|
return false;
|
|
@@ -277,7 +277,7 @@ class $a86207c5d7f7e1fb$var$LandmarkManager {
|
|
|
277
277
|
return {
|
|
278
278
|
navigate (direction, opts) {
|
|
279
279
|
let element = (opts === null || opts === void 0 ? void 0 : opts.from) || document.activeElement;
|
|
280
|
-
return instance.navigate(element, direction ===
|
|
280
|
+
return instance.navigate(element, direction === 'backward');
|
|
281
281
|
},
|
|
282
282
|
focusNext (opts) {
|
|
283
283
|
let element = (opts === null || opts === void 0 ? void 0 : opts.from) || document.activeElement;
|
|
@@ -348,7 +348,7 @@ function $a86207c5d7f7e1fb$export$f50151dbd51cd1d9() {
|
|
|
348
348
|
};
|
|
349
349
|
}
|
|
350
350
|
function $a86207c5d7f7e1fb$export$4cc632584fd87fae(props, ref) {
|
|
351
|
-
const { role: role,
|
|
351
|
+
const { role: role, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, focus: focus } = props;
|
|
352
352
|
let manager = $a86207c5d7f7e1fb$var$useLandmarkManager();
|
|
353
353
|
let label = ariaLabel || ariaLabelledby;
|
|
354
354
|
let [isLandmarkFocused, setIsLandmarkFocused] = (0, $3xCwh$useState)(false);
|
|
@@ -390,8 +390,8 @@ function $a86207c5d7f7e1fb$export$4cc632584fd87fae(props, ref) {
|
|
|
390
390
|
landmarkProps: {
|
|
391
391
|
role: role,
|
|
392
392
|
tabIndex: isLandmarkFocused ? -1 : undefined,
|
|
393
|
-
|
|
394
|
-
|
|
393
|
+
'aria-label': ariaLabel,
|
|
394
|
+
'aria-labelledby': ariaLabelledby
|
|
395
395
|
}
|
|
396
396
|
};
|
|
397
397
|
}
|
|
@@ -19,20 +19,20 @@ import {useSyncExternalStore as $3xCwh$useSyncExternalStore} from "use-sync-exte
|
|
|
19
19
|
// LandmarkManagerApi or Landmark interfaces change.
|
|
20
20
|
const $a86207c5d7f7e1fb$var$LANDMARK_API_VERSION = 1;
|
|
21
21
|
// Symbol under which the singleton landmark manager instance is attached to the document.
|
|
22
|
-
const $a86207c5d7f7e1fb$var$landmarkSymbol = Symbol.for(
|
|
22
|
+
const $a86207c5d7f7e1fb$var$landmarkSymbol = Symbol.for('react-aria-landmark-manager');
|
|
23
23
|
function $a86207c5d7f7e1fb$var$subscribe(fn) {
|
|
24
|
-
document.addEventListener(
|
|
25
|
-
return ()=>document.removeEventListener(
|
|
24
|
+
document.addEventListener('react-aria-landmark-manager-change', fn);
|
|
25
|
+
return ()=>document.removeEventListener('react-aria-landmark-manager-change', fn);
|
|
26
26
|
}
|
|
27
27
|
function $a86207c5d7f7e1fb$var$getLandmarkManager() {
|
|
28
|
-
if (typeof document ===
|
|
28
|
+
if (typeof document === 'undefined') return null;
|
|
29
29
|
// Reuse an existing instance if it has the same or greater version.
|
|
30
30
|
let instance = document[$a86207c5d7f7e1fb$var$landmarkSymbol];
|
|
31
31
|
if (instance && instance.version >= $a86207c5d7f7e1fb$var$LANDMARK_API_VERSION) return instance;
|
|
32
32
|
// Otherwise, create a new instance and dispatch an event so anything using the existing
|
|
33
33
|
// instance updates and re-registers their landmarks with the new one.
|
|
34
34
|
document[$a86207c5d7f7e1fb$var$landmarkSymbol] = new $a86207c5d7f7e1fb$var$LandmarkManager();
|
|
35
|
-
document.dispatchEvent(new CustomEvent(
|
|
35
|
+
document.dispatchEvent(new CustomEvent('react-aria-landmark-manager-change'));
|
|
36
36
|
return document[$a86207c5d7f7e1fb$var$landmarkSymbol];
|
|
37
37
|
}
|
|
38
38
|
// Subscribes a React component to the current landmark manager instance.
|
|
@@ -42,26 +42,26 @@ function $a86207c5d7f7e1fb$var$useLandmarkManager() {
|
|
|
42
42
|
class $a86207c5d7f7e1fb$var$LandmarkManager {
|
|
43
43
|
setupIfNeeded() {
|
|
44
44
|
if (this.isListening) return;
|
|
45
|
-
document.addEventListener(
|
|
45
|
+
document.addEventListener('keydown', this.f6Handler, {
|
|
46
46
|
capture: true
|
|
47
47
|
});
|
|
48
|
-
document.addEventListener(
|
|
48
|
+
document.addEventListener('focusin', this.focusinHandler, {
|
|
49
49
|
capture: true
|
|
50
50
|
});
|
|
51
|
-
document.addEventListener(
|
|
51
|
+
document.addEventListener('focusout', this.focusoutHandler, {
|
|
52
52
|
capture: true
|
|
53
53
|
});
|
|
54
54
|
this.isListening = true;
|
|
55
55
|
}
|
|
56
56
|
teardownIfNeeded() {
|
|
57
57
|
if (!this.isListening || this.landmarks.length > 0 || this.refCount > 0) return;
|
|
58
|
-
document.removeEventListener(
|
|
58
|
+
document.removeEventListener('keydown', this.f6Handler, {
|
|
59
59
|
capture: true
|
|
60
60
|
});
|
|
61
|
-
document.removeEventListener(
|
|
61
|
+
document.removeEventListener('focusin', this.focusinHandler, {
|
|
62
62
|
capture: true
|
|
63
63
|
});
|
|
64
|
-
document.removeEventListener(
|
|
64
|
+
document.removeEventListener('focusout', this.focusoutHandler, {
|
|
65
65
|
capture: true
|
|
66
66
|
});
|
|
67
67
|
this.isListening = false;
|
|
@@ -83,7 +83,7 @@ class $a86207c5d7f7e1fb$var$LandmarkManager {
|
|
|
83
83
|
addLandmark(newLandmark) {
|
|
84
84
|
this.setupIfNeeded();
|
|
85
85
|
if (this.landmarks.find((landmark)=>landmark.ref === newLandmark.ref) || !newLandmark.ref.current) return;
|
|
86
|
-
if (this.landmarks.filter((landmark)=>landmark.role ===
|
|
86
|
+
if (this.landmarks.filter((landmark)=>landmark.role === 'main').length > 1) console.error('Page can contain no more than one landmark with the role "main".');
|
|
87
87
|
if (this.landmarks.length === 0) {
|
|
88
88
|
this.landmarks = [
|
|
89
89
|
newLandmark
|
|
@@ -170,18 +170,18 @@ class $a86207c5d7f7e1fb$var$LandmarkManager {
|
|
|
170
170
|
// When we reach the end of the landmark sequence, fire a custom event that can be listened for by applications.
|
|
171
171
|
// If this event is canceled, we return immediately. This can be used to implement landmark navigation across iframes.
|
|
172
172
|
if (nextLandmarkIndex < 0) {
|
|
173
|
-
if (!element.dispatchEvent(new CustomEvent(
|
|
173
|
+
if (!element.dispatchEvent(new CustomEvent('react-aria-landmark-navigation', {
|
|
174
174
|
detail: {
|
|
175
|
-
direction:
|
|
175
|
+
direction: 'backward'
|
|
176
176
|
},
|
|
177
177
|
bubbles: true,
|
|
178
178
|
cancelable: true
|
|
179
179
|
}))) return true;
|
|
180
180
|
nextLandmarkIndex = this.landmarks.length - 1;
|
|
181
181
|
} else if (nextLandmarkIndex >= this.landmarks.length) {
|
|
182
|
-
if (!element.dispatchEvent(new CustomEvent(
|
|
182
|
+
if (!element.dispatchEvent(new CustomEvent('react-aria-landmark-navigation', {
|
|
183
183
|
detail: {
|
|
184
|
-
direction:
|
|
184
|
+
direction: 'forward'
|
|
185
185
|
},
|
|
186
186
|
bubbles: true,
|
|
187
187
|
cancelable: true
|
|
@@ -194,7 +194,7 @@ class $a86207c5d7f7e1fb$var$LandmarkManager {
|
|
|
194
194
|
if (wrapIfNeeded()) return undefined;
|
|
195
195
|
// Skip over hidden landmarks.
|
|
196
196
|
let i = nextLandmarkIndex;
|
|
197
|
-
while((_this_landmarks_nextLandmarkIndex_ref_current = this.landmarks[nextLandmarkIndex].ref.current) === null || _this_landmarks_nextLandmarkIndex_ref_current === void 0 ? void 0 : _this_landmarks_nextLandmarkIndex_ref_current.closest(
|
|
197
|
+
while((_this_landmarks_nextLandmarkIndex_ref_current = this.landmarks[nextLandmarkIndex].ref.current) === null || _this_landmarks_nextLandmarkIndex_ref_current === void 0 ? void 0 : _this_landmarks_nextLandmarkIndex_ref_current.closest('[aria-hidden=true]')){
|
|
198
198
|
nextLandmarkIndex += backward ? -1 : 1;
|
|
199
199
|
if (wrapIfNeeded()) return undefined;
|
|
200
200
|
if (nextLandmarkIndex === i) break;
|
|
@@ -206,7 +206,7 @@ class $a86207c5d7f7e1fb$var$LandmarkManager {
|
|
|
206
206
|
* If not, focus the landmark itself.
|
|
207
207
|
* If no landmarks at all, or none with focusable elements, don't move focus.
|
|
208
208
|
*/ f6Handler(e) {
|
|
209
|
-
if (e.key ===
|
|
209
|
+
if (e.key === 'F6') {
|
|
210
210
|
// If alt key pressed, focus main landmark, otherwise navigate forward or backward based on shift key.
|
|
211
211
|
let handled = e.altKey ? this.focusMain() : this.navigate(e.target, e.shiftKey);
|
|
212
212
|
if (handled) {
|
|
@@ -216,9 +216,9 @@ class $a86207c5d7f7e1fb$var$LandmarkManager {
|
|
|
216
216
|
}
|
|
217
217
|
}
|
|
218
218
|
focusMain() {
|
|
219
|
-
let main = this.getLandmarkByRole(
|
|
219
|
+
let main = this.getLandmarkByRole('main');
|
|
220
220
|
if (main && main.ref.current && document.contains(main.ref.current)) {
|
|
221
|
-
this.focusLandmark(main.ref.current,
|
|
221
|
+
this.focusLandmark(main.ref.current, 'forward');
|
|
222
222
|
return true;
|
|
223
223
|
}
|
|
224
224
|
return false;
|
|
@@ -238,7 +238,7 @@ class $a86207c5d7f7e1fb$var$LandmarkManager {
|
|
|
238
238
|
}
|
|
239
239
|
// Otherwise, focus the landmark itself
|
|
240
240
|
if (nextLandmark.ref.current && document.contains(nextLandmark.ref.current)) {
|
|
241
|
-
this.focusLandmark(nextLandmark.ref.current, backward ?
|
|
241
|
+
this.focusLandmark(nextLandmark.ref.current, backward ? 'backward' : 'forward');
|
|
242
242
|
return true;
|
|
243
243
|
}
|
|
244
244
|
return false;
|
|
@@ -277,7 +277,7 @@ class $a86207c5d7f7e1fb$var$LandmarkManager {
|
|
|
277
277
|
return {
|
|
278
278
|
navigate (direction, opts) {
|
|
279
279
|
let element = (opts === null || opts === void 0 ? void 0 : opts.from) || document.activeElement;
|
|
280
|
-
return instance.navigate(element, direction ===
|
|
280
|
+
return instance.navigate(element, direction === 'backward');
|
|
281
281
|
},
|
|
282
282
|
focusNext (opts) {
|
|
283
283
|
let element = (opts === null || opts === void 0 ? void 0 : opts.from) || document.activeElement;
|
|
@@ -348,7 +348,7 @@ function $a86207c5d7f7e1fb$export$f50151dbd51cd1d9() {
|
|
|
348
348
|
};
|
|
349
349
|
}
|
|
350
350
|
function $a86207c5d7f7e1fb$export$4cc632584fd87fae(props, ref) {
|
|
351
|
-
const { role: role,
|
|
351
|
+
const { role: role, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, focus: focus } = props;
|
|
352
352
|
let manager = $a86207c5d7f7e1fb$var$useLandmarkManager();
|
|
353
353
|
let label = ariaLabel || ariaLabelledby;
|
|
354
354
|
let [isLandmarkFocused, setIsLandmarkFocused] = (0, $3xCwh$useState)(false);
|
|
@@ -390,8 +390,8 @@ function $a86207c5d7f7e1fb$export$4cc632584fd87fae(props, ref) {
|
|
|
390
390
|
landmarkProps: {
|
|
391
391
|
role: role,
|
|
392
392
|
tabIndex: isLandmarkFocused ? -1 : undefined,
|
|
393
|
-
|
|
394
|
-
|
|
393
|
+
'aria-label': ariaLabel,
|
|
394
|
+
'aria-labelledby': ariaLabelledby
|
|
395
395
|
}
|
|
396
396
|
};
|
|
397
397
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/landmark",
|
|
3
|
-
"version": "3.0.0-nightly.
|
|
3
|
+
"version": "3.0.0-nightly.4637+c57671e7f",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,8 +22,8 @@
|
|
|
22
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@react-aria/utils": "3.0.0-nightly.
|
|
26
|
-
"@react-types/shared": "3.0.0-nightly.
|
|
25
|
+
"@react-aria/utils": "3.0.0-nightly.2925+c57671e7f",
|
|
26
|
+
"@react-types/shared": "3.0.0-nightly.2925+c57671e7f",
|
|
27
27
|
"@swc/helpers": "^0.5.0",
|
|
28
28
|
"use-sync-external-store": "^1.2.0"
|
|
29
29
|
},
|
|
@@ -33,5 +33,5 @@
|
|
|
33
33
|
"publishConfig": {
|
|
34
34
|
"access": "public"
|
|
35
35
|
},
|
|
36
|
-
"gitHead": "
|
|
36
|
+
"gitHead": "c57671e7f57c4ffe59640a174f084cf660968913"
|
|
37
37
|
}
|