Move browser-focus to website-widget on TAB+ENTER
For accessibility-purposes, it's important that websites are as accessible as possible. Some people are required to ónly using their keyboards and are less able to accurately use a mouse. For this purpose we use :focus. When hitting TAB on your keyboard on a website, you move from button/link to button/link. Pressing ENTER opens the link or triggers an action. Just try to navigate a website without using your mouse and only using your keyboard. A well designed website is still fully accessible.
On one of our link-buttons, we use a piece of jQuery-JavaScript to open the Website-widget when the button is clicked. When a link with the href-atrribute "#chatten" is clicked, the window.Trengo.Api.Widget.Open('chat') action is triggered, opening the chat-window.
jQuery(document).ready(function($){ $('a[href="#chatten"]').click(function(){ event.preventDefault(); window.Trengo.Api.Widget.open('chat'); }); });
This all works fine when clicking the button with a mouse. Ans also when the user navigates to the button using TAB and presses ENTER on the button, the chat-window opens as intended.
And here is where it gets interesting. Because the problem is that the focus remains on the button the user just clicked / triggers. When using only your keyboard, the user should be able to immediately start typing in the chat, or at least be focused on the chat-window, to quickly TAB his way to the entryfield. Now, if the user TAB's further, he moves to the next button on the website, instead of the website-widget.
Only when TABbing all the way to the bottom of the page, the next TAB will focus him on the website-widget.
Please put a fix of this issue on the development-roadmap, because the chat-option is especially important for people who are less able to navigate themselves digitally.