Accessibility of radiobuttons combined with `goNextPageAutomatic`

[SamMousa]

Are you requesting a feature, reporting a bug or asking a question?

Bug

What is the current behavior?

When using keyboard navigation on a radiogroup, you can press tab until the question gets focus. Then you use arrows to select your option. The issue is that, unlike with checkboxes, each arrow key triggers an input event and actually sets the value of the input. When combined with goNextPageAutomatic this leads to unpredictable behavior from a UX perspective:

What is the expected behavior?

When using keyboard inputs the arrows are navigation and the automatic go to next page should be disabled. Optionally we could trigger that behavior when space is pressed.

How would you reproduce the current behavior (if this is a bug)?

Create any question that uses a radiogroup, enable goNextPageAutomatic and try to do it without a keyboard.

[SamMousa]

My workaround for dealing with this in JS:

element.addEventListener('keydown', e => {
            const inputs = Array.from(e.target.closest('.carousel-card').querySelectorAll('input'));
            // We add inputs.length because JS % is remainder not modulus :|
            const currentIndex = inputs.length + inputs.indexOf(e.target);
            switch (e.key) {
                case ' ':
                    e.target.checked = true;
                    changeHandler(e.target);
                    break;
                case 'ArrowUp':
                case 'ArrowLeft':
                    inputs[(currentIndex - 1) % inputs.length].focus();
                    break;
                case 'ArrowDown':
                case 'ArrowRight':
                    inputs[(currentIndex + 1) % inputs.length].focus();
                    break;
                default:
                    return;
            }

            e.preventDefault();
            e.stopPropagation();

        });

This is not a prio at all, just something I noticed.

[dmitry-kurmanov]

example: https://plnkr.co/edit/wuHUfZVI1k8K2L9o the standard: https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/examples/radio/radio-1/radio-1.html

if (goNextPageAutomatic) handleKeyboardTapToOnlyFocusTheInputWithoutSetValue

[dmitry-kurmanov]

It is the standard html behavior so I think that it is not the bug but enchancement. We will add it to our TODO list.

[SamMousa]

Sure it is standard behaviour, but automatic submission is not. (Go next page automatic is essentially automatic form submission)

[SamMousa]

I think this needs to be reconsidered if SurveyJS aims to be accessible. Currently this is not accessible at all for keyboard users.