Can't select SVG element with tab or shift-tab

[PinkaminaDianePie]

Can't select SVG element with tab or shift-tab in Chrome.

use case:

using pressKey('tab') or pressKey('shift+tab') should be able to navigate svg elements with tabIndex set, like <svg tabindex="0" role="button">...</svg>

actual behavior:

SVG element is not selected, next selectable element is selected instead. When navigating manually in the browser, everything works properly.

what works wrong:

Problem is on this line:

testcafe/src/client/core/utils/dom.js

Line 233 in d48db36

let tabIndex = el.getAttribute('tabIndex');

Not sure if it's Chrome specific, or it works the same in other browsers as well, but the only correct version for SVG elements is el.getAttribute('tabindex'); for other HTML elements it can be el.getAttribute('tabindex');, el.getAttribute('tabIndex'); or even el.getAttribute('TABINDEX');, while for svg nothing works but el.getAttribute('tabindex'); only.

possible solution:

replace el.getAttribute('tabIndex'); by el.getAttribute('tabindex');, or in case if camelcased version is required because of some other browser-specific things, it can be changed to el.getAttribute('tabIndex') || el.getAttribute('tabindex');

• browser name and version: Chrome 90

[AlexKamaev]

I reproduced the issue. Thank you for looking into this and offering a solution. I confirm that your code modification makes TestCafe work correctly. However, we need time to research it in detail.