@needle-tools/engine 4.14.0-next.b2e3b1a → 4.15.0-next.cecd8e7

package/src/engine/engine_context.ts

@@ -15,6 +15,7 @@ import { nodeFrame } from "three/examples/jsm/renderers/webgl-legacy/nodes/WebGL
 
 import { initSpectorIfAvailable } from './debug/debug_spector.js';
 import { isDevEnvironment, LogType, showBalloonError, showBalloonMessage } from './debug/index.js';
+import { AccessibilityManager } from './engine_accessibility.js';
 import { Addressables } from './engine_addressables.js';
 import { AnimationsRegistry } from './engine_animation.js';
 import { Application } from './engine_application.js';
@@ -522,6 +523,8 @@ export class Context implements IContext {
 	/** Access the needle menu to add or remove buttons to the menu element */
 	readonly menu: NeedleMenu;
 
+	readonly accessibility: AccessibilityManager;
+
 	/** 
 	 * Checks if the context is fully created and ready
 	 * @returns true if the context is fully created and ready 
@@ -571,6 +574,7 @@ export class Context implements IContext {
 		this.menu = new NeedleMenu(this);
 		this.lodsManager = new LODsManager(this);
 		this.animations = new AnimationsRegistry(this);
+		this.accessibility = new AccessibilityManager(this);
 
 
 		const resizeCallback = () => this._needsUpdateSize = true;
@@ -614,6 +618,9 @@ export class Context implements IContext {
 
 		this.renderer = new WebGLRenderer(params);
 
+		this.renderer.domElement.setAttribute("aria-label", "3D rendering");
+		this.renderer.domElement.setAttribute("role", "img");
+
 		this.renderer.debug.checkShaderErrors = isDevEnvironment() || getParam("checkshadererrors") === true;
 
 		// some tonemapping other than "NONE" is required for adjusting exposure with EXR environments
@@ -753,34 +760,8 @@ export class Context implements IContext {
 		}
 	}
 
-	/**
-	 * Registers all uninitialized components found in the scene hierarchy with this context.
-	 * Components that have been added to objects (e.g. via `addComponent`) but are not yet registered
-	 * with a context will be collected and queued for initialization.
-	 * On the next frame, these components will go through the full lifecycle: `awake` → `onEnable` → `start` → `update`.
-	 *
-	 * This is useful when components are created outside of the normal glTF loading pipeline,
-	 * for example in an editor that adds components during edit mode and then needs to activate them for play mode.
-	 * @param root The root object to search for components. Defaults to the context's scene.
-	 * @returns The number of components that were newly registered.
-	 */
-	registerSceneComponents(root?: Object3D): number {
-		const searchRoot = root ?? this.scene;
-		if (!searchRoot) return 0;
-		let count = 0;
-		foreachComponent(searchRoot, (comp) => {
-			// Skip components that are already registered with this context
-			if (this.scripts.includes(comp)) return;
-			if (this.new_scripts.includes(comp)) return;
-			if (this.new_script_start.includes(comp)) return;
-			this.new_scripts.push(comp);
-			count++;
-		}, true);
-		return count;
-	}
-
-	/** This will recreate the whole needle engine context and dispose the whole scene content
-	 * All content will be reloaded (loading times might be faster due to browser caches)
+	/** This will recreate the whole needle engine context and dispose the whole scene content  
+	 * All content will be reloaded (loading times might be faster due to browser caches)   
 	 * All scripts will be recreated */
 	recreate() {
 		this.clear();
@@ -836,6 +817,7 @@ export class Context implements IContext {
 		this.lightmaps?.clear();
 		this.physics?.engine?.clearCaches();
 		this.lodsManager.disable();
+		this.accessibility?.clear();
 
 		this._onBeforeRenderListeners.clear();
 		this._onAfterRenderListeners.clear();
@@ -857,6 +839,7 @@ export class Context implements IContext {
 	 */
 	dispose() {
 		this.internalOnDestroy();
+		this.accessibility.dispose();
 	}
 
 	/**@deprecated use dispose()  */

package/src/engine/engine_gltf_builtin_components.ts

@@ -113,20 +113,6 @@ export async function createBuiltinComponents(context: Context, gltfId: SourceId
             }
         }
     });
-
-    // Batch-register all components that were created above with the context.
-    // This uses the same codepath as Context.registerSceneComponents() which is also used
-    // by editors to activate components that were added outside the glTF pipeline.
-    if (gltf.scenes) {
-        for (const scene of gltf.scenes) {
-            context.registerSceneComponents(scene);
-        }
-    }
-    if (gltf.children) {
-        for (const ch of gltf.children) {
-            context.registerSceneComponents(ch);
-        }
-    }
 }
 
 declare type IHasResolveGuids = {
@@ -250,10 +236,8 @@ async function onCreateBuiltinComponents(context: SerializationContext, obj: Obj
                         // Object.assign(instance, compData);
                         // dont call awake here because some references might not be resolved yet and components that access those fields in awake will throw
                         // for example Duplicatable reference to object might still be { node: id }
-                        // dont register here - components are batch-registered via context.registerSceneComponents below
                         const callAwake = false;
-                        const register = false;
-                        addNewComponent(obj, instance, callAwake, register);
+                        addNewComponent(obj, instance, callAwake);
                         deserialize.push({ instance, compData, obj });
 
                         // if the component instance is a camera and we dont have a main camera yet

package/src/engine/engine_materialpropertyblock.ts

@@ -122,17 +122,26 @@ class PropertyBlockRegistry {
 const registry = new PropertyBlockRegistry();
 
 /**
- * MaterialPropertyBlock allows per-object material property overrides without creating new material instances.  
- * This is useful for rendering multiple objects with the same base material but different properties  
- * (e.g., different colors, textures, or shader parameters).  
+ * MaterialPropertyBlock allows per-object material property overrides without creating new material instances.
+ * This is useful for rendering multiple objects with the same base material but different properties
+ * (e.g., different colors, textures, or shader parameters).
  *
- * The property block system works by:  
+ * ## How Property Blocks Work
+ *
+ * **Important**: Overrides are registered on the **Object3D**, not on the material.
+ * This means:
+ * - If you change the object's material, the overrides will still be applied to the new material
+ * - Multiple objects can share the same material but have different property overrides
+ * - If you don't want overrides applied after changing a material, you must remove them using {@link removeOveride}, {@link clearAllOverrides}, or {@link dispose}
+ *
+ * The property block system works by:
  * - Temporarily applying overrides in onBeforeRender
  * - Restoring original values in onAfterRender
  * - Managing shader defines and program cache keys for correct shader compilation
  * - Supporting texture coordinate transforms per object
  *
- * Common use cases:
+ * ## Common Use Cases
+ *
  * - **Lightmaps**: Apply unique lightmap textures to individual objects sharing the same material
  * - **Reflection Probes**: Apply different environment maps per object for localized reflections
  * - **See-through effects**: Temporarily override transparency/transmission properties for X-ray effects
@@ -170,6 +179,26 @@ const registry = new PropertyBlockRegistry();
  * block.setDefine("USE_CUSTOM_FEATURE", 1);
  * ```
  *
+ * @example Material swapping behavior
+ * ```typescript
+ * const mesh = new Mesh(geometry, materialA);
+ * const block = MaterialPropertyBlock.get(mesh);
+ * block.setOverride("color", new Color(1, 0, 0));
+ *
+ * // The color override is red for materialA
+ *
+ * // Swap the material - overrides persist and apply to the new material!
+ * mesh.material = materialB;
+ * // The color override is now red for materialB too
+ *
+ * // If you don't want overrides on the new material, remove them:
+ * block.clearAllOverrides(); // Remove all overrides
+ * // or
+ * block.removeOveride("color"); // Remove specific override
+ * // or
+ * block.dispose(); // Remove the entire property block
+ * ```
+ *
  * @example Lightmap usage
  * ```typescript
  * const block = MaterialPropertyBlock.get(mesh);
@@ -317,8 +346,25 @@ export class MaterialPropertyBlock<T extends Material = Material> {
     }
 
     /**
-     * Removes a specific property override
-     * @param name The property name to clear
+     * Removes a specific property override.
+     * After removal, the material will use its original property value for this property.
+     *
+     * @param name The property name to remove the override for
+     *
+     * @example
+     * ```typescript
+     * const block = MaterialPropertyBlock.get(mesh);
+     *
+     * // Set some overrides
+     * block.setOverride("color", new Color(1, 0, 0));
+     * block.setOverride("roughness", 0.5);
+     * block.setOverride("lightMap", lightmapTexture);
+     *
+     * // Remove a specific override - the material will now use its original color
+     * block.removeOveride("color");
+     *
+     * // Other overrides (roughness, lightMap) remain active
+     * ```
      */
     removeOveride<K extends NonFunctionPropertyNames<T>>(name: K | ({} & string)): void {
         const index = this._overrides.findIndex(o => o.name === name);
@@ -328,7 +374,47 @@ export class MaterialPropertyBlock<T extends Material = Material> {
     }
 
     /**
-     * Removes all property overrides from this block
+     * Removes all property overrides from this block.
+     * After calling this, the material will use its original values for all properties.
+     *
+     * **Note**: This does NOT remove shader defines. Use {@link clearDefine} or {@link dispose} for that.
+     *
+     * @example Remove all overrides but keep the property block
+     * ```typescript
+     * const block = MaterialPropertyBlock.get(mesh);
+     *
+     * // Set multiple overrides
+     * block.setOverride("color", new Color(1, 0, 0));
+     * block.setOverride("roughness", 0.5);
+     * block.setOverride("lightMap", lightmapTexture);
+     *
+     * // Later, remove all overrides at once
+     * block.clearAllOverrides();
+     *
+     * // The material now uses its original values
+     * // The property block still exists and can be reused with new overrides
+     * ```
+     *
+     * @example Temporarily disable all overrides
+     * ```typescript
+     * const block = MaterialPropertyBlock.get(mesh);
+     *
+     * // Save current overrides if you want to restore them later
+     * const savedOverrides = [...block.overrides];
+     *
+     * // Clear all overrides temporarily
+     * block.clearAllOverrides();
+     *
+     * // Do some rendering without overrides...
+     *
+     * // Restore overrides
+     * savedOverrides.forEach(override => {
+     *   block.setOverride(override.name, override.value, override.textureTransform);
+     * });
+     * ```
+     *
+     * @see {@link removeOveride} - To remove a single override
+     * @see {@link dispose} - To completely remove the property block and clean up resources
      */
     clearAllOverrides(): void {
         this._overrides = [];
@@ -797,11 +883,11 @@ function attachPropertyBlockToObject(object: Object3D, _propertyBlock: MaterialP
     if (object.type === "Group") {
         object.children.forEach(child => {
             if (child.type === "Mesh" || child.type === "SkinnedMesh") {
-                attachCallbacksToMesh(child, object);
+                attachCallbacksToMesh(child, object, _propertyBlock);
             }
         });
     } else if (object.type === "Mesh" || object.type === "SkinnedMesh") {
-        attachCallbacksToMesh(object, object);
+        attachCallbacksToMesh(object, object, _propertyBlock);
     }
 }
 /**
@@ -811,7 +897,7 @@ function attachPropertyBlockToObject(object: Object3D, _propertyBlock: MaterialP
  * @param propertyBlockOwner The object that owns the property block (may be the mesh itself or its parent Group)
  * @internal
  */
-function attachCallbacksToMesh(mesh: Object3D, propertyBlockOwner: Object3D): void {
+function attachCallbacksToMesh(mesh: Object3D, propertyBlockOwner: Object3D, _propertyBlock: MaterialPropertyBlock): void {
     // Check if this specific mesh already has our callbacks attached for this property block owner
     if (registry.isHooked(mesh, propertyBlockOwner)) {
         // Already hooked for this property block owner
@@ -820,6 +906,11 @@ function attachCallbacksToMesh(mesh: Object3D, propertyBlockOwner: Object3D): vo
 
     registry.addHook(mesh, propertyBlockOwner);
 
+    /**
+     * Expose the property block for e.g. Needle Inspector
+     */
+    mesh["needle:materialPropertyBlock"] = _propertyBlock;
+
     if (!mesh.onBeforeRender) {
         mesh.onBeforeRender = onBeforeRender_MaterialBlock;
     } else {

package/src/engine/engine_math.ts

@@ -254,7 +254,40 @@ class LowPassFilter {
 }
 
 /**
- * OneEuroFilter is a simple low-pass filter for noisy signals. It uses a one-euro filter to smooth the signal.
+ * [OneEuroFilter](https://engine.needle.tools/docs/api/OneEuroFilter) is a low-pass filter designed to reduce jitter in noisy signals while maintaining low latency.
+ * It's particularly useful for smoothing tracking data from XR controllers, hand tracking, or other input devices where the signal contains noise but responsiveness is important.
+ *
+ * The filter automatically adapts its smoothing strength based on the signal's velocity:
+ * - When the signal moves slowly, it applies strong smoothing to reduce jitter
+ * - When the signal moves quickly, it reduces smoothing to maintain responsiveness
+ *
+ * Based on the research paper: [1€ Filter: A Simple Speed-based Low-pass Filter for Noisy Input](http://cristal.univ-lille.fr/~casiez/1euro/)
+ *
+ * @example Basic usage with timestamp
+ * ```ts
+ * const filter = new OneEuroFilter(120, 1.0, 0.0);
+ *
+ * // In your update loop:
+ * const smoothedValue = filter.filter(noisyValue, this.context.time.time);
+ * ```
+ *
+ * @example Without timestamps (using frequency estimate)
+ * ```ts
+ * // Assuming 60 FPS update rate
+ * const filter = new OneEuroFilter(60, 1.0, 0.5);
+ *
+ * // Call without timestamp - uses the frequency estimate
+ * const smoothedValue = filter.filter(noisyValue);
+ * ```
+ *
+ * @example Smoothing 3D positions
+ * ```ts
+ * const posFilter = new OneEuroFilterXYZ(90, 0.5, 0.0);
+ *
+ * posFilter.filter(trackedPosition, smoothedPosition, this.context.time.time);
+ * ```
+ *
+ * @see {@link OneEuroFilterXYZ} for filtering 3D vectors
  */
 export class OneEuroFilter {
     /**

package/src/engine/engine_networking.ts

@@ -1,5 +1,5 @@
 const defaultNetworkingBackendUrlProvider = "https://urls.needle.tools/default-networking-backend/index";
-let networkingServerUrl: string | undefined = "wss://networking.needle.tools/socket";
+let networkingServerUrl: string | undefined = "wss://networking-2.needle.tools/socket";
 
 import * as flatbuffers from 'flatbuffers';
 import { type Websocket } from 'websocket-ts';

package/src/engine/engine_types.ts

@@ -164,10 +164,15 @@ export interface IHasGuid {
     guid: string;
 }
 
+// DO NOT CHANGE THE SYMBOL NAME
+export const $componentName = Symbol("component-name");
+
 // TODO: we might want to separate the IComponent and IBehaviour where the Behaviour is the one with custom methods and the component only has e.g. the gameobject reference
 export interface IComponent extends IHasGuid {
     get isComponent(): boolean;
 
+    get [$componentName](): string | undefined;
+
     /** the object this component is attached to */
     gameObject: IGameObject;
     // guid: string;

package/src/engine/webcomponents/icons.ts

@@ -17,6 +17,9 @@ export function getIconElement(str: string): HTMLElement {
     span.innerText = str;
     span.style.visibility = "hidden";
     span.style.userSelect = "none";
+    span.setAttribute("role", "img");
+    span.setAttribute("aria-label", str + " icon");
+    span.setAttribute("aria-hidden", "true");
     fontReady(fontname).then(res => {
         if (res) span.style.visibility = "";
         else {

package/src/engine/webcomponents/logo-element.ts

@@ -84,8 +84,11 @@ export class NeedleLogoElement extends HTMLElement {
             globalThis.open("https://needle.tools", "_blank");
         });
 
-        // set title
+    }
+
+    connectedCallback() {
         this.wrapper.setAttribute("title", "Made with Needle Engine");
+        this.setAttribute("aria-label", "Needle Engine logo. Click to open the Needle Engine website.");
     }
 
     private readonly _root: ShadowRoot;

package/src/engine/webcomponents/needle-button.ts

@@ -13,32 +13,58 @@ const htmlTagName = "needle-button";
 const isDev = isDevEnvironment();
 
 /**
- * A <needle-button> can be used to simply add VR, AR or Quicklook buttons to your website without having to write any code.  
- * @example
+ * [&lt;needle-button&gt;](https://engine.needle.tools/docs/api/NeedleButtonElement) is a web component for easily adding AR, VR, Quicklook, or QR code buttons to your website without writing JavaScript code.
+ *
+ * The button automatically handles session management and displays appropriate UI based on device capabilities.
+ * It comes with default styling (glassmorphism design) but can be fully customized with CSS.
+ *
+ * **Supported button types:**
+ * - `ar` - WebXR AR session button
+ * - `vr` - WebXR VR session button
+ * - `quicklook` - Apple AR Quick Look button (iOS only)
+ * - `qrcode` - QR code sharing button
+ *
+ * @example Basic AR/VR buttons
  * ```html
+ * <needle-engine src="scene.glb"></needle-engine>
  * <needle-button ar></needle-button>
  * <needle-button vr></needle-button>
  * <needle-button quicklook></needle-button>
  * ```
- * 
- * @example custom label
+ *
+ * @example Custom button labels
  * ```html
- * <needle-button ar>Start AR</needle-button>
- * <needle-button vr>Start VR</needle-button>
+ * <needle-button ar>Start AR Experience</needle-button>
+ * <needle-button vr>Enter VR Mode</needle-button>
  * <needle-button quicklook>View in AR</needle-button>
  * ```
- * 
- * @example custom styling
+ *
+ * @example Custom styling
  * ```html
- * <!-- You can either style the element directly or use a CSS stylesheet -->
  * <style>
- * needle-button {
- *    background-color: red;
- *   color: white;
- * }
+ *   needle-button {
+ *     background-color: #ff6b6b;
+ *     color: white;
+ *     border-radius: 8px;
+ *     padding: 1rem 2rem;
+ *   }
+ *   needle-button:hover {
+ *     background-color: #ff5252;
+ *   }
  * </style>
  * <needle-button ar>Start AR</needle-button>
  * ```
+ *
+ * @example Unstyled button (for complete custom styling)
+ * ```html
+ * <needle-button ar unstyled>
+ *   <span class="my-icon">🥽</span>
+ *   Launch AR
+ * </needle-button>
+ * ```
+ *
+ * @see {@link NeedleEngineWebComponent} for the main &lt;needle-engine&gt; element
+ * @see {@link NeedleMenu} for the built-in menu component that can display similar buttons
  */
 export class NeedleButtonElement extends HTMLElement {
 
@@ -73,18 +99,22 @@ export class NeedleButtonElement extends HTMLElement {
         if (this.getAttribute("ar") != null) {
             this.#webxrfactory ??= new WebXRButtonFactory()
             this.#button = this.#webxrfactory.createARButton();
+            this.setAttribute("aria-label", "Enter augmented reality mode");
         }
         else if (this.getAttribute("vr") != null) {
             this.#webxrfactory ??= new WebXRButtonFactory()
             this.#button = this.#webxrfactory.createVRButton();
+            this.setAttribute("aria-label", "Enter virtual reality mode");
         }
         else if (this.getAttribute("quicklook") != null) {
             this.#webxrfactory ??= new WebXRButtonFactory()
             this.#button = this.#webxrfactory.createQuicklookButton();
+            this.setAttribute("aria-label", "View in AR with Apple Quick Look");
         }
         else if (this.getAttribute("qrcode") != null) {
             this.#buttonfactory ??= new ButtonsFactory();
             this.#button = this.#buttonfactory.createQRCode({ anchorElement: this });
+            this.setAttribute("aria-label", "Share application with QR code");
         }
         else {
             if (isDev) {
@@ -93,6 +123,7 @@ export class NeedleButtonElement extends HTMLElement {
             else {
                 console.debug("No button type specified for <needle-button>. Use either ar, vr or quicklook attribute.")
             }
+            this.setAttribute("aria-label", "Needle Button with no specified type");
             return;
         }
 

package/src/engine/webcomponents/needle-engine.ts

@@ -87,17 +87,25 @@ const observedAttributes = [
 
 // https://developers.google.com/web/fundamentals/web-components/customelements
 
-/** 
- * The `<needle-engine>` web component. See {@link NeedleEngineAttributes} attributes for supported attributes    
- * The web component creates and manages a Needle Engine context, which is responsible for rendering a 3D scene using threejs.   
- * The context is created when the `src` attribute is set, and disposed when the element is removed from the DOM. You can prevent cleanup by setting the `keep-alive` attribute to `true`.  
+/**
+ * The `<needle-engine>` web component. See {@link NeedleEngineAttributes} attributes for supported attributes
+ * The web component creates and manages a Needle Engine context, which is responsible for rendering a 3D scene using threejs.
+ * The context is created when the `src` attribute is set, and disposed when the element is removed from the DOM. You can prevent cleanup by setting the `keep-alive` attribute to `true`.
  * The context is accessible from the `<needle-engine>` element: `document.querySelector("needle-engine").context`.
  * See {@link https://engine.needle.tools/docs/reference/needle-engine-attributes}
  *
- * @example
+ * @example Basic usage
+ * ```html
  * <needle-engine src="https://example.com/scene.glb"></needle-engine>
- * @example
+ * ```
+ *
+ * @example With camera controls disabled
+ * ```html
  * <needle-engine src="https://example.com/scene.glb" camera-controls="false"></needle-engine>
+ * ```
+ *
+ * @see {@link NeedleButtonElement} for adding AR/VR/Quicklook buttons via &lt;needle-button&gt;
+ * @see {@link NeedleMenu} for the built-in menu configuration component
  */
 export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngineComponent {
 
@@ -176,7 +184,9 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
 
         ensureFonts();
 
-        this.attachShadow({ mode: 'open' });
+        this.attachShadow({ mode: 'open', delegatesFocus: true });
+        this.setAttribute("role", "application");
+        this.setAttribute("aria-label", "Needle Engine 3D scene");
         const template = document.createElement('template');
         // #region CSS
         template.innerHTML = `<style>
@@ -282,6 +292,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
         if (this.getAttribute("tabindex") === null || this.getAttribute("tabindex") === undefined)
             this.setAttribute("tabindex", "0");
 
+
         this.addEventListener("xr-session-started", this.onXRSessionStarted);
         this.onSetupDesktop();
 

package/src/engine-components/Component.ts

@@ -10,7 +10,7 @@ import * as main from "../engine/engine_mainloop_utils.js";
 import { syncDestroy, syncInstantiate, SyncInstantiateOptions } from "../engine/engine_networking_instantiate.js";
 import { Context, FrameEvent } from "../engine/engine_setup.js";
 import * as threeutils from "../engine/engine_three_utils.js";
-import type { Collision, ComponentInit, Constructor, ConstructorConcrete, GuidsMap, ICollider, IComponent, IGameObject, SourceIdentifier } from "../engine/engine_types.js";
+import { $componentName, type Collision, type ComponentInit, type Constructor, type ConstructorConcrete, type GuidsMap, type ICollider, type IComponent, type IGameObject, type SourceIdentifier } from "../engine/engine_types.js";
 import { TypeStore } from "../engine/engine_typestore.js";
 import type { INeedleXRSessionEventReceiver, NeedleXRControllerEventArgs, NeedleXREventArgs } from "../engine/engine_xr.js";
 import { type IPointerEventHandler, PointerEventData } from "./ui/PointerEvents.js";
@@ -542,8 +542,6 @@ export abstract class GameObject extends Object3D implements Object3D, IGameObje
     }
 }
 
-// DO NOT CHANGE THE SYMBOL NAME
-const $componentName = Symbol("component-name");
 
 /** 
  * Needle Engine component's are the main building blocks of the Needle Engine.    

package/src/engine-components/DragControls.ts

@@ -193,7 +193,7 @@ export class DragControls extends Behaviour implements IPointerEventHandler {
             }
         }
     }
-    
+
     private _rigidbody: Rigidbody | null = null;
 
     // future:
@@ -235,12 +235,22 @@ export class DragControls extends Behaviour implements IPointerEventHandler {
     /** @internal */
     onEnable(): void {
         DragControls._instances.push(this);
+        this.context.accessibility.updateElement(this, {
+            role: "button",
+            label: "Drag " + (this.gameObject.name || "object"),
+            hidden: false,
+        });
     }
     /** @internal */
     onDisable(): void {
+        this.context.accessibility.updateElement(this, { hidden: true });
         DragControls._instances = DragControls._instances.filter(i => i !== this);
     }
 
+    onDestroy(): void {
+        this.context.accessibility.removeElement(this);
+    }
+
     /**
      * Checks if editing is allowed for the current networking connection.
      * @param _obj Optional object to check edit permissions for
@@ -268,6 +278,8 @@ export class DragControls extends Behaviour implements IPointerEventHandler {
         if (!dc || dc !== this) return;
         DragControls.lastHovered = evt.object;
         this.context.domElement.style.cursor = 'pointer';
+
+        this.context.accessibility.hover(this, `Draggable ${evt.object?.name}`);
     }
 
     /** 
@@ -339,6 +351,14 @@ export class DragControls extends Behaviour implements IPointerEventHandler {
             }
 
             args.use();
+
+            this.context.accessibility.updateElement(this, {
+                role: "button",
+                label: "Dragging " + (this.gameObject.name || "object"),
+                hidden: false,
+                busy: true,
+            });
+            this.context.accessibility.focus(this);
         }
     }
 
@@ -375,6 +395,11 @@ export class DragControls extends Behaviour implements IPointerEventHandler {
             }
             args.use();
         }
+
+        this.context.accessibility.unfocus(this);
+        this.context.accessibility.updateElement(this, {
+            busy: false,
+        });
     }
 
     /**
@@ -779,12 +804,12 @@ class DragPointerHandler implements IDragHandler {
      * Used for determining if enough motion has occurred to start a drag.
      */
     getTotalMovement(): Vector3 { return this._totalMovement; }
-    
+
     /** 
      * Returns the object that follows the pointer during dragging operations.
      */
     get followObject(): GameObject { return this._followObject; }
-    
+
     /**
      * Returns the point where the pointer initially hit the object in local space.
      */
@@ -1377,7 +1402,7 @@ class LegacyDragVisualsHelper {
 
     /** Controls whether visual helpers like lines and markers are displayed */
     showGizmo: boolean = true;
-    
+
     /** When true, drag plane alignment changes based on view angle */
     useViewAngle: boolean = true;