Доступность кнопки входа в систему Google с помощью веб-приложения

Question

Я интегрирую Google Sign-in с моим веб-приложением, и он автоматически отображает кнопку на основе идентификатора, который я предоставляю функции gapi.signin2.render(). Меня беспокоит, что вся документация использует <div> как элемент, содержащий кнопки, поэтому пользователь вынужден щелкнуть кнопку с помощью мыши, вместо того, чтобы иметь возможность вставить элемент в этот элемент и активировать его таким образом. Даже после вызова 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

После attempting to find help на официальных форумах продуктов Google я решил это, выполнив документацию по адресу 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.