如何默认为谷歌的模型查看器启用键盘控制？

Question

为了便于访问，我试图允许箭头键在海报被丢弃的那一刻控制我的模型查看器的相机轨道。到目前为止，我似乎可以用箭头键控制相机，但前提是我必须与模型查看器进行第二次交互(即，我单击以关闭海报，然后在至少单击一次3D模型之前无法操作相机(。这对于可访问性来说是一种糟糕的形式。

有没有一种方法可以强制模型查看器接受键盘输入，而不需要至少点击/触摸一次3D模型？到目前为止，我已经尝试过：

1. 在我的模型查看器元素、其中的.userInputdiv以及其中的画布元素上使用focus();函数
2. 将每个选项卡的索引设置为1，但没有成功
3. 在我的元素上使用delegateFocus
4. 使用模型查看器本机的enableInteraction();函数
5. 通过this.addEventListener('keydown', this[$modelViewer].value?.onKeyDown);在海报被驳回时添加事件监听器

我已经验证了这些元素是以正确的方式操作/附加的，所以使用焦点和选项卡索引似乎并不能让模型查看器首先进行键盘输入。

如何在海报被撤掉并加载3D模型的那一刻强制模型查看器接受键盘输入？

Answer 1

您应该能够在.userInputdiv上调用.focus()，棘手的是<model-viewer>创建了一个Shadow DOM。shadow DOM的目的是封装其子组件，因此您不能像在常规DOM中那样按类获取元素。

相反，我必须首先访问shadowRoot，然后在里面查找正确的<div>。例如，我可以在https://modelviewer.dev/，每当您单击外部文档上的任何位置时，它都会聚焦.userInputdiv。它使用了一些选择技巧，您可能需要针对自己的用例进行修改：

window.addEventListener("click", (evt) => {
console.log("Focusing...");
document.getElementsByTagName("model-viewer")[0].shadowRoot.children[1].getElementsByClassName("userInput")[0].focus();
});

我想，由于您完全可以控制<model-viewer>，您可能可以在load事件上使用这种聚焦方法。

更新：

我刚刚读到，您希望在单击以忽略海报时将键盘焦点放在它上，这样您就可以使用"click"事件而不是加载事件。