@ohos-ports/pixi-accessibility 7.4.3-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2013-2023 Mathew Groves, Chad Engler
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,13 @@
+# @pixi/accessibility
+
+## Installation
+
+```bash
+npm install @pixi/accessibility
+```
+
+## Usage
+
+```js
+import '@pixi/accessibility';
+```

package/global.d.ts

@@ -0,0 +1,8 @@
+declare namespace GlobalMixins
+{
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface DisplayObject extends Partial<import('@pixi/accessibility').IAccessibleTarget>
+    {
+
+    }
+}

package/lib/AccessibilityManager.d.ts

@@ -0,0 +1,147 @@
+import type { ExtensionMetadata, IRenderer, Rectangle } from '@pixi/core';
+import type { IAccessibleHTMLElement } from './accessibleTarget';
+/**
+ * The Accessibility manager recreates the ability to tab and have content read by screen readers.
+ * This is very important as it can possibly help people with disabilities access PixiJS content.
+ *
+ * A DisplayObject can be made accessible just like it can be made interactive. This manager will map the
+ * events as if the mouse was being used, minimizing the effort required to implement.
+ *
+ * An instance of this class is automatically created by default, and can be found at `renderer.plugins.accessibility`
+ * @class
+ * @memberof PIXI
+ */
+export declare class AccessibilityManager {
+    /** @ignore */
+    static extension: ExtensionMetadata;
+    /** Setting this to true will visually show the divs. */
+    debug: boolean;
+    /**
+     * The renderer this accessibility manager works for.
+     * @type {PIXI.CanvasRenderer|PIXI.Renderer}
+     */
+    renderer: IRenderer;
+    /** Internal variable, see isActive getter. */
+    private _isActive;
+    /** Internal variable, see isMobileAccessibility getter. */
+    private _isMobileAccessibility;
+    /** Button element for handling touch hooks. */
+    private _hookDiv;
+    /** This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. */
+    private div;
+    /** A simple pool for storing divs. */
+    private pool;
+    /** This is a tick used to check if an object is no longer being rendered. */
+    private renderId;
+    /** The array of currently active accessible items. */
+    private children;
+    /** Count to throttle div updates on android devices. */
+    private androidUpdateCount;
+    /**  The frequency to update the div elements. */
+    private androidUpdateFrequency;
+    /**
+     * @param {PIXI.CanvasRenderer|PIXI.Renderer} renderer - A reference to the current renderer
+     */
+    constructor(renderer: IRenderer);
+    /**
+     * Value of `true` if accessibility is currently active and accessibility layers are showing.
+     * @member {boolean}
+     * @readonly
+     */
+    get isActive(): boolean;
+    /**
+     * Value of `true` if accessibility is enabled for touch devices.
+     * @member {boolean}
+     * @readonly
+     */
+    get isMobileAccessibility(): boolean;
+    /**
+     * Creates the touch hooks.
+     * @private
+     */
+    private createTouchHook;
+    /**
+     * Destroys the touch hooks.
+     * @private
+     */
+    private destroyTouchHook;
+    /**
+     * Activating will cause the Accessibility layer to be shown.
+     * This is called when a user presses the tab key.
+     * @private
+     */
+    private activate;
+    /**
+     * Deactivating will cause the Accessibility layer to be hidden.
+     * This is called when a user moves the mouse.
+     * @private
+     */
+    private deactivate;
+    /**
+     * This recursive function will run through the scene graph and add any new accessible objects to the DOM layer.
+     * @private
+     * @param {PIXI.Container} displayObject - The DisplayObject to check.
+     */
+    private updateAccessibleObjects;
+    /**
+     * Before each render this function will ensure that all divs are mapped correctly to their DisplayObjects.
+     * @private
+     */
+    private update;
+    /**
+     * private function that will visually add the information to the
+     * accessability div
+     * @param {HTMLElement} div -
+     */
+    updateDebugHTML(div: IAccessibleHTMLElement): void;
+    /**
+     * Adjust the hit area based on the bounds of a display object
+     * @param {PIXI.Rectangle} hitArea - Bounds of the child
+     */
+    capHitArea(hitArea: Rectangle): void;
+    /**
+     * Adds a DisplayObject to the accessibility manager
+     * @private
+     * @param {PIXI.DisplayObject} displayObject - The child to make accessible.
+     */
+    private addChild;
+    /**
+     * Dispatch events with the EventSystem.
+     * @param e
+     * @param type
+     * @private
+     */
+    private _dispatchEvent;
+    /**
+     * Maps the div button press to pixi's EventSystem (click)
+     * @private
+     * @param {MouseEvent} e - The click event.
+     */
+    private _onClick;
+    /**
+     * Maps the div focus events to pixi's EventSystem (mouseover)
+     * @private
+     * @param {FocusEvent} e - The focus event.
+     */
+    private _onFocus;
+    /**
+     * Maps the div focus events to pixi's EventSystem (mouseout)
+     * @private
+     * @param {FocusEvent} e - The focusout event.
+     */
+    private _onFocusOut;
+    /**
+     * Is called when a key is pressed
+     * @private
+     * @param {KeyboardEvent} e - The keydown event.
+     */
+    private _onKeyDown;
+    /**
+     * Is called when the mouse moves across the renderer element
+     * @private
+     * @param {MouseEvent} e - The mouse event.
+     */
+    private _onMouseMove;
+    /** Destroys the accessibility manager */
+    destroy(): void;
+}

package/lib/AccessibilityManager.js

@@ -0,0 +1,193 @@
+"use strict";
+var core = require("@pixi/core"), display = require("@pixi/display"), events = require("@pixi/events"), accessibleTarget = require("./accessibleTarget.js");
+display.DisplayObject.mixin(accessibleTarget.accessibleTarget);
+const KEY_CODE_TAB = 9, DIV_TOUCH_SIZE = 100, DIV_TOUCH_POS_X = 0, DIV_TOUCH_POS_Y = 0, DIV_TOUCH_ZINDEX = 2, DIV_HOOK_SIZE = 1, DIV_HOOK_POS_X = -1e3, DIV_HOOK_POS_Y = -1e3, DIV_HOOK_ZINDEX = 2;
+class AccessibilityManager {
+  // 2fps
+  /**
+   * @param {PIXI.CanvasRenderer|PIXI.Renderer} renderer - A reference to the current renderer
+   */
+  constructor(renderer) {
+    this.debug = !1, this._isActive = !1, this._isMobileAccessibility = !1, this.pool = [], this.renderId = 0, this.children = [], this.androidUpdateCount = 0, this.androidUpdateFrequency = 500, this._hookDiv = null, (core.utils.isMobile.tablet || core.utils.isMobile.phone) && this.createTouchHook();
+    const div = document.createElement("div");
+    div.style.width = `${DIV_TOUCH_SIZE}px`, div.style.height = `${DIV_TOUCH_SIZE}px`, div.style.position = "absolute", div.style.top = `${DIV_TOUCH_POS_X}px`, div.style.left = `${DIV_TOUCH_POS_Y}px`, div.style.zIndex = DIV_TOUCH_ZINDEX.toString(), this.div = div, this.renderer = renderer, this._onKeyDown = this._onKeyDown.bind(this), this._onMouseMove = this._onMouseMove.bind(this), globalThis.addEventListener("keydown", this._onKeyDown, !1);
+  }
+  /**
+   * Value of `true` if accessibility is currently active and accessibility layers are showing.
+   * @member {boolean}
+   * @readonly
+   */
+  get isActive() {
+    return this._isActive;
+  }
+  /**
+   * Value of `true` if accessibility is enabled for touch devices.
+   * @member {boolean}
+   * @readonly
+   */
+  get isMobileAccessibility() {
+    return this._isMobileAccessibility;
+  }
+  /**
+   * Creates the touch hooks.
+   * @private
+   */
+  createTouchHook() {
+    const hookDiv = document.createElement("button");
+    hookDiv.style.width = `${DIV_HOOK_SIZE}px`, hookDiv.style.height = `${DIV_HOOK_SIZE}px`, hookDiv.style.position = "absolute", hookDiv.style.top = `${DIV_HOOK_POS_X}px`, hookDiv.style.left = `${DIV_HOOK_POS_Y}px`, hookDiv.style.zIndex = DIV_HOOK_ZINDEX.toString(), hookDiv.style.backgroundColor = "#FF0000", hookDiv.title = "select to enable accessibility for this content", hookDiv.addEventListener("focus", () => {
+      this._isMobileAccessibility = !0, this.activate(), this.destroyTouchHook();
+    }), document.body.appendChild(hookDiv), this._hookDiv = hookDiv;
+  }
+  /**
+   * Destroys the touch hooks.
+   * @private
+   */
+  destroyTouchHook() {
+    this._hookDiv && (document.body.removeChild(this._hookDiv), this._hookDiv = null);
+  }
+  /**
+   * Activating will cause the Accessibility layer to be shown.
+   * This is called when a user presses the tab key.
+   * @private
+   */
+  activate() {
+    this._isActive || (this._isActive = !0, globalThis.document.addEventListener("mousemove", this._onMouseMove, !0), globalThis.removeEventListener("keydown", this._onKeyDown, !1), this.renderer.on("postrender", this.update, this), (this.renderer.view.parentNode || document.body)?.appendChild(this.div));
+  }
+  /**
+   * Deactivating will cause the Accessibility layer to be hidden.
+   * This is called when a user moves the mouse.
+   * @private
+   */
+  deactivate() {
+    !this._isActive || this._isMobileAccessibility || (this._isActive = !1, globalThis.document.removeEventListener("mousemove", this._onMouseMove, !0), globalThis.addEventListener("keydown", this._onKeyDown, !1), this.renderer.off("postrender", this.update), this.div.parentNode?.removeChild(this.div));
+  }
+  /**
+   * This recursive function will run through the scene graph and add any new accessible objects to the DOM layer.
+   * @private
+   * @param {PIXI.Container} displayObject - The DisplayObject to check.
+   */
+  updateAccessibleObjects(displayObject) {
+    if (!displayObject.visible || !displayObject.accessibleChildren)
+      return;
+    displayObject.accessible && displayObject.isInteractive() && (displayObject._accessibleActive || this.addChild(displayObject), displayObject.renderId = this.renderId);
+    const children = displayObject.children;
+    if (children)
+      for (let i = 0; i < children.length; i++)
+        this.updateAccessibleObjects(children[i]);
+  }
+  /**
+   * Before each render this function will ensure that all divs are mapped correctly to their DisplayObjects.
+   * @private
+   */
+  update() {
+    const now = performance.now();
+    if (core.utils.isMobile.android.device && now < this.androidUpdateCount || (this.androidUpdateCount = now + this.androidUpdateFrequency, !this.renderer.renderingToScreen))
+      return;
+    this.renderer.lastObjectRendered && this.updateAccessibleObjects(this.renderer.lastObjectRendered);
+    const { x, y, width, height } = this.renderer.view.getBoundingClientRect(), { width: viewWidth, height: viewHeight, resolution } = this.renderer, sx = width / viewWidth * resolution, sy = height / viewHeight * resolution;
+    let div = this.div;
+    div.style.left = `${x}px`, div.style.top = `${y}px`, div.style.width = `${viewWidth}px`, div.style.height = `${viewHeight}px`;
+    for (let i = 0; i < this.children.length; i++) {
+      const child = this.children[i];
+      if (child.renderId !== this.renderId)
+        child._accessibleActive = !1, core.utils.removeItems(this.children, i, 1), this.div.removeChild(child._accessibleDiv), this.pool.push(child._accessibleDiv), child._accessibleDiv = null, i--;
+      else {
+        div = child._accessibleDiv;
+        let hitArea = child.hitArea;
+        const wt = child.worldTransform;
+        child.hitArea ? (div.style.left = `${(wt.tx + hitArea.x * wt.a) * sx}px`, div.style.top = `${(wt.ty + hitArea.y * wt.d) * sy}px`, div.style.width = `${hitArea.width * wt.a * sx}px`, div.style.height = `${hitArea.height * wt.d * sy}px`) : (hitArea = child.getBounds(), this.capHitArea(hitArea), div.style.left = `${hitArea.x * sx}px`, div.style.top = `${hitArea.y * sy}px`, div.style.width = `${hitArea.width * sx}px`, div.style.height = `${hitArea.height * sy}px`, div.title !== child.accessibleTitle && child.accessibleTitle !== null && (div.title = child.accessibleTitle), div.getAttribute("aria-label") !== child.accessibleHint && child.accessibleHint !== null && div.setAttribute("aria-label", child.accessibleHint)), (child.accessibleTitle !== div.title || child.tabIndex !== div.tabIndex) && (div.title = child.accessibleTitle, div.tabIndex = child.tabIndex, this.debug && this.updateDebugHTML(div));
+      }
+    }
+    this.renderId++;
+  }
+  /**
+   * private function that will visually add the information to the
+   * accessability div
+   * @param {HTMLElement} div -
+   */
+  updateDebugHTML(div) {
+    div.innerHTML = `type: ${div.type}</br> title : ${div.title}</br> tabIndex: ${div.tabIndex}`;
+  }
+  /**
+   * Adjust the hit area based on the bounds of a display object
+   * @param {PIXI.Rectangle} hitArea - Bounds of the child
+   */
+  capHitArea(hitArea) {
+    hitArea.x < 0 && (hitArea.width += hitArea.x, hitArea.x = 0), hitArea.y < 0 && (hitArea.height += hitArea.y, hitArea.y = 0);
+    const { width: viewWidth, height: viewHeight } = this.renderer;
+    hitArea.x + hitArea.width > viewWidth && (hitArea.width = viewWidth - hitArea.x), hitArea.y + hitArea.height > viewHeight && (hitArea.height = viewHeight - hitArea.y);
+  }
+  /**
+   * Adds a DisplayObject to the accessibility manager
+   * @private
+   * @param {PIXI.DisplayObject} displayObject - The child to make accessible.
+   */
+  addChild(displayObject) {
+    let div = this.pool.pop();
+    div || (div = document.createElement("button"), div.style.width = `${DIV_TOUCH_SIZE}px`, div.style.height = `${DIV_TOUCH_SIZE}px`, div.style.backgroundColor = this.debug ? "rgba(255,255,255,0.5)" : "transparent", div.style.position = "absolute", div.style.zIndex = DIV_TOUCH_ZINDEX.toString(), div.style.borderStyle = "none", navigator.userAgent.toLowerCase().includes("chrome") ? div.setAttribute("aria-live", "off") : div.setAttribute("aria-live", "polite"), navigator.userAgent.match(/rv:.*Gecko\//) ? div.setAttribute("aria-relevant", "additions") : div.setAttribute("aria-relevant", "text"), div.addEventListener("click", this._onClick.bind(this)), div.addEventListener("focus", this._onFocus.bind(this)), div.addEventListener("focusout", this._onFocusOut.bind(this))), div.style.pointerEvents = displayObject.accessiblePointerEvents, div.type = displayObject.accessibleType, displayObject.accessibleTitle && displayObject.accessibleTitle !== null ? div.title = displayObject.accessibleTitle : (!displayObject.accessibleHint || displayObject.accessibleHint === null) && (div.title = `displayObject ${displayObject.tabIndex}`), displayObject.accessibleHint && displayObject.accessibleHint !== null && div.setAttribute("aria-label", displayObject.accessibleHint), this.debug && this.updateDebugHTML(div), displayObject._accessibleActive = !0, displayObject._accessibleDiv = div, div.displayObject = displayObject, this.children.push(displayObject), this.div.appendChild(displayObject._accessibleDiv), displayObject._accessibleDiv.tabIndex = displayObject.tabIndex;
+  }
+  /**
+   * Dispatch events with the EventSystem.
+   * @param e
+   * @param type
+   * @private
+   */
+  _dispatchEvent(e, type) {
+    const { displayObject: target } = e.target, boundry = this.renderer.events.rootBoundary, event = Object.assign(new events.FederatedEvent(boundry), { target });
+    boundry.rootTarget = this.renderer.lastObjectRendered, type.forEach((type2) => boundry.dispatchEvent(event, type2));
+  }
+  /**
+   * Maps the div button press to pixi's EventSystem (click)
+   * @private
+   * @param {MouseEvent} e - The click event.
+   */
+  _onClick(e) {
+    this._dispatchEvent(e, ["click", "pointertap", "tap"]);
+  }
+  /**
+   * Maps the div focus events to pixi's EventSystem (mouseover)
+   * @private
+   * @param {FocusEvent} e - The focus event.
+   */
+  _onFocus(e) {
+    e.target.getAttribute("aria-live") || e.target.setAttribute("aria-live", "assertive"), this._dispatchEvent(e, ["mouseover"]);
+  }
+  /**
+   * Maps the div focus events to pixi's EventSystem (mouseout)
+   * @private
+   * @param {FocusEvent} e - The focusout event.
+   */
+  _onFocusOut(e) {
+    e.target.getAttribute("aria-live") || e.target.setAttribute("aria-live", "polite"), this._dispatchEvent(e, ["mouseout"]);
+  }
+  /**
+   * Is called when a key is pressed
+   * @private
+   * @param {KeyboardEvent} e - The keydown event.
+   */
+  _onKeyDown(e) {
+    e.keyCode === KEY_CODE_TAB && this.activate();
+  }
+  /**
+   * Is called when the mouse moves across the renderer element
+   * @private
+   * @param {MouseEvent} e - The mouse event.
+   */
+  _onMouseMove(e) {
+    e.movementX === 0 && e.movementY === 0 || this.deactivate();
+  }
+  /** Destroys the accessibility manager */
+  destroy() {
+    this.destroyTouchHook(), this.div = null, globalThis.document.removeEventListener("mousemove", this._onMouseMove, !0), globalThis.removeEventListener("keydown", this._onKeyDown), this.pool = null, this.children = null, this.renderer = null;
+  }
+}
+AccessibilityManager.extension = {
+  name: "accessibility",
+  type: [
+    core.ExtensionType.RendererPlugin,
+    core.ExtensionType.CanvasRendererPlugin
+  ]
+};
+core.extensions.add(AccessibilityManager);
+exports.AccessibilityManager = AccessibilityManager;
+//# sourceMappingURL=AccessibilityManager.js.map

package/lib/AccessibilityManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccessibilityManager.js","sources":["../src/AccessibilityManager.ts"],"sourcesContent":["import { extensions, ExtensionType, utils } from '@pixi/core';\nimport { DisplayObject } from '@pixi/display';\nimport { FederatedEvent } from '@pixi/events';\nimport { accessibleTarget } from './accessibleTarget';\n\nimport type { ExtensionMetadata, IRenderer, Rectangle } from '@pixi/core';\nimport type { Container } from '@pixi/display';\nimport type { IAccessibleHTMLElement } from './accessibleTarget';\n\n// add some extra variables to the container..\nDisplayObject.mixin(accessibleTarget);\n\nconst KEY_CODE_TAB = 9;\n\nconst DIV_TOUCH_SIZE = 100;\nconst DIV_TOUCH_POS_X = 0;\nconst DIV_TOUCH_POS_Y = 0;\nconst DIV_TOUCH_ZINDEX = 2;\n\nconst DIV_HOOK_SIZE = 1;\nconst DIV_HOOK_POS_X = -1000;\nconst DIV_HOOK_POS_Y = -1000;\nconst DIV_HOOK_ZINDEX = 2;\n\n/**\n * The Accessibility manager recreates the ability to tab and have content read by screen readers.\n * This is very important as it can possibly help people with disabilities access PixiJS content.\n *\n * A DisplayObject can be made accessible just like it can be made interactive. This manager will map the\n * events as if the mouse was being used, minimizing the effort required to implement.\n *\n * An instance of this class is automatically created by default, and can be found at `renderer.plugins.accessibility`\n * @class\n * @memberof PIXI\n */\nexport class AccessibilityManager\n{\n    /** @ignore */\n    static extension: ExtensionMetadata = {\n        name: 'accessibility',\n        type: [\n            ExtensionType.RendererPlugin,\n            ExtensionType.CanvasRendererPlugin,\n        ],\n    };\n\n    /** Setting this to true will visually show the divs. */\n    public debug = false;\n\n    /**\n     * The renderer this accessibility manager works for.\n     * @type {PIXI.CanvasRenderer|PIXI.Renderer}\n     */\n    public renderer: IRenderer;\n\n    /** Internal variable, see isActive getter. */\n    private _isActive = false;\n\n    /** Internal variable, see isMobileAccessibility getter. */\n    private _isMobileAccessibility = false;\n\n    /** Button element for handling touch hooks. */\n    private _hookDiv: HTMLElement;\n\n    /** This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. */\n    private div: HTMLElement;\n\n    /** A simple pool for storing divs. */\n    private pool: IAccessibleHTMLElement[] = [];\n\n    /** This is a tick used to check if an object is no longer being rendered. */\n    private renderId = 0;\n\n    /** The array of currently active accessible items. */\n    private children: DisplayObject[] = [];\n\n    /** Count to throttle div updates on android devices. */\n    private androidUpdateCount = 0;\n\n    /**  The frequency to update the div elements. */\n    private androidUpdateFrequency = 500; // 2fps\n\n    /**\n     * @param {PIXI.CanvasRenderer|PIXI.Renderer} renderer - A reference to the current renderer\n     */\n    constructor(renderer: IRenderer)\n    {\n        this._hookDiv = null;\n\n        if (utils.isMobile.tablet || utils.isMobile.phone)\n        {\n            this.createTouchHook();\n        }\n\n        // first we create a div that will sit over the PixiJS element. This is where the div overlays will go.\n        const div = document.createElement('div');\n\n        div.style.width = `${DIV_TOUCH_SIZE}px`;\n        div.style.height = `${DIV_TOUCH_SIZE}px`;\n        div.style.position = 'absolute';\n        div.style.top = `${DIV_TOUCH_POS_X}px`;\n        div.style.left = `${DIV_TOUCH_POS_Y}px`;\n        div.style.zIndex = DIV_TOUCH_ZINDEX.toString();\n\n        this.div = div;\n        this.renderer = renderer;\n\n        /**\n         * pre-bind the functions\n         * @type {Function}\n         * @private\n         */\n        this._onKeyDown = this._onKeyDown.bind(this);\n\n        /**\n         * pre-bind the functions\n         * @type {Function}\n         * @private\n         */\n        this._onMouseMove = this._onMouseMove.bind(this);\n\n        // let listen for tab.. once pressed we can fire up and show the accessibility layer\n        globalThis.addEventListener('keydown', this._onKeyDown, false);\n    }\n\n    /**\n     * Value of `true` if accessibility is currently active and accessibility layers are showing.\n     * @member {boolean}\n     * @readonly\n     */\n    get isActive(): boolean\n    {\n        return this._isActive;\n    }\n\n    /**\n     * Value of `true` if accessibility is enabled for touch devices.\n     * @member {boolean}\n     * @readonly\n     */\n    get isMobileAccessibility(): boolean\n    {\n        return this._isMobileAccessibility;\n    }\n\n    /**\n     * Creates the touch hooks.\n     * @private\n     */\n    private createTouchHook(): void\n    {\n        const hookDiv = document.createElement('button');\n\n        hookDiv.style.width = `${DIV_HOOK_SIZE}px`;\n        hookDiv.style.height = `${DIV_HOOK_SIZE}px`;\n        hookDiv.style.position = 'absolute';\n        hookDiv.style.top = `${DIV_HOOK_POS_X}px`;\n        hookDiv.style.left = `${DIV_HOOK_POS_Y}px`;\n        hookDiv.style.zIndex = DIV_HOOK_ZINDEX.toString();\n        hookDiv.style.backgroundColor = '#FF0000';\n        hookDiv.title = 'select to enable accessibility for this content';\n\n        hookDiv.addEventListener('focus', () =>\n        {\n            this._isMobileAccessibility = true;\n            this.activate();\n            this.destroyTouchHook();\n        });\n\n        document.body.appendChild(hookDiv);\n        this._hookDiv = hookDiv;\n    }\n\n    /**\n     * Destroys the touch hooks.\n     * @private\n     */\n    private destroyTouchHook(): void\n    {\n        if (!this._hookDiv)\n        {\n            return;\n        }\n        document.body.removeChild(this._hookDiv);\n        this._hookDiv = null;\n    }\n\n    /**\n     * Activating will cause the Accessibility layer to be shown.\n     * This is called when a user presses the tab key.\n     * @private\n     */\n    private activate(): void\n    {\n        if (this._isActive)\n        {\n            return;\n        }\n\n        this._isActive = true;\n\n        globalThis.document.addEventListener('mousemove', this._onMouseMove, true);\n        globalThis.removeEventListener('keydown', this._onKeyDown, false);\n\n        this.renderer.on('postrender', this.update, this);\n        this.renderer.view.parentNode?.appendChild(this.div);\n    }\n\n    /**\n     * Deactivating will cause the Accessibility layer to be hidden.\n     * This is called when a user moves the mouse.\n     * @private\n     */\n    private deactivate(): void\n    {\n        if (!this._isActive || this._isMobileAccessibility)\n        {\n            return;\n        }\n\n        this._isActive = false;\n\n        globalThis.document.removeEventListener('mousemove', this._onMouseMove, true);\n        globalThis.addEventListener('keydown', this._onKeyDown, false);\n\n        this.renderer.off('postrender', this.update);\n        this.div.parentNode?.removeChild(this.div);\n    }\n\n    /**\n     * This recursive function will run through the scene graph and add any new accessible objects to the DOM layer.\n     * @private\n     * @param {PIXI.Container} displayObject - The DisplayObject to check.\n     */\n    private updateAccessibleObjects(displayObject: Container): void\n    {\n        if (!displayObject.visible || !displayObject.accessibleChildren)\n        {\n            return;\n        }\n\n        if (displayObject.accessible && displayObject.isInteractive())\n        {\n            if (!displayObject._accessibleActive)\n            {\n                this.addChild(displayObject);\n            }\n\n            displayObject.renderId = this.renderId;\n        }\n\n        const children = displayObject.children;\n\n        if (children)\n        {\n            for (let i = 0; i < children.length; i++)\n            {\n                this.updateAccessibleObjects(children[i] as Container);\n            }\n        }\n    }\n\n    /**\n     * Before each render this function will ensure that all divs are mapped correctly to their DisplayObjects.\n     * @private\n     */\n    private update(): void\n    {\n        /* On Android default web browser, tab order seems to be calculated by position rather than tabIndex,\n        *  moving buttons can cause focus to flicker between two buttons making it hard/impossible to navigate,\n        *  so I am just running update every half a second, seems to fix it.\n        */\n        const now = performance.now();\n\n        if (utils.isMobile.android.device && now < this.androidUpdateCount)\n        {\n            return;\n        }\n\n        this.androidUpdateCount = now + this.androidUpdateFrequency;\n\n        if (!this.renderer.renderingToScreen)\n        {\n            return;\n        }\n\n        // update children...\n        if (this.renderer.lastObjectRendered)\n        {\n            this.updateAccessibleObjects(this.renderer.lastObjectRendered as Container);\n        }\n\n        const { x, y, width, height } = this.renderer.view.getBoundingClientRect();\n        const { width: viewWidth, height: viewHeight, resolution } = this.renderer;\n\n        const sx = (width / viewWidth) * resolution;\n        const sy = (height / viewHeight) * resolution;\n\n        let div = this.div;\n\n        div.style.left = `${x}px`;\n        div.style.top = `${y}px`;\n        div.style.width = `${viewWidth}px`;\n        div.style.height = `${viewHeight}px`;\n\n        for (let i = 0; i < this.children.length; i++)\n        {\n            const child = this.children[i];\n\n            if (child.renderId !== this.renderId)\n            {\n                child._accessibleActive = false;\n\n                utils.removeItems(this.children, i, 1);\n                this.div.removeChild(child._accessibleDiv);\n                this.pool.push(child._accessibleDiv);\n                child._accessibleDiv = null;\n\n                i--;\n            }\n            else\n            {\n                // map div to display..\n                div = child._accessibleDiv;\n                let hitArea = child.hitArea as Rectangle;\n                const wt = child.worldTransform;\n\n                if (child.hitArea)\n                {\n                    div.style.left = `${(wt.tx + (hitArea.x * wt.a)) * sx}px`;\n                    div.style.top = `${(wt.ty + (hitArea.y * wt.d)) * sy}px`;\n\n                    div.style.width = `${hitArea.width * wt.a * sx}px`;\n                    div.style.height = `${hitArea.height * wt.d * sy}px`;\n                }\n                else\n                {\n                    hitArea = child.getBounds();\n\n                    this.capHitArea(hitArea);\n\n                    div.style.left = `${hitArea.x * sx}px`;\n                    div.style.top = `${hitArea.y * sy}px`;\n\n                    div.style.width = `${hitArea.width * sx}px`;\n                    div.style.height = `${hitArea.height * sy}px`;\n\n                    // update button titles and hints if they exist and they've changed\n                    if (div.title !== child.accessibleTitle && child.accessibleTitle !== null)\n                    {\n                        div.title = child.accessibleTitle;\n                    }\n                    if (div.getAttribute('aria-label') !== child.accessibleHint\n                        && child.accessibleHint !== null)\n                    {\n                        div.setAttribute('aria-label', child.accessibleHint);\n                    }\n                }\n\n                // the title or index may have changed, if so lets update it!\n                if (child.accessibleTitle !== div.title || child.tabIndex !== div.tabIndex)\n                {\n                    div.title = child.accessibleTitle;\n                    div.tabIndex = child.tabIndex;\n                    if (this.debug) this.updateDebugHTML(div);\n                }\n            }\n        }\n\n        // increment the render id..\n        this.renderId++;\n    }\n\n    /**\n     * private function that will visually add the information to the\n     * accessability div\n     * @param {HTMLElement} div -\n     */\n    public updateDebugHTML(div: IAccessibleHTMLElement): void\n    {\n        div.innerHTML = `type: ${div.type}</br> title : ${div.title}</br> tabIndex: ${div.tabIndex}`;\n    }\n\n    /**\n     * Adjust the hit area based on the bounds of a display object\n     * @param {PIXI.Rectangle} hitArea - Bounds of the child\n     */\n    public capHitArea(hitArea: Rectangle): void\n    {\n        if (hitArea.x < 0)\n        {\n            hitArea.width += hitArea.x;\n            hitArea.x = 0;\n        }\n\n        if (hitArea.y < 0)\n        {\n            hitArea.height += hitArea.y;\n            hitArea.y = 0;\n        }\n\n        const { width: viewWidth, height: viewHeight } = this.renderer;\n\n        if (hitArea.x + hitArea.width > viewWidth)\n        {\n            hitArea.width = viewWidth - hitArea.x;\n        }\n\n        if (hitArea.y + hitArea.height > viewHeight)\n        {\n            hitArea.height = viewHeight - hitArea.y;\n        }\n    }\n\n    /**\n     * Adds a DisplayObject to the accessibility manager\n     * @private\n     * @param {PIXI.DisplayObject} displayObject - The child to make accessible.\n     */\n    private addChild<T extends DisplayObject>(displayObject: T): void\n    {\n        //    this.activate();\n\n        let div = this.pool.pop();\n\n        if (!div)\n        {\n            div = document.createElement('button');\n\n            div.style.width = `${DIV_TOUCH_SIZE}px`;\n            div.style.height = `${DIV_TOUCH_SIZE}px`;\n            div.style.backgroundColor = this.debug ? 'rgba(255,255,255,0.5)' : 'transparent';\n            div.style.position = 'absolute';\n            div.style.zIndex = DIV_TOUCH_ZINDEX.toString();\n            div.style.borderStyle = 'none';\n\n            // ARIA attributes ensure that button title and hint updates are announced properly\n            if (navigator.userAgent.toLowerCase().includes('chrome'))\n            {\n                // Chrome doesn't need aria-live to work as intended; in fact it just gets more confused.\n                div.setAttribute('aria-live', 'off');\n            }\n            else\n            {\n                div.setAttribute('aria-live', 'polite');\n            }\n\n            if (navigator.userAgent.match(/rv:.*Gecko\\//))\n            {\n                // FireFox needs this to announce only the new button name\n                div.setAttribute('aria-relevant', 'additions');\n            }\n            else\n            {\n                // required by IE, other browsers don't much care\n                div.setAttribute('aria-relevant', 'text');\n            }\n\n            div.addEventListener('click', this._onClick.bind(this));\n            div.addEventListener('focus', this._onFocus.bind(this));\n            div.addEventListener('focusout', this._onFocusOut.bind(this));\n        }\n\n        // set pointer events\n        div.style.pointerEvents = displayObject.accessiblePointerEvents;\n        // set the type, this defaults to button!\n        div.type = displayObject.accessibleType;\n\n        if (displayObject.accessibleTitle && displayObject.accessibleTitle !== null)\n        {\n            div.title = displayObject.accessibleTitle;\n        }\n        else if (!displayObject.accessibleHint\n                 || displayObject.accessibleHint === null)\n        {\n            div.title = `displayObject ${displayObject.tabIndex}`;\n        }\n\n        if (displayObject.accessibleHint\n            && displayObject.accessibleHint !== null)\n        {\n            div.setAttribute('aria-label', displayObject.accessibleHint);\n        }\n\n        if (this.debug) this.updateDebugHTML(div);\n\n        displayObject._accessibleActive = true;\n        displayObject._accessibleDiv = div;\n        div.displayObject = displayObject;\n\n        this.children.push(displayObject);\n        this.div.appendChild(displayObject._accessibleDiv);\n        displayObject._accessibleDiv.tabIndex = displayObject.tabIndex;\n    }\n\n    /**\n     * Dispatch events with the EventSystem.\n     * @param e\n     * @param type\n     * @private\n     */\n    private _dispatchEvent(e: UIEvent, type: string[]): void\n    {\n        const { displayObject: target } = e.target as IAccessibleHTMLElement;\n        const boundry = this.renderer.events.rootBoundary;\n        const event: FederatedEvent = Object.assign(new FederatedEvent(boundry), { target });\n\n        boundry.rootTarget = this.renderer.lastObjectRendered as DisplayObject;\n        type.forEach((type) => boundry.dispatchEvent(event, type));\n    }\n\n    /**\n     * Maps the div button press to pixi's EventSystem (click)\n     * @private\n     * @param {MouseEvent} e - The click event.\n     */\n    private _onClick(e: MouseEvent): void\n    {\n        this._dispatchEvent(e, ['click', 'pointertap', 'tap']);\n    }\n\n    /**\n     * Maps the div focus events to pixi's EventSystem (mouseover)\n     * @private\n     * @param {FocusEvent} e - The focus event.\n     */\n    private _onFocus(e: FocusEvent): void\n    {\n        if (!(e.target as Element).getAttribute('aria-live'))\n        {\n            (e.target as Element).setAttribute('aria-live', 'assertive');\n        }\n\n        this._dispatchEvent(e, ['mouseover']);\n    }\n\n    /**\n     * Maps the div focus events to pixi's EventSystem (mouseout)\n     * @private\n     * @param {FocusEvent} e - The focusout event.\n     */\n    private _onFocusOut(e: FocusEvent): void\n    {\n        if (!(e.target as Element).getAttribute('aria-live'))\n        {\n            (e.target as Element).setAttribute('aria-live', 'polite');\n        }\n\n        this._dispatchEvent(e, ['mouseout']);\n    }\n\n    /**\n     * Is called when a key is pressed\n     * @private\n     * @param {KeyboardEvent} e - The keydown event.\n     */\n    private _onKeyDown(e: KeyboardEvent): void\n    {\n        if (e.keyCode !== KEY_CODE_TAB)\n        {\n            return;\n        }\n\n        this.activate();\n    }\n\n    /**\n     * Is called when the mouse moves across the renderer element\n     * @private\n     * @param {MouseEvent} e - The mouse event.\n     */\n    private _onMouseMove(e: MouseEvent): void\n    {\n        if (e.movementX === 0 && e.movementY === 0)\n        {\n            return;\n        }\n\n        this.deactivate();\n    }\n\n    /** Destroys the accessibility manager */\n    public destroy(): void\n    {\n        this.destroyTouchHook();\n        this.div = null;\n\n        globalThis.document.removeEventListener('mousemove', this._onMouseMove, true);\n        globalThis.removeEventListener('keydown', this._onKeyDown);\n\n        this.pool = null;\n        this.children = null;\n        this.renderer = null;\n    }\n}\n\nextensions.add(AccessibilityManager);\n"],"names":["DisplayObject","accessibleTarget","utils","FederatedEvent","type","ExtensionType","extensions"],"mappings":"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"}

package/lib/AccessibilityManager.mjs

@@ -0,0 +1,197 @@
+import { utils, ExtensionType, extensions } from "@pixi/core";
+import { DisplayObject } from "@pixi/display";
+import { FederatedEvent } from "@pixi/events";
+import { accessibleTarget } from "./accessibleTarget.mjs";
+DisplayObject.mixin(accessibleTarget);
+const KEY_CODE_TAB = 9, DIV_TOUCH_SIZE = 100, DIV_TOUCH_POS_X = 0, DIV_TOUCH_POS_Y = 0, DIV_TOUCH_ZINDEX = 2, DIV_HOOK_SIZE = 1, DIV_HOOK_POS_X = -1e3, DIV_HOOK_POS_Y = -1e3, DIV_HOOK_ZINDEX = 2;
+class AccessibilityManager {
+  // 2fps
+  /**
+   * @param {PIXI.CanvasRenderer|PIXI.Renderer} renderer - A reference to the current renderer
+   */
+  constructor(renderer) {
+    this.debug = !1, this._isActive = !1, this._isMobileAccessibility = !1, this.pool = [], this.renderId = 0, this.children = [], this.androidUpdateCount = 0, this.androidUpdateFrequency = 500, this._hookDiv = null, (utils.isMobile.tablet || utils.isMobile.phone) && this.createTouchHook();
+    const div = document.createElement("div");
+    div.style.width = `${DIV_TOUCH_SIZE}px`, div.style.height = `${DIV_TOUCH_SIZE}px`, div.style.position = "absolute", div.style.top = `${DIV_TOUCH_POS_X}px`, div.style.left = `${DIV_TOUCH_POS_Y}px`, div.style.zIndex = DIV_TOUCH_ZINDEX.toString(), this.div = div, this.renderer = renderer, this._onKeyDown = this._onKeyDown.bind(this), this._onMouseMove = this._onMouseMove.bind(this), globalThis.addEventListener("keydown", this._onKeyDown, !1);
+  }
+  /**
+   * Value of `true` if accessibility is currently active and accessibility layers are showing.
+   * @member {boolean}
+   * @readonly
+   */
+  get isActive() {
+    return this._isActive;
+  }
+  /**
+   * Value of `true` if accessibility is enabled for touch devices.
+   * @member {boolean}
+   * @readonly
+   */
+  get isMobileAccessibility() {
+    return this._isMobileAccessibility;
+  }
+  /**
+   * Creates the touch hooks.
+   * @private
+   */
+  createTouchHook() {
+    const hookDiv = document.createElement("button");
+    hookDiv.style.width = `${DIV_HOOK_SIZE}px`, hookDiv.style.height = `${DIV_HOOK_SIZE}px`, hookDiv.style.position = "absolute", hookDiv.style.top = `${DIV_HOOK_POS_X}px`, hookDiv.style.left = `${DIV_HOOK_POS_Y}px`, hookDiv.style.zIndex = DIV_HOOK_ZINDEX.toString(), hookDiv.style.backgroundColor = "#FF0000", hookDiv.title = "select to enable accessibility for this content", hookDiv.addEventListener("focus", () => {
+      this._isMobileAccessibility = !0, this.activate(), this.destroyTouchHook();
+    }), document.body.appendChild(hookDiv), this._hookDiv = hookDiv;
+  }
+  /**
+   * Destroys the touch hooks.
+   * @private
+   */
+  destroyTouchHook() {
+    this._hookDiv && (document.body.removeChild(this._hookDiv), this._hookDiv = null);
+  }
+  /**
+   * Activating will cause the Accessibility layer to be shown.
+   * This is called when a user presses the tab key.
+   * @private
+   */
+  activate() {
+    this._isActive || (this._isActive = !0, globalThis.document.addEventListener("mousemove", this._onMouseMove, !0), globalThis.removeEventListener("keydown", this._onKeyDown, !1), this.renderer.on("postrender", this.update, this), (this.renderer.view.parentNode || document.body)?.appendChild(this.div));
+  }
+  /**
+   * Deactivating will cause the Accessibility layer to be hidden.
+   * This is called when a user moves the mouse.
+   * @private
+   */
+  deactivate() {
+    !this._isActive || this._isMobileAccessibility || (this._isActive = !1, globalThis.document.removeEventListener("mousemove", this._onMouseMove, !0), globalThis.addEventListener("keydown", this._onKeyDown, !1), this.renderer.off("postrender", this.update), this.div.parentNode?.removeChild(this.div));
+  }
+  /**
+   * This recursive function will run through the scene graph and add any new accessible objects to the DOM layer.
+   * @private
+   * @param {PIXI.Container} displayObject - The DisplayObject to check.
+   */
+  updateAccessibleObjects(displayObject) {
+    if (!displayObject.visible || !displayObject.accessibleChildren)
+      return;
+    displayObject.accessible && displayObject.isInteractive() && (displayObject._accessibleActive || this.addChild(displayObject), displayObject.renderId = this.renderId);
+    const children = displayObject.children;
+    if (children)
+      for (let i = 0; i < children.length; i++)
+        this.updateAccessibleObjects(children[i]);
+  }
+  /**
+   * Before each render this function will ensure that all divs are mapped correctly to their DisplayObjects.
+   * @private
+   */
+  update() {
+    const now = performance.now();
+    if (utils.isMobile.android.device && now < this.androidUpdateCount || (this.androidUpdateCount = now + this.androidUpdateFrequency, !this.renderer.renderingToScreen))
+      return;
+    this.renderer.lastObjectRendered && this.updateAccessibleObjects(this.renderer.lastObjectRendered);
+    const { x, y, width, height } = this.renderer.view.getBoundingClientRect(), { width: viewWidth, height: viewHeight, resolution } = this.renderer, sx = width / viewWidth * resolution, sy = height / viewHeight * resolution;
+    let div = this.div;
+    div.style.left = `${x}px`, div.style.top = `${y}px`, div.style.width = `${viewWidth}px`, div.style.height = `${viewHeight}px`;
+    for (let i = 0; i < this.children.length; i++) {
+      const child = this.children[i];
+      if (child.renderId !== this.renderId)
+        child._accessibleActive = !1, utils.removeItems(this.children, i, 1), this.div.removeChild(child._accessibleDiv), this.pool.push(child._accessibleDiv), child._accessibleDiv = null, i--;
+      else {
+        div = child._accessibleDiv;
+        let hitArea = child.hitArea;
+        const wt = child.worldTransform;
+        child.hitArea ? (div.style.left = `${(wt.tx + hitArea.x * wt.a) * sx}px`, div.style.top = `${(wt.ty + hitArea.y * wt.d) * sy}px`, div.style.width = `${hitArea.width * wt.a * sx}px`, div.style.height = `${hitArea.height * wt.d * sy}px`) : (hitArea = child.getBounds(), this.capHitArea(hitArea), div.style.left = `${hitArea.x * sx}px`, div.style.top = `${hitArea.y * sy}px`, div.style.width = `${hitArea.width * sx}px`, div.style.height = `${hitArea.height * sy}px`, div.title !== child.accessibleTitle && child.accessibleTitle !== null && (div.title = child.accessibleTitle), div.getAttribute("aria-label") !== child.accessibleHint && child.accessibleHint !== null && div.setAttribute("aria-label", child.accessibleHint)), (child.accessibleTitle !== div.title || child.tabIndex !== div.tabIndex) && (div.title = child.accessibleTitle, div.tabIndex = child.tabIndex, this.debug && this.updateDebugHTML(div));
+      }
+    }
+    this.renderId++;
+  }
+  /**
+   * private function that will visually add the information to the
+   * accessability div
+   * @param {HTMLElement} div -
+   */
+  updateDebugHTML(div) {
+    div.innerHTML = `type: ${div.type}</br> title : ${div.title}</br> tabIndex: ${div.tabIndex}`;
+  }
+  /**
+   * Adjust the hit area based on the bounds of a display object
+   * @param {PIXI.Rectangle} hitArea - Bounds of the child
+   */
+  capHitArea(hitArea) {
+    hitArea.x < 0 && (hitArea.width += hitArea.x, hitArea.x = 0), hitArea.y < 0 && (hitArea.height += hitArea.y, hitArea.y = 0);
+    const { width: viewWidth, height: viewHeight } = this.renderer;
+    hitArea.x + hitArea.width > viewWidth && (hitArea.width = viewWidth - hitArea.x), hitArea.y + hitArea.height > viewHeight && (hitArea.height = viewHeight - hitArea.y);
+  }
+  /**
+   * Adds a DisplayObject to the accessibility manager
+   * @private
+   * @param {PIXI.DisplayObject} displayObject - The child to make accessible.
+   */
+  addChild(displayObject) {
+    let div = this.pool.pop();
+    div || (div = document.createElement("button"), div.style.width = `${DIV_TOUCH_SIZE}px`, div.style.height = `${DIV_TOUCH_SIZE}px`, div.style.backgroundColor = this.debug ? "rgba(255,255,255,0.5)" : "transparent", div.style.position = "absolute", div.style.zIndex = DIV_TOUCH_ZINDEX.toString(), div.style.borderStyle = "none", navigator.userAgent.toLowerCase().includes("chrome") ? div.setAttribute("aria-live", "off") : div.setAttribute("aria-live", "polite"), navigator.userAgent.match(/rv:.*Gecko\//) ? div.setAttribute("aria-relevant", "additions") : div.setAttribute("aria-relevant", "text"), div.addEventListener("click", this._onClick.bind(this)), div.addEventListener("focus", this._onFocus.bind(this)), div.addEventListener("focusout", this._onFocusOut.bind(this))), div.style.pointerEvents = displayObject.accessiblePointerEvents, div.type = displayObject.accessibleType, displayObject.accessibleTitle && displayObject.accessibleTitle !== null ? div.title = displayObject.accessibleTitle : (!displayObject.accessibleHint || displayObject.accessibleHint === null) && (div.title = `displayObject ${displayObject.tabIndex}`), displayObject.accessibleHint && displayObject.accessibleHint !== null && div.setAttribute("aria-label", displayObject.accessibleHint), this.debug && this.updateDebugHTML(div), displayObject._accessibleActive = !0, displayObject._accessibleDiv = div, div.displayObject = displayObject, this.children.push(displayObject), this.div.appendChild(displayObject._accessibleDiv), displayObject._accessibleDiv.tabIndex = displayObject.tabIndex;
+  }
+  /**
+   * Dispatch events with the EventSystem.
+   * @param e
+   * @param type
+   * @private
+   */
+  _dispatchEvent(e, type) {
+    const { displayObject: target } = e.target, boundry = this.renderer.events.rootBoundary, event = Object.assign(new FederatedEvent(boundry), { target });
+    boundry.rootTarget = this.renderer.lastObjectRendered, type.forEach((type2) => boundry.dispatchEvent(event, type2));
+  }
+  /**
+   * Maps the div button press to pixi's EventSystem (click)
+   * @private
+   * @param {MouseEvent} e - The click event.
+   */
+  _onClick(e) {
+    this._dispatchEvent(e, ["click", "pointertap", "tap"]);
+  }
+  /**
+   * Maps the div focus events to pixi's EventSystem (mouseover)
+   * @private
+   * @param {FocusEvent} e - The focus event.
+   */
+  _onFocus(e) {
+    e.target.getAttribute("aria-live") || e.target.setAttribute("aria-live", "assertive"), this._dispatchEvent(e, ["mouseover"]);
+  }
+  /**
+   * Maps the div focus events to pixi's EventSystem (mouseout)
+   * @private
+   * @param {FocusEvent} e - The focusout event.
+   */
+  _onFocusOut(e) {
+    e.target.getAttribute("aria-live") || e.target.setAttribute("aria-live", "polite"), this._dispatchEvent(e, ["mouseout"]);
+  }
+  /**
+   * Is called when a key is pressed
+   * @private
+   * @param {KeyboardEvent} e - The keydown event.
+   */
+  _onKeyDown(e) {
+    e.keyCode === KEY_CODE_TAB && this.activate();
+  }
+  /**
+   * Is called when the mouse moves across the renderer element
+   * @private
+   * @param {MouseEvent} e - The mouse event.
+   */
+  _onMouseMove(e) {
+    e.movementX === 0 && e.movementY === 0 || this.deactivate();
+  }
+  /** Destroys the accessibility manager */
+  destroy() {
+    this.destroyTouchHook(), this.div = null, globalThis.document.removeEventListener("mousemove", this._onMouseMove, !0), globalThis.removeEventListener("keydown", this._onKeyDown), this.pool = null, this.children = null, this.renderer = null;
+  }
+}
+AccessibilityManager.extension = {
+  name: "accessibility",
+  type: [
+    ExtensionType.RendererPlugin,
+    ExtensionType.CanvasRendererPlugin
+  ]
+};
+extensions.add(AccessibilityManager);
+export {
+  AccessibilityManager
+};
+//# sourceMappingURL=AccessibilityManager.mjs.map

package/lib/AccessibilityManager.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccessibilityManager.mjs","sources":["../src/AccessibilityManager.ts"],"sourcesContent":["import { extensions, ExtensionType, utils } from '@pixi/core';\nimport { DisplayObject } from '@pixi/display';\nimport { FederatedEvent } from '@pixi/events';\nimport { accessibleTarget } from './accessibleTarget';\n\nimport type { ExtensionMetadata, IRenderer, Rectangle } from '@pixi/core';\nimport type { Container } from '@pixi/display';\nimport type { IAccessibleHTMLElement } from './accessibleTarget';\n\n// add some extra variables to the container..\nDisplayObject.mixin(accessibleTarget);\n\nconst KEY_CODE_TAB = 9;\n\nconst DIV_TOUCH_SIZE = 100;\nconst DIV_TOUCH_POS_X = 0;\nconst DIV_TOUCH_POS_Y = 0;\nconst DIV_TOUCH_ZINDEX = 2;\n\nconst DIV_HOOK_SIZE = 1;\nconst DIV_HOOK_POS_X = -1000;\nconst DIV_HOOK_POS_Y = -1000;\nconst DIV_HOOK_ZINDEX = 2;\n\n/**\n * The Accessibility manager recreates the ability to tab and have content read by screen readers.\n * This is very important as it can possibly help people with disabilities access PixiJS content.\n *\n * A DisplayObject can be made accessible just like it can be made interactive. This manager will map the\n * events as if the mouse was being used, minimizing the effort required to implement.\n *\n * An instance of this class is automatically created by default, and can be found at `renderer.plugins.accessibility`\n * @class\n * @memberof PIXI\n */\nexport class AccessibilityManager\n{\n    /** @ignore */\n    static extension: ExtensionMetadata = {\n        name: 'accessibility',\n        type: [\n            ExtensionType.RendererPlugin,\n            ExtensionType.CanvasRendererPlugin,\n        ],\n    };\n\n    /** Setting this to true will visually show the divs. */\n    public debug = false;\n\n    /**\n     * The renderer this accessibility manager works for.\n     * @type {PIXI.CanvasRenderer|PIXI.Renderer}\n     */\n    public renderer: IRenderer;\n\n    /** Internal variable, see isActive getter. */\n    private _isActive = false;\n\n    /** Internal variable, see isMobileAccessibility getter. */\n    private _isMobileAccessibility = false;\n\n    /** Button element for handling touch hooks. */\n    private _hookDiv: HTMLElement;\n\n    /** This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. */\n    private div: HTMLElement;\n\n    /** A simple pool for storing divs. */\n    private pool: IAccessibleHTMLElement[] = [];\n\n    /** This is a tick used to check if an object is no longer being rendered. */\n    private renderId = 0;\n\n    /** The array of currently active accessible items. */\n    private children: DisplayObject[] = [];\n\n    /** Count to throttle div updates on android devices. */\n    private androidUpdateCount = 0;\n\n    /**  The frequency to update the div elements. */\n    private androidUpdateFrequency = 500; // 2fps\n\n    /**\n     * @param {PIXI.CanvasRenderer|PIXI.Renderer} renderer - A reference to the current renderer\n     */\n    constructor(renderer: IRenderer)\n    {\n        this._hookDiv = null;\n\n        if (utils.isMobile.tablet || utils.isMobile.phone)\n        {\n            this.createTouchHook();\n        }\n\n        // first we create a div that will sit over the PixiJS element. This is where the div overlays will go.\n        const div = document.createElement('div');\n\n        div.style.width = `${DIV_TOUCH_SIZE}px`;\n        div.style.height = `${DIV_TOUCH_SIZE}px`;\n        div.style.position = 'absolute';\n        div.style.top = `${DIV_TOUCH_POS_X}px`;\n        div.style.left = `${DIV_TOUCH_POS_Y}px`;\n        div.style.zIndex = DIV_TOUCH_ZINDEX.toString();\n\n        this.div = div;\n        this.renderer = renderer;\n\n        /**\n         * pre-bind the functions\n         * @type {Function}\n         * @private\n         */\n        this._onKeyDown = this._onKeyDown.bind(this);\n\n        /**\n         * pre-bind the functions\n         * @type {Function}\n         * @private\n         */\n        this._onMouseMove = this._onMouseMove.bind(this);\n\n        // let listen for tab.. once pressed we can fire up and show the accessibility layer\n        globalThis.addEventListener('keydown', this._onKeyDown, false);\n    }\n\n    /**\n     * Value of `true` if accessibility is currently active and accessibility layers are showing.\n     * @member {boolean}\n     * @readonly\n     */\n    get isActive(): boolean\n    {\n        return this._isActive;\n    }\n\n    /**\n     * Value of `true` if accessibility is enabled for touch devices.\n     * @member {boolean}\n     * @readonly\n     */\n    get isMobileAccessibility(): boolean\n    {\n        return this._isMobileAccessibility;\n    }\n\n    /**\n     * Creates the touch hooks.\n     * @private\n     */\n    private createTouchHook(): void\n    {\n        const hookDiv = document.createElement('button');\n\n        hookDiv.style.width = `${DIV_HOOK_SIZE}px`;\n        hookDiv.style.height = `${DIV_HOOK_SIZE}px`;\n        hookDiv.style.position = 'absolute';\n        hookDiv.style.top = `${DIV_HOOK_POS_X}px`;\n        hookDiv.style.left = `${DIV_HOOK_POS_Y}px`;\n        hookDiv.style.zIndex = DIV_HOOK_ZINDEX.toString();\n        hookDiv.style.backgroundColor = '#FF0000';\n        hookDiv.title = 'select to enable accessibility for this content';\n\n        hookDiv.addEventListener('focus', () =>\n        {\n            this._isMobileAccessibility = true;\n            this.activate();\n            this.destroyTouchHook();\n        });\n\n        document.body.appendChild(hookDiv);\n        this._hookDiv = hookDiv;\n    }\n\n    /**\n     * Destroys the touch hooks.\n     * @private\n     */\n    private destroyTouchHook(): void\n    {\n        if (!this._hookDiv)\n        {\n            return;\n        }\n        document.body.removeChild(this._hookDiv);\n        this._hookDiv = null;\n    }\n\n    /**\n     * Activating will cause the Accessibility layer to be shown.\n     * This is called when a user presses the tab key.\n     * @private\n     */\n    private activate(): void\n    {\n        if (this._isActive)\n        {\n            return;\n        }\n\n        this._isActive = true;\n\n        globalThis.document.addEventListener('mousemove', this._onMouseMove, true);\n        globalThis.removeEventListener('keydown', this._onKeyDown, false);\n\n        this.renderer.on('postrender', this.update, this);\n        this.renderer.view.parentNode?.appendChild(this.div);\n    }\n\n    /**\n     * Deactivating will cause the Accessibility layer to be hidden.\n     * This is called when a user moves the mouse.\n     * @private\n     */\n    private deactivate(): void\n    {\n        if (!this._isActive || this._isMobileAccessibility)\n        {\n            return;\n        }\n\n        this._isActive = false;\n\n        globalThis.document.removeEventListener('mousemove', this._onMouseMove, true);\n        globalThis.addEventListener('keydown', this._onKeyDown, false);\n\n        this.renderer.off('postrender', this.update);\n        this.div.parentNode?.removeChild(this.div);\n    }\n\n    /**\n     * This recursive function will run through the scene graph and add any new accessible objects to the DOM layer.\n     * @private\n     * @param {PIXI.Container} displayObject - The DisplayObject to check.\n     */\n    private updateAccessibleObjects(displayObject: Container): void\n    {\n        if (!displayObject.visible || !displayObject.accessibleChildren)\n        {\n            return;\n        }\n\n        if (displayObject.accessible && displayObject.isInteractive())\n        {\n            if (!displayObject._accessibleActive)\n            {\n                this.addChild(displayObject);\n            }\n\n            displayObject.renderId = this.renderId;\n        }\n\n        const children = displayObject.children;\n\n        if (children)\n        {\n            for (let i = 0; i < children.length; i++)\n            {\n                this.updateAccessibleObjects(children[i] as Container);\n            }\n        }\n    }\n\n    /**\n     * Before each render this function will ensure that all divs are mapped correctly to their DisplayObjects.\n     * @private\n     */\n    private update(): void\n    {\n        /* On Android default web browser, tab order seems to be calculated by position rather than tabIndex,\n        *  moving buttons can cause focus to flicker between two buttons making it hard/impossible to navigate,\n        *  so I am just running update every half a second, seems to fix it.\n        */\n        const now = performance.now();\n\n        if (utils.isMobile.android.device && now < this.androidUpdateCount)\n        {\n            return;\n        }\n\n        this.androidUpdateCount = now + this.androidUpdateFrequency;\n\n        if (!this.renderer.renderingToScreen)\n        {\n            return;\n        }\n\n        // update children...\n        if (this.renderer.lastObjectRendered)\n        {\n            this.updateAccessibleObjects(this.renderer.lastObjectRendered as Container);\n        }\n\n        const { x, y, width, height } = this.renderer.view.getBoundingClientRect();\n        const { width: viewWidth, height: viewHeight, resolution } = this.renderer;\n\n        const sx = (width / viewWidth) * resolution;\n        const sy = (height / viewHeight) * resolution;\n\n        let div = this.div;\n\n        div.style.left = `${x}px`;\n        div.style.top = `${y}px`;\n        div.style.width = `${viewWidth}px`;\n        div.style.height = `${viewHeight}px`;\n\n        for (let i = 0; i < this.children.length; i++)\n        {\n            const child = this.children[i];\n\n            if (child.renderId !== this.renderId)\n            {\n                child._accessibleActive = false;\n\n                utils.removeItems(this.children, i, 1);\n                this.div.removeChild(child._accessibleDiv);\n                this.pool.push(child._accessibleDiv);\n                child._accessibleDiv = null;\n\n                i--;\n            }\n            else\n            {\n                // map div to display..\n                div = child._accessibleDiv;\n                let hitArea = child.hitArea as Rectangle;\n                const wt = child.worldTransform;\n\n                if (child.hitArea)\n                {\n                    div.style.left = `${(wt.tx + (hitArea.x * wt.a)) * sx}px`;\n                    div.style.top = `${(wt.ty + (hitArea.y * wt.d)) * sy}px`;\n\n                    div.style.width = `${hitArea.width * wt.a * sx}px`;\n                    div.style.height = `${hitArea.height * wt.d * sy}px`;\n                }\n                else\n                {\n                    hitArea = child.getBounds();\n\n                    this.capHitArea(hitArea);\n\n                    div.style.left = `${hitArea.x * sx}px`;\n                    div.style.top = `${hitArea.y * sy}px`;\n\n                    div.style.width = `${hitArea.width * sx}px`;\n                    div.style.height = `${hitArea.height * sy}px`;\n\n                    // update button titles and hints if they exist and they've changed\n                    if (div.title !== child.accessibleTitle && child.accessibleTitle !== null)\n                    {\n                        div.title = child.accessibleTitle;\n                    }\n                    if (div.getAttribute('aria-label') !== child.accessibleHint\n                        && child.accessibleHint !== null)\n                    {\n                        div.setAttribute('aria-label', child.accessibleHint);\n                    }\n                }\n\n                // the title or index may have changed, if so lets update it!\n                if (child.accessibleTitle !== div.title || child.tabIndex !== div.tabIndex)\n                {\n                    div.title = child.accessibleTitle;\n                    div.tabIndex = child.tabIndex;\n                    if (this.debug) this.updateDebugHTML(div);\n                }\n            }\n        }\n\n        // increment the render id..\n        this.renderId++;\n    }\n\n    /**\n     * private function that will visually add the information to the\n     * accessability div\n     * @param {HTMLElement} div -\n     */\n    public updateDebugHTML(div: IAccessibleHTMLElement): void\n    {\n        div.innerHTML = `type: ${div.type}</br> title : ${div.title}</br> tabIndex: ${div.tabIndex}`;\n    }\n\n    /**\n     * Adjust the hit area based on the bounds of a display object\n     * @param {PIXI.Rectangle} hitArea - Bounds of the child\n     */\n    public capHitArea(hitArea: Rectangle): void\n    {\n        if (hitArea.x < 0)\n        {\n            hitArea.width += hitArea.x;\n            hitArea.x = 0;\n        }\n\n        if (hitArea.y < 0)\n        {\n            hitArea.height += hitArea.y;\n            hitArea.y = 0;\n        }\n\n        const { width: viewWidth, height: viewHeight } = this.renderer;\n\n        if (hitArea.x + hitArea.width > viewWidth)\n        {\n            hitArea.width = viewWidth - hitArea.x;\n        }\n\n        if (hitArea.y + hitArea.height > viewHeight)\n        {\n            hitArea.height = viewHeight - hitArea.y;\n        }\n    }\n\n    /**\n     * Adds a DisplayObject to the accessibility manager\n     * @private\n     * @param {PIXI.DisplayObject} displayObject - The child to make accessible.\n     */\n    private addChild<T extends DisplayObject>(displayObject: T): void\n    {\n        //    this.activate();\n\n        let div = this.pool.pop();\n\n        if (!div)\n        {\n            div = document.createElement('button');\n\n            div.style.width = `${DIV_TOUCH_SIZE}px`;\n            div.style.height = `${DIV_TOUCH_SIZE}px`;\n            div.style.backgroundColor = this.debug ? 'rgba(255,255,255,0.5)' : 'transparent';\n            div.style.position = 'absolute';\n            div.style.zIndex = DIV_TOUCH_ZINDEX.toString();\n            div.style.borderStyle = 'none';\n\n            // ARIA attributes ensure that button title and hint updates are announced properly\n            if (navigator.userAgent.toLowerCase().includes('chrome'))\n            {\n                // Chrome doesn't need aria-live to work as intended; in fact it just gets more confused.\n                div.setAttribute('aria-live', 'off');\n            }\n            else\n            {\n                div.setAttribute('aria-live', 'polite');\n            }\n\n            if (navigator.userAgent.match(/rv:.*Gecko\\//))\n            {\n                // FireFox needs this to announce only the new button name\n                div.setAttribute('aria-relevant', 'additions');\n            }\n            else\n            {\n                // required by IE, other browsers don't much care\n                div.setAttribute('aria-relevant', 'text');\n            }\n\n            div.addEventListener('click', this._onClick.bind(this));\n            div.addEventListener('focus', this._onFocus.bind(this));\n            div.addEventListener('focusout', this._onFocusOut.bind(this));\n        }\n\n        // set pointer events\n        div.style.pointerEvents = displayObject.accessiblePointerEvents;\n        // set the type, this defaults to button!\n        div.type = displayObject.accessibleType;\n\n        if (displayObject.accessibleTitle && displayObject.accessibleTitle !== null)\n        {\n            div.title = displayObject.accessibleTitle;\n        }\n        else if (!displayObject.accessibleHint\n                 || displayObject.accessibleHint === null)\n        {\n            div.title = `displayObject ${displayObject.tabIndex}`;\n        }\n\n        if (displayObject.accessibleHint\n            && displayObject.accessibleHint !== null)\n        {\n            div.setAttribute('aria-label', displayObject.accessibleHint);\n        }\n\n        if (this.debug) this.updateDebugHTML(div);\n\n        displayObject._accessibleActive = true;\n        displayObject._accessibleDiv = div;\n        div.displayObject = displayObject;\n\n        this.children.push(displayObject);\n        this.div.appendChild(displayObject._accessibleDiv);\n        displayObject._accessibleDiv.tabIndex = displayObject.tabIndex;\n    }\n\n    /**\n     * Dispatch events with the EventSystem.\n     * @param e\n     * @param type\n     * @private\n     */\n    private _dispatchEvent(e: UIEvent, type: string[]): void\n    {\n        const { displayObject: target } = e.target as IAccessibleHTMLElement;\n        const boundry = this.renderer.events.rootBoundary;\n        const event: FederatedEvent = Object.assign(new FederatedEvent(boundry), { target });\n\n        boundry.rootTarget = this.renderer.lastObjectRendered as DisplayObject;\n        type.forEach((type) => boundry.dispatchEvent(event, type));\n    }\n\n    /**\n     * Maps the div button press to pixi's EventSystem (click)\n     * @private\n     * @param {MouseEvent} e - The click event.\n     */\n    private _onClick(e: MouseEvent): void\n    {\n        this._dispatchEvent(e, ['click', 'pointertap', 'tap']);\n    }\n\n    /**\n     * Maps the div focus events to pixi's EventSystem (mouseover)\n     * @private\n     * @param {FocusEvent} e - The focus event.\n     */\n    private _onFocus(e: FocusEvent): void\n    {\n        if (!(e.target as Element).getAttribute('aria-live'))\n        {\n            (e.target as Element).setAttribute('aria-live', 'assertive');\n        }\n\n        this._dispatchEvent(e, ['mouseover']);\n    }\n\n    /**\n     * Maps the div focus events to pixi's EventSystem (mouseout)\n     * @private\n     * @param {FocusEvent} e - The focusout event.\n     */\n    private _onFocusOut(e: FocusEvent): void\n    {\n        if (!(e.target as Element).getAttribute('aria-live'))\n        {\n            (e.target as Element).setAttribute('aria-live', 'polite');\n        }\n\n        this._dispatchEvent(e, ['mouseout']);\n    }\n\n    /**\n     * Is called when a key is pressed\n     * @private\n     * @param {KeyboardEvent} e - The keydown event.\n     */\n    private _onKeyDown(e: KeyboardEvent): void\n    {\n        if (e.keyCode !== KEY_CODE_TAB)\n        {\n            return;\n        }\n\n        this.activate();\n    }\n\n    /**\n     * Is called when the mouse moves across the renderer element\n     * @private\n     * @param {MouseEvent} e - The mouse event.\n     */\n    private _onMouseMove(e: MouseEvent): void\n    {\n        if (e.movementX === 0 && e.movementY === 0)\n        {\n            return;\n        }\n\n        this.deactivate();\n    }\n\n    /** Destroys the accessibility manager */\n    public destroy(): void\n    {\n        this.destroyTouchHook();\n        this.div = null;\n\n        globalThis.document.removeEventListener('mousemove', this._onMouseMove, true);\n        globalThis.removeEventListener('keydown', this._onKeyDown);\n\n        this.pool = null;\n        this.children = null;\n        this.renderer = null;\n    }\n}\n\nextensions.add(AccessibilityManager);\n"],"names":["type"],"mappings":"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"}

package/lib/accessibleTarget.d.ts

@@ -0,0 +1,32 @@
+import type { DisplayObject } from '@pixi/display';
+export type PointerEvents = 'auto' | 'none' | 'visiblePainted' | 'visibleFill' | 'visibleStroke' | 'visible' | 'painted' | 'fill' | 'stroke' | 'all' | 'inherit';
+export interface IAccessibleTarget {
+    accessible: boolean;
+    accessibleTitle: string;
+    accessibleHint: string;
+    tabIndex: number;
+    _accessibleActive: boolean;
+    _accessibleDiv: IAccessibleHTMLElement;
+    accessibleType: string;
+    accessiblePointerEvents: PointerEvents;
+    accessibleChildren: boolean;
+    renderId: number;
+}
+export interface IAccessibleHTMLElement extends HTMLElement {
+    type?: string;
+    displayObject?: DisplayObject;
+}
+/**
+ * Default property values of accessible objects
+ * used by {@link PIXI.AccessibilityManager}.
+ * @private
+ * @function accessibleTarget
+ * @memberof PIXI
+ * @type {object}
+ * @example
+ * import { accessibleTarget } from 'pixi.js';
+ *
+ * function MyObject() {}
+ * Object.assign(MyObject.prototype, accessibleTarget);
+ */
+export declare const accessibleTarget: IAccessibleTarget;

package/lib/accessibleTarget.js

@@ -0,0 +1,69 @@
+"use strict";
+const accessibleTarget = {
+  /**
+   *  Flag for if the object is accessible. If true AccessibilityManager will overlay a
+   *   shadow div with attributes set
+   * @member {boolean}
+   * @memberof PIXI.DisplayObject#
+   */
+  accessible: !1,
+  /**
+   * Sets the title attribute of the shadow div
+   * If accessibleTitle AND accessibleHint has not been this will default to 'displayObject [tabIndex]'
+   * @member {?string}
+   * @memberof PIXI.DisplayObject#
+   */
+  accessibleTitle: null,
+  /**
+   * Sets the aria-label attribute of the shadow div
+   * @member {string}
+   * @memberof PIXI.DisplayObject#
+   */
+  accessibleHint: null,
+  /**
+   * @member {number}
+   * @memberof PIXI.DisplayObject#
+   * @private
+   * @todo Needs docs.
+   */
+  tabIndex: 0,
+  /**
+   * @member {boolean}
+   * @memberof PIXI.DisplayObject#
+   * @todo Needs docs.
+   */
+  _accessibleActive: !1,
+  /**
+   * @member {boolean}
+   * @memberof PIXI.DisplayObject#
+   * @todo Needs docs.
+   */
+  _accessibleDiv: null,
+  /**
+   * Specify the type of div the accessible layer is. Screen readers treat the element differently
+   * depending on this type. Defaults to button.
+   * @member {string}
+   * @memberof PIXI.DisplayObject#
+   * @default 'button'
+   */
+  accessibleType: "button",
+  /**
+   * Specify the pointer-events the accessible div will use
+   * Defaults to auto.
+   * @member {string}
+   * @memberof PIXI.DisplayObject#
+   * @default 'auto'
+   */
+  accessiblePointerEvents: "auto",
+  /**
+   * Setting to false will prevent any children inside this container to
+   * be accessible. Defaults to true.
+   * @member {boolean}
+   * @memberof PIXI.DisplayObject#
+   * @default true
+   */
+  accessibleChildren: !0,
+  renderId: -1
+};
+exports.accessibleTarget = accessibleTarget;
+//# sourceMappingURL=accessibleTarget.js.map

package/lib/accessibleTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accessibleTarget.js","sources":["../src/accessibleTarget.ts"],"sourcesContent":["import type { DisplayObject } from '@pixi/display';\n\nexport type PointerEvents = 'auto'\n| 'none'\n| 'visiblePainted'\n| 'visibleFill'\n| 'visibleStroke'\n| 'visible'\n| 'painted'\n| 'fill'\n| 'stroke'\n| 'all'\n| 'inherit';\n\nexport interface IAccessibleTarget\n{\n    accessible: boolean;\n    accessibleTitle: string;\n    accessibleHint: string;\n    tabIndex: number;\n    _accessibleActive: boolean;\n    _accessibleDiv: IAccessibleHTMLElement;\n    accessibleType: string;\n    accessiblePointerEvents: PointerEvents;\n    accessibleChildren: boolean;\n    renderId: number;\n}\n\nexport interface IAccessibleHTMLElement extends HTMLElement\n{\n    type?: string;\n    displayObject?: DisplayObject;\n}\n\n/**\n * Default property values of accessible objects\n * used by {@link PIXI.AccessibilityManager}.\n * @private\n * @function accessibleTarget\n * @memberof PIXI\n * @type {object}\n * @example\n * import { accessibleTarget } from 'pixi.js';\n *\n * function MyObject() {}\n * Object.assign(MyObject.prototype, accessibleTarget);\n */\nexport const accessibleTarget: IAccessibleTarget = {\n    /**\n     *  Flag for if the object is accessible. If true AccessibilityManager will overlay a\n     *   shadow div with attributes set\n     * @member {boolean}\n     * @memberof PIXI.DisplayObject#\n     */\n    accessible: false,\n\n    /**\n     * Sets the title attribute of the shadow div\n     * If accessibleTitle AND accessibleHint has not been this will default to 'displayObject [tabIndex]'\n     * @member {?string}\n     * @memberof PIXI.DisplayObject#\n     */\n    accessibleTitle: null,\n\n    /**\n     * Sets the aria-label attribute of the shadow div\n     * @member {string}\n     * @memberof PIXI.DisplayObject#\n     */\n    accessibleHint: null,\n\n    /**\n     * @member {number}\n     * @memberof PIXI.DisplayObject#\n     * @private\n     * @todo Needs docs.\n     */\n    tabIndex: 0,\n\n    /**\n     * @member {boolean}\n     * @memberof PIXI.DisplayObject#\n     * @todo Needs docs.\n     */\n    _accessibleActive: false,\n\n    /**\n     * @member {boolean}\n     * @memberof PIXI.DisplayObject#\n     * @todo Needs docs.\n     */\n    _accessibleDiv: null,\n\n    /**\n     * Specify the type of div the accessible layer is. Screen readers treat the element differently\n     * depending on this type. Defaults to button.\n     * @member {string}\n     * @memberof PIXI.DisplayObject#\n     * @default 'button'\n     */\n    accessibleType: 'button',\n\n    /**\n     * Specify the pointer-events the accessible div will use\n     * Defaults to auto.\n     * @member {string}\n     * @memberof PIXI.DisplayObject#\n     * @default 'auto'\n     */\n    accessiblePointerEvents: 'auto',\n\n    /**\n     * Setting to false will prevent any children inside this container to\n     * be accessible. Defaults to true.\n     * @member {boolean}\n     * @memberof PIXI.DisplayObject#\n     * @default true\n     */\n    accessibleChildren: true,\n\n    renderId: -1,\n};\n"],"names":[],"mappings":";AA+CO,MAAM,mBAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO/C,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOjB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQhB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOV,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOnB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAShB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAShB,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASzB,oBAAoB;AAAA,EAEpB,UAAU;AACd;;"}

package/lib/accessibleTarget.mjs

@@ -0,0 +1,70 @@
+const accessibleTarget = {
+  /**
+   *  Flag for if the object is accessible. If true AccessibilityManager will overlay a
+   *   shadow div with attributes set
+   * @member {boolean}
+   * @memberof PIXI.DisplayObject#
+   */
+  accessible: !1,
+  /**
+   * Sets the title attribute of the shadow div
+   * If accessibleTitle AND accessibleHint has not been this will default to 'displayObject [tabIndex]'
+   * @member {?string}
+   * @memberof PIXI.DisplayObject#
+   */
+  accessibleTitle: null,
+  /**
+   * Sets the aria-label attribute of the shadow div
+   * @member {string}
+   * @memberof PIXI.DisplayObject#
+   */
+  accessibleHint: null,
+  /**
+   * @member {number}
+   * @memberof PIXI.DisplayObject#
+   * @private
+   * @todo Needs docs.
+   */
+  tabIndex: 0,
+  /**
+   * @member {boolean}
+   * @memberof PIXI.DisplayObject#
+   * @todo Needs docs.
+   */
+  _accessibleActive: !1,
+  /**
+   * @member {boolean}
+   * @memberof PIXI.DisplayObject#
+   * @todo Needs docs.
+   */
+  _accessibleDiv: null,
+  /**
+   * Specify the type of div the accessible layer is. Screen readers treat the element differently
+   * depending on this type. Defaults to button.
+   * @member {string}
+   * @memberof PIXI.DisplayObject#
+   * @default 'button'
+   */
+  accessibleType: "button",
+  /**
+   * Specify the pointer-events the accessible div will use
+   * Defaults to auto.
+   * @member {string}
+   * @memberof PIXI.DisplayObject#
+   * @default 'auto'
+   */
+  accessiblePointerEvents: "auto",
+  /**
+   * Setting to false will prevent any children inside this container to
+   * be accessible. Defaults to true.
+   * @member {boolean}
+   * @memberof PIXI.DisplayObject#
+   * @default true
+   */
+  accessibleChildren: !0,
+  renderId: -1
+};
+export {
+  accessibleTarget
+};
+//# sourceMappingURL=accessibleTarget.mjs.map

package/lib/accessibleTarget.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"accessibleTarget.mjs","sources":["../src/accessibleTarget.ts"],"sourcesContent":["import type { DisplayObject } from '@pixi/display';\n\nexport type PointerEvents = 'auto'\n| 'none'\n| 'visiblePainted'\n| 'visibleFill'\n| 'visibleStroke'\n| 'visible'\n| 'painted'\n| 'fill'\n| 'stroke'\n| 'all'\n| 'inherit';\n\nexport interface IAccessibleTarget\n{\n    accessible: boolean;\n    accessibleTitle: string;\n    accessibleHint: string;\n    tabIndex: number;\n    _accessibleActive: boolean;\n    _accessibleDiv: IAccessibleHTMLElement;\n    accessibleType: string;\n    accessiblePointerEvents: PointerEvents;\n    accessibleChildren: boolean;\n    renderId: number;\n}\n\nexport interface IAccessibleHTMLElement extends HTMLElement\n{\n    type?: string;\n    displayObject?: DisplayObject;\n}\n\n/**\n * Default property values of accessible objects\n * used by {@link PIXI.AccessibilityManager}.\n * @private\n * @function accessibleTarget\n * @memberof PIXI\n * @type {object}\n * @example\n * import { accessibleTarget } from 'pixi.js';\n *\n * function MyObject() {}\n * Object.assign(MyObject.prototype, accessibleTarget);\n */\nexport const accessibleTarget: IAccessibleTarget = {\n    /**\n     *  Flag for if the object is accessible. If true AccessibilityManager will overlay a\n     *   shadow div with attributes set\n     * @member {boolean}\n     * @memberof PIXI.DisplayObject#\n     */\n    accessible: false,\n\n    /**\n     * Sets the title attribute of the shadow div\n     * If accessibleTitle AND accessibleHint has not been this will default to 'displayObject [tabIndex]'\n     * @member {?string}\n     * @memberof PIXI.DisplayObject#\n     */\n    accessibleTitle: null,\n\n    /**\n     * Sets the aria-label attribute of the shadow div\n     * @member {string}\n     * @memberof PIXI.DisplayObject#\n     */\n    accessibleHint: null,\n\n    /**\n     * @member {number}\n     * @memberof PIXI.DisplayObject#\n     * @private\n     * @todo Needs docs.\n     */\n    tabIndex: 0,\n\n    /**\n     * @member {boolean}\n     * @memberof PIXI.DisplayObject#\n     * @todo Needs docs.\n     */\n    _accessibleActive: false,\n\n    /**\n     * @member {boolean}\n     * @memberof PIXI.DisplayObject#\n     * @todo Needs docs.\n     */\n    _accessibleDiv: null,\n\n    /**\n     * Specify the type of div the accessible layer is. Screen readers treat the element differently\n     * depending on this type. Defaults to button.\n     * @member {string}\n     * @memberof PIXI.DisplayObject#\n     * @default 'button'\n     */\n    accessibleType: 'button',\n\n    /**\n     * Specify the pointer-events the accessible div will use\n     * Defaults to auto.\n     * @member {string}\n     * @memberof PIXI.DisplayObject#\n     * @default 'auto'\n     */\n    accessiblePointerEvents: 'auto',\n\n    /**\n     * Setting to false will prevent any children inside this container to\n     * be accessible. Defaults to true.\n     * @member {boolean}\n     * @memberof PIXI.DisplayObject#\n     * @default true\n     */\n    accessibleChildren: true,\n\n    renderId: -1,\n};\n"],"names":[],"mappings":"AA+CO,MAAM,mBAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO/C,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOjB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQhB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOV,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOnB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAShB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAShB,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASzB,oBAAoB;AAAA,EAEpB,UAAU;AACd;"}

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="../global.d.ts" />
+export * from './AccessibilityManager';
+export * from './accessibleTarget';

package/lib/index.js

@@ -0,0 +1,49 @@
+"use strict";
+// ---------------------------------------------------------------------------
+// HarmonyOS / Node.js runtime adaptation
+//
+// AccessibilityManager operates on a real browser DOM (document.createElement,
+// document.body, navigator.userAgent, DOM event listeners). On Node.js /
+// HarmonyOS no browser DOM exists, so we bootstrap a real DOM implementation
+// (jsdom) into globalThis when `document` is missing. This is a genuine
+// runtime adaptation — the AccessibilityManager still creates and manipulates
+// real DOM elements — not a test-only mock.
+//
+// Globals are installed with Object.defineProperty because some of them
+// (e.g. navigator in newer Node.js) are getter-only properties and plain
+// assignment would throw in strict mode.
+// ---------------------------------------------------------------------------
+if (typeof globalThis.document === "undefined") {
+  try {
+    const { JSDOM } = require("jsdom");
+    const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>", {
+      url: "http://localhost/",
+      pretendToBeVisual: true,
+      userAgent: "Mozilla/5.0 (HarmonyOS; Node.js) AppleWebKit/537.36 jsdom"
+    });
+    const setGlobal = (name, value) => {
+      try {
+        Object.defineProperty(globalThis, name, {
+          value,
+          writable: true,
+          configurable: true,
+          enumerable: true
+        });
+      } catch (_e) {
+        // keep the existing global if it cannot be replaced
+      }
+    };
+    setGlobal("window", dom.window);
+    setGlobal("document", dom.window.document);
+    setGlobal("navigator", dom.window.navigator);
+    setGlobal("addEventListener", dom.window.addEventListener.bind(dom.window));
+    setGlobal("removeEventListener", dom.window.removeEventListener.bind(dom.window));
+  } catch (_e) {
+    // jsdom is not installed: preserve browser-only behaviour
+    // (document stays undefined, exactly as in the original package).
+  }
+}
+var AccessibilityManager = require("./AccessibilityManager.js"), accessibleTarget = require("./accessibleTarget.js");
+exports.AccessibilityManager = AccessibilityManager.AccessibilityManager;
+exports.accessibleTarget = accessibleTarget.accessibleTarget;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/lib/index.mjs

@@ -0,0 +1,53 @@
+// ---------------------------------------------------------------------------
+// HarmonyOS / Node.js runtime adaptation
+//
+// AccessibilityManager operates on a real browser DOM (document.createElement,
+// document.body, navigator.userAgent, DOM event listeners). On Node.js /
+// HarmonyOS no browser DOM exists, so we bootstrap a real DOM implementation
+// (jsdom) into globalThis when `document` is missing. This is a genuine
+// runtime adaptation — the AccessibilityManager still creates and manipulates
+// real DOM elements — not a test-only mock.
+//
+// Globals are installed with Object.defineProperty because some of them
+// (e.g. navigator in newer Node.js) are getter-only properties and plain
+// assignment would throw (ESM runs in strict mode).
+// ---------------------------------------------------------------------------
+import { createRequire } from "module";
+if (typeof globalThis.document === "undefined") {
+  try {
+    const require = createRequire(import.meta.url);
+    const { JSDOM } = require("jsdom");
+    const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>", {
+      url: "http://localhost/",
+      pretendToBeVisual: true,
+      userAgent: "Mozilla/5.0 (HarmonyOS; Node.js) AppleWebKit/537.36 jsdom"
+    });
+    const setGlobal = (name, value) => {
+      try {
+        Object.defineProperty(globalThis, name, {
+          value,
+          writable: true,
+          configurable: true,
+          enumerable: true
+        });
+      } catch (_e) {
+        // keep the existing global if it cannot be replaced
+      }
+    };
+    setGlobal("window", dom.window);
+    setGlobal("document", dom.window.document);
+    setGlobal("navigator", dom.window.navigator);
+    setGlobal("addEventListener", dom.window.addEventListener.bind(dom.window));
+    setGlobal("removeEventListener", dom.window.removeEventListener.bind(dom.window));
+  } catch (_e) {
+    // jsdom is not installed: preserve browser-only behaviour
+    // (document stays undefined, exactly as in the original package).
+  }
+}
+import { AccessibilityManager } from "./AccessibilityManager.mjs";
+import { accessibleTarget } from "./accessibleTarget.mjs";
+export {
+  AccessibilityManager,
+  accessibleTarget
+};
+//# sourceMappingURL=index.mjs.map

package/lib/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@ohos-ports/pixi-accessibility",
+  "version": "7.4.3-beta.1",
+  "main": "lib/index.js",
+  "module": "lib/index.mjs",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/index.d.ts",
+        "default": "./lib/index.mjs"
+      },
+      "require": {
+        "types": "./lib/index.d.ts",
+        "default": "./lib/index.js"
+      }
+    }
+  },
+  "description": "Accessibility Plugin for visually impaired users (HarmonyOS port of @pixi/accessibility@7.4.3 with jsdom DOM polyfill for openharmony)",
+  "author": "Mat Groves",
+  "contributors": [
+    "Matt Karl <matt@mattkarl.com>"
+  ],
+  "homepage": "http://pixijs.com/",
+  "bugs": "https://github.com/ohos-ports/ohos-ports/issues",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ohos-ports/ohos-ports.git",
+    "directory": "ports/pixi-accessibility/7.4.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "lib",
+    "*.d.ts"
+  ],
+  "peerDependencies": {
+    "@pixi/core": "7.4.3",
+    "@pixi/display": "7.4.3",
+    "@pixi/events": "7.4.3"
+  },
+  "dependencies": {
+    "jsdom": "^30.0.1"
+  },
+  "keywords": [
+    "openharmony",
+    "harmonyos",
+    "ohos-ports",
+    "pixi",
+    "accessibility"
+  ]
+}