使用网络应用程序访问Google登录按钮

Question

我正在将Google Sign-in与我的网络应用集成，它会根据我提供gapi.signin2.render()功能的ID自动呈现一个按钮。我担心的是所有文档都使用<div>作为按钮的包含元素，因此用户必须使用鼠标单击按钮，而不是选择Tab键到元素并以这种方式激活它。即使在render()调用之后，容器也只包含<div>，<span>和<svg>元素的混合，因此用户无需选择任何内容。

Google提供有关building a custom sign-in button的文档，但即便如此，也会使用如下标记：

<div id="gSignInWrapper">
  <span class="label">Sign in with:</span>
  <div id="customBtn" class="customGPlusSignIn">
    <span class="icon"></span>
    <span class="buttonText">Google</span>
  </div>
</div>

如果我尝试使用<button>或<a>作为容器，我不能在关注元素时使用回车键来调用按钮上的事件处理程序。

如何为不使用鼠标的用户设置Google登录按钮？

Answer 1

在官方Google产品论坛上attempting to find help之后，我按照building a custom button上的文档解决了这个问题，但是更改了标记，而不是使用锚标记。所以最后看起来像是：

HTML：

<a href="#" id="google-signin">
    ... More markup here ...
</a>

使用Javascript：

auth2.attachClickHandler(
  document.getElementById('google-signin'),
  { 'scope': 'profile email' },
  onSignIn,
  onFailure
);

此元素现在可以调焦，按Enter键后行为正确。