-
Notifications
You must be signed in to change notification settings - Fork 4k
/
tabbable.js
46 lines (41 loc) · 1.14 KB
/
tabbable.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/**
* WordPress dependencies
*/
import { forwardRef } from '@wordpress/element';
import { TAB } from '@wordpress/keycodes';
/**
* Internal dependencies
*/
import NavigableContainer from './container';
export function TabbableContainer( { eventToOffset, ...props }, ref ) {
const innerEventToOffset = ( evt ) => {
const { keyCode, shiftKey } = evt;
if ( TAB === keyCode ) {
return shiftKey ? -1 : 1;
}
// Allow custom handling of keys besides Tab.
//
// By default, TabbableContainer will move focus forward on Tab and
// backward on Shift+Tab. The handler below will be used for all other
// events. The semantics for `eventToOffset`'s return
// values are the following:
//
// - +1: move focus forward
// - -1: move focus backward
// - 0: don't move focus, but acknowledge event and thus stop it
// - undefined: do nothing, let the event propagate
if ( eventToOffset ) {
return eventToOffset( evt );
}
};
return (
<NavigableContainer
ref={ ref }
stopNavigationEvents
onlyBrowserTabstops
eventToOffset={ innerEventToOffset }
{ ...props }
/>
);
}
export default forwardRef( TabbableContainer );