Merge pull request #293 from akashic-games/support-tabindex

feat: add Platform#setTabindex()

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## 2.8.1
+* `Platform#setTabindex()` を追加
+* `InputHandler` の `view` の Element に `tabindex: 0` をデフォルトで付与するように
+  * これはバージョン 2.4.3 以前の挙動と同様となります。
+
 ## 2.8.0
 * @akashic/pdi-types@1.12.0 に追従
   * `PointerEvent` サポート環境において `PointMoveEvent#button`, `PointUpEvent#button` に対応

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akashic/pdi-browser",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "description": "An akashic-pdi implementation for Web browsers",
   "main": "index.js",
   "typings": "lib/full/index.d.ts",

src/ContainerController.ts

@@ -99,6 +99,10 @@ export class ContainerController {
 		}
 	}
 
+	setTabindex(tabindex: string): void {
+		this.inputHandlerLayer.setViewTabindex(tabindex);
+	}
+
 	private _loadView(): void {
 		const { primarySurfaceWidth: width, primarySurfaceHeight: height } = this._rendererReq;
 		// DocumentFragmentはinsertした時点で開放されているため毎回作る

src/InputHandlerLayer.ts

@@ -67,11 +67,17 @@ export class InputHandlerLayer {
 		view.style.height = size.height + "px";
 	}
 
+	setViewTabindex(tabindex: string): void {
+		const view = this.view;
+		view.setAttribute("tabindex", tabindex);
+	}
+
 	private _createInputView(width: number, height: number): HTMLDivElement {
 		const view = document.createElement("div");
 		view.setAttribute("style", "display:inline-block; outline:none;");
 		view.style.width = width + "px";
 		view.style.height = height + "px";
+		view.setAttribute("tabindex", "0");
 		return view;
 	}
 }

src/Platform.ts

@@ -181,6 +181,10 @@ export class Platform implements pdi.Platform {
 		return this._audioManager.getMasterVolume();
 	}
 
+	setTabindex(tabindex: string): void {
+		this.containerController.setTabindex(tabindex);
+	}
+
 	destroy(): void {
 		this.setRendererRequirement(undefined);
 		this.setMasterVolume(0);