feat(design): add roving tab index

[griest024]

PR Checklist

• Commit message follows our contributing guidelines
• Tests added/updated (for bug fixes/features)
• Documentation added/updated (for bug fixes/features)

PR Type

• Bug fix
• Feature
• Style update
• Refactor
• Test
• Build
• CI
• Docs
• Performance
• Other (please describe)

Current behavior

Fixes: #1955
Part of: #

New behavior

Breaking change?

• Yes
• No

Additional context

[griest024]

@xelaint I need you to test out the behavior and see if you need any changes. For example, arrow keys on the outermost elements doesn't move focus, only inside a group, seems like we might always want arrow keys to move focus around.

[xelaint]

@xelaint I need you to test out the behavior and see if you need any changes. For example, arrow keys on the outermost elements doesn't move focus, only inside a group, seems like we might always want arrow keys to move focus around.

@griest024 Are you saying the arrow key should be able to move focus from I get tabbed to first to I get tabbed to second

[griest024]

@xelaint I need you to test out the behavior and see if you need any changes. For example, arrow keys on the outermost elements doesn't move focus, only inside a group, seems like we might always want arrow keys to move focus around.

@griest024 Are you saying the arrow key should be able to move focus from I get tabbed to first to I get tabbed to second

yes

[xelaint]

@xelaint I need you to test out the behavior and see if you need any changes. For example, arrow keys on the outermost elements doesn't move focus, only inside a group, seems like we might always want arrow keys to move focus around.

@griest024 Are you saying the arrow key should be able to move focus from I get tabbed to first to I get tabbed to second

yes

I don't think so. Native behavior for moving around main interactive elements on a page without extra features is typically with tabs. e.g. moving from button to button

[xelaint]

Tabbing from this group <div rti rtiBoundary="group"> should move focus to the next focusable element on the page, in this case it's the HTML tab, but tab cycles focus back to <div rti>I get tabbed to first</div>

[damienwebdev]

So, this appears to have a few issues, once tabbed into a area with an RTI field, you're no longer able to tab to anything else labelled with RTI.

Additionally, if there are not RTI labelled elements (think button, a etc), inside the RTI, they aren't tabbable when I think they should be.

[griest024]

So, this appears to have a few issues, once tabbed into a area with an RTI field, you're no longer able to tab to anything else labelled with RTI.

I thought this is what we wanted, tab moves focus outside of the group, arrow keys moves focus inside the group

Additionally, if there are not RTI labelled elements (think button, a etc), inside the RTI, they aren't tabbable when I think they should be.

So we should retain browser native behavior of tabbing then?

[damienwebdev]

[griest024]

• tabbing should not escape group
• as and buttons need to be implicitly included in tabbing order
• do not intercept keyboard events, modify tabindex to control tabbing

[griest024]

@damienwebdev I've made the requested changes, the implementation is fairly clean as well!

[griest024]

focus trap inside rti boundary

[griest024]

focus trap inside rti boundary

implemented

[xelaint]

lgtm! can be moved to core