Build Accessibility Tree from scene (#12074)

* Build Accessibility Tree from scene: 1) build DOM tree for static objects, and 2) (partially completed) make DOM nodes interactive for actionable nodes.

* Rename classes. (Remake)

* Enable HTML Twin building for GUI; enable dynamic update when scene change (node add/remove, enable/disable, control add/remove, visible/invisible)

* Create package for accessibility.

* Fix accessibility tree update for parent enable/disable.

* Use 'onControlRemovedObservable' and 'onControlAddedObservable' instead of 'onControlAddedOrRemovedObservable'

* Move AccessibilityTag to it's own file, and add onAccessibilityTagChangedObservable .

* Make accessibilityTag nullable.

* Move package from dev to tools.

* Remove isSalient in IAccessibilityTag.

* Add aria to IAccessibilityTag to allow override rendering accessibility behavior.

* Add README.md

* Add types restriction!

* Adjust renderer to take customized aria and event handler.

* Add ES6 and UMD packages.

# Conflicts:
#	package-lock.json

* Fix build error.

* Fix build error: remove redundant blank space.

* Fix build error: edit gitignore.

* Fix formatting.

* Fix lint error.

* Refine eventHandler interface.

* Refine from comment: click and right click -> triggerEvent().

* Fix comment and formating.

* Add example scenes to README.

* Fix comment: add pointer position to onPointerClick observer; dispose tree when scene is disposed.

* Fix comments.

* Fix comment

* Revert package-lock.json

* Revert package-lock.json again

* Fix some comments. Rename packages and classes.

* Fix formatting

* Fix README typos and fix formatting.

* Render html twin inside canvas.

* Some README typo fix that I missed two commits ago.

* [trivial] revert change.

* Revert package-lock.json, remove redundant comments.

* Make package-lock.json same as master branch.

* Update package-lock.json and format fix.

Co-authored-by: Sunny Zhang <[email protected]>

package.json

@@ -8,7 +8,7 @@
     },
     "devDependencies": {
         "@alex_neo/jest-expect-message": "~1.0.5",
-        "@dev/build-tools": "^1.0.0",
+        "@dev/build-tools": "file:packages/dev/buildTools",
         "@nrwl/cli": "^14.3.5",
         "@nrwl/tao": "^14.3.5",
         "@nrwl/workspace": "^14.3.5",
@@ -58,8 +58,8 @@
         "build:lts": "npm run build:assets && npm run build:source:lts",
         "build:source": "tsc -b ./tsconfig.devpackages.json",
         "build:source:lts": "npx nx run-many --target=compile --projects=@lts/core,@lts/gui,@lts/loaders,@lts/materials,@lts/post-processes,@lts/procedural-textures,@lts/serializers --parallel=1",
-        "build:umd": "nx run-many --target=build --parallel=3 --projects=babylonjs,babylonjs-gui,babylonjs-inspector,babylonjs-loaders,babylonjs-materials,babylonjs-serializers,babylonjs-post-process,babylonjs-procedural-textures,babylonjs-node-editor,babylonjs-gui-editor,babylonjs-ktx2decoder,babylonjs-viewer-assets,babylonjs-viewer",
-        "build:es6": "nx run-many --target=build --parallel=3 --projects=core,gui,loaders,materials,serializers,post-processes,procedural-textures,node-editor,inspector,gui-editor,viewer,shared-ui-components",
+        "build:umd": "nx run-many --target=build --parallel=3 --projects=babylonjs,babylonjs-gui,babylonjs-inspector,babylonjs-loaders,babylonjs-materials,babylonjs-serializers,babylonjs-post-process,babylonjs-procedural-textures,babylonjs-node-editor,babylonjs-gui-editor,babylonjs-ktx2decoder,babylonjs-viewer-assets,babylonjs-viewer,babylonjs-accessibility",
+        "build:es6": "nx run-many --target=build --parallel=3 --projects=core,gui,loaders,materials,serializers,post-processes,procedural-textures,node-editor,inspector,gui-editor,viewer,shared-ui-components,accessibility",
         "watch:shaders": "build-tools -c build-shaders --global --watch",
         "watch:assets": "build-tools -c pa --global --watch",
         "watch:source:dev": "tsc -b ./tsconfig.devpackages.json -w",

packages/dev/buildTools/src/packageMapping.ts

@@ -15,6 +15,7 @@ export type DevPackageName =
     | "procedural-textures"
     | "node-editor"
     | "gui-editor"
+    | "accessibility"
     | "viewer"
     | "ktx2decoder"
     | "shared-ui-components"
@@ -29,6 +30,7 @@ export type UMDPackageName =
     | "babylonjs-inspector"
     | "babylonjs-node-editor"
     | "babylonjs-gui-editor"
+    | "babylonjs-accessibility"
     | "babylonjs-viewer"
     | "babylonjs-post-process"
     | "babylonjs-ktx2decoder"
@@ -44,6 +46,7 @@ export type NamespacePackageName =
     | "BABYLON.Debug"
     | "BABYLON.NodeEditor"
     | "BABYLON.GuiEditor"
+    | "BABYLON.Accessibility"
     | "INSPECTOR"
     | "BabylonViewer"
     | "KTX2DECODER"
@@ -61,6 +64,7 @@ export type ES6PackageName =
     | "@babylonjs/inspector"
     | "@babylonjs/node-editor"
     | "@babylonjs/gui-editor"
+    | "@babylonjs/accessibility"
     | "@babylonjs/post-processes"
     | "@babylonjs/viewer"
     | "@babylonjs/ktx2decoder"
@@ -105,6 +109,10 @@ export const umdPackageMapping: { [key in UMDPackageName]: { baseDir: string; ba
         baseDir: "guiEditor",
         baseFilename: "babylon.guiEditor",
     },
+    "babylonjs-accessibility": {
+        baseDir: "accessibility",
+        baseFilename: "babylon.accessibility",
+    },
     "babylonjs-post-process": {
         baseDir: "postProcessesLibrary",
         baseFilename: "babylonjs.postProcess",
@@ -158,6 +166,7 @@ const packageMapping: {
             // }
             return "babylonjs-gui-editor";
         },
+        accessibility: "babylonjs-accessibility",
         "post-processes": "babylonjs-post-process",
         "procedural-textures": "babylonjs-procedural-textures",
         ktx2decoder: "babylonjs-ktx2decoder",
@@ -174,6 +183,7 @@ const packageMapping: {
         inspector: "@babylonjs/inspector",
         "node-editor": "@babylonjs/node-editor",
         "gui-editor": "@babylonjs/gui-editor",
+        accessibility: "@babylonjs/accessibility",
         "post-processes": "@babylonjs/post-processes",
         "procedural-textures": "@babylonjs/procedural-textures",
         ktx2decoder: "@babylonjs/ktx2decoder",
@@ -190,6 +200,7 @@ const packageMapping: {
         inspector: "@babylonjs/esm",
         "node-editor": "@babylonjs/esm",
         "gui-editor": "@babylonjs/esm",
+        accessibility: "@babylonjs/accessibility",
         "post-processes": "@babylonjs/esm",
         "procedural-textures": "@babylonjs/esm",
         ktx2decoder: "@babylonjs/esm",
@@ -268,6 +279,7 @@ const packageMapping: {
             }
             return "BABYLON";
         },
+        accessibility: "BABYLON.Accessibility",
         "post-processes": "BABYLON",
         "procedural-textures": "BABYLON",
         ktx2decoder: "KTX2DECODER",