Automatic toolbar grouping
Grouping on load
- Narrow the browser window so some toolbar items should wrap to the next row.
- Refresh the test.
- The toolbar should looks the same. Make sure none of toolbar items wrapped or overflow.
- The dropdown button should be displayed at the end of the toolbar, allowing to access grouped features.
- The drop–down should be displayed under the main toolbar.
- Grouped items toolbar should never start or end with a separator, even if one was in the main toolbar space.
- Other separators (between items) should be preserved.
Grouping and ungrouping on resize
- Play with the size of the browser window.
- Toolbar items should group and ungroup automatically but
- the should never wrap to the next line,
- or stick out beyond the toolbar boundaries.
Accessibility
- Make sure no toolbar items are grouped.
- Use Alt + F10 (+ Fn on Mac) to focus the toolbar.
- Navigate the toolbar using the keyboard
- it should work naturally,
- the navigation should cycle (leaving the last item focuses the first item, and going back from the first items focuses the last)
- Resize the window so some items are grouped.
- Check if navigation works in the same way but includes the button that aggregates grouped items.
- Enter the group button, navigate across grouped items, go back (Esc).
- There should be no interruptions or glitches in the navigation.
RTL UI support
- Perform the same scenarios in the editor with RTL (right–to–left) UI.
- There should be no visual or behavioral difference between LTR and RTL editors except that the toolbar is mirrored.
- The button aggregating grouped toolbar items should be displayed on the left–hand side.