### Description Fixes keyboard navigation issue on richtext field tabs (Edit/Preview) where pressing arrow keys twice would cause focus to escape the tab bar, leaving no tab selected and blank content displayed.
- Fixes : #6561 **Problem:** When users focused a tab button and pressed arrow keys (left/right/up/down), Bootstrap's built-in keyboard navigation would eventually cause focus to leave the tab list entirely. This made keyboard navigation impossible and left the UI in a broken state. **Root Cause:** 1. Bootstrap's tab component has buggy arrow key handling that causes focus loss 2. Bootstrap automatically sets `tabindex="-1"` on inactive tabs, removing them from the Tab order **Solution:** 1. Block arrow keys on richtext tab buttons using a capture-phase event listener that intercepts before Bootstrap handles the event 2. Override Bootstrap's tabindex management by ensuring all visible tabs have `tabindex="0"` so Tab/Shift+Tab navigation works correctly **Changes:** - `app/assets/javascripts/richtext.js`: Added arrow key blocking and tabindex override logic - `app/views/shared/_richtext_field.html.erb`: Removed hardcoded tabindex attributes (now managed by JS) **Navigation after fix:** - Arrow keys: Blocked (do nothing) - Tab: Edit -> Preview -> Body textarea - Shift+Tab: Body textarea -> Preview -> Edit - Click/Enter/Space: Activates the focused tab ### How has this been tested? Tested on Docker environment at `/diary/new`: 1. Focused the body textarea 2. Pressed Shift+Tab - focus moved to Preview tab 3. Pressed Shift+Tab - focus moved to Edit tab 4. Pressed Tab - focus moved to Preview tab 5. Pressed Tab - focus moved to body textarea 6. Pressed arrow keys while on tab buttons - nothing happened (blocked as expected) 7. Clicked tabs and pressed Enter/Space - tabs activated correctly 8. Verified no focus loss or blank content issues All keyboard navigation now works correctly without the original bug. You can view, comment on, or merge this pull request online at: https://github.com/openstreetmap/openstreetmap-website/pull/6691 -- Commit Summary -- * Fix keyboard navigation for richtext field tabs -- File Changes -- M app/assets/javascripts/richtext.js (39) M app/views/shared/_richtext_field.html.erb (20) -- Patch Links -- https://github.com/openstreetmap/openstreetmap-website/pull/6691.patch https://github.com/openstreetmap/openstreetmap-website/pull/6691.diff -- Reply to this email directly or view it on GitHub: https://github.com/openstreetmap/openstreetmap-website/pull/6691 You are receiving this because you are subscribed to this thread. Message ID: <openstreetmap/openstreetmap-website/pull/[email protected]>
_______________________________________________ rails-dev mailing list [email protected] https://lists.openstreetmap.org/listinfo/rails-dev
