Improve Keyboard Navigation

[IanLunn]

Problem

When using the tab key, the user can navigate through step elements but inactive steps can't be seen. In some themes, the browser may move the container to make focused elements in inactive steps visible. This can cause the theme to look and generally appear to be broken.

Solution 1

When an element receives focus, Sequence should determine which step it belongs to and navigate to it accordingly.

This may be costly on JS performance and generally not possible.

Solution 2

Prevent focus on elements in inactive steps using tabindex. The user can still navigate the entire application via pagination, prev/next controls and tabbing but elements within a step can only be focusable when the step becomes active.

See: Focusable Elements with tabindex