IFocusable

Defined in: plugins/focus/FocusManagerPlugin.ts:17

Extends

• Container

Properties

accessible

accessible: boolean

Defined in: plugins/focus/FocusManagerPlugin.ts:25

Flag for if the object is accessible. If true AccessibilityManager will overlay a shadow div with attributes set

Default

false

Example

const container = new Container();
container.accessible = true;

Overrides

Container.accessible

---

accessibleChildren

accessibleChildren: boolean

Defined in: plugins/focus/FocusManagerPlugin.ts:30

Setting to false will prevent any children inside this container to be accessible. Defaults to true.

Default

true

Example

const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false

Overrides

Container.accessibleChildren

---

accessibleHint

accessibleHint: string

Defined in: plugins/focus/FocusManagerPlugin.ts:28

Sets the aria-label attribute of the shadow div

Default

null

Advanced

Example

const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';

Overrides

Container.accessibleHint

---

accessiblePointerEvents?

optional accessiblePointerEvents: PointerEvents

Defined in: plugins/focus/FocusManagerPlugin.ts:29

Specify the pointer-events the accessible div will use Defaults to auto.

Default

'auto'

Advanced

Example

const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.

Overrides

Container.accessiblePointerEvents

---

accessibleTitle

accessibleTitle: string

Defined in: plugins/focus/FocusManagerPlugin.ts:27

Sets the title attribute of the shadow div If accessibleTitle AND accessibleHint has not been this will default to ‘container [tabIndex]‘

Default

null

Example

const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';

Overrides

Container.accessibleTitle

---

accessibleType

accessibleType: undefined | keyof HTMLElementTagNameMap

Defined in: plugins/focus/FocusManagerPlugin.ts:26

Specify the type of div the accessible layer is. Screen readers treat the element differently depending on this type. Defaults to button.

Default

'button'

Advanced

Example

const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.

Overrides

Container.accessibleType

---

focusEnabled

focusEnabled: boolean

Defined in: plugins/focus/FocusManagerPlugin.ts:20

---

isFocused

isFocused: boolean

Defined in: plugins/focus/FocusManagerPlugin.ts:18

---

isKeyDown

isKeyDown: boolean

Defined in: plugins/focus/FocusManagerPlugin.ts:19

---

onBlur

onBlur: Signal<(focusable) => void>

Defined in: plugins/focus/FocusManagerPlugin.ts:36

---

onFocus

onFocus: Signal<(focusable) => void>

Defined in: plugins/focus/FocusManagerPlugin.ts:35

---

onFocusIn

onFocusIn: Signal<(focusable) => void>

Defined in: plugins/focus/FocusManagerPlugin.ts:33

---

onFocusOut

onFocusOut: Signal<(focusable) => void>

Defined in: plugins/focus/FocusManagerPlugin.ts:34

---

tabIndex

tabIndex: number

Defined in: plugins/focus/FocusManagerPlugin.ts:21

Sets the tabIndex of the shadow div. You can use this to set the order of the elements when using the tab key to navigate.

Default

0

Example

const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;

Overrides

Container.tabIndex

Methods

blur()

blur(): void

Defined in: plugins/focus/FocusManagerPlugin.ts:44

Returns

void

---

click()

click(): void

Defined in: plugins/focus/FocusManagerPlugin.ts:42

Returns

void

---

focusIn()

focusIn(): void

Defined in: plugins/focus/FocusManagerPlugin.ts:38

Returns

void

---

focusOut()

focusOut(): void

Defined in: plugins/focus/FocusManagerPlugin.ts:40

Returns

void

---

getFocusArea()

getFocusArea(): Bounds

Defined in: plugins/focus/FocusManagerPlugin.ts:48

Returns

Bounds

---

getFocusPosition()

getFocusPosition(): null | PointLike

Defined in: plugins/focus/FocusManagerPlugin.ts:50

Returns

null | PointLike

---

getFocusSize()

getFocusSize(): null | PointLike

Defined in: plugins/focus/FocusManagerPlugin.ts:52

Returns

null | PointLike

---

getGlobalPosition()

getGlobalPosition(): Point

Defined in: plugins/focus/FocusManagerPlugin.ts:46

Returns the global position of the container, taking into account the container hierarchy.

Returns

Point

The updated point

Example

// Basic position check
const globalPos = sprite.getGlobalPosition();
console.log(`Global: (${globalPos.x}, ${globalPos.y})`);

// Reuse point object
const point = new Point();
sprite.getGlobalPosition(point);

// Skip transform update for performance
const fastPos = container.getGlobalPosition(undefined, true);

See

• Container#toGlobal For converting specific points
• Container#toLocal For converting to local space

Overrides

Container.getGlobalPosition