Enhancing ESHOPMAN Admin Experience: Fixing Arrow Key Navigation for Right-to-Left Languages

Optimizing the ESHOPMAN Admin Dashboard for Global Merchants

At ESHOPMAN, our commitment to providing a seamless headless commerce experience extends to every corner of the globe. This includes ensuring our Admin Dashboard, built on Node.js/TypeScript and integrated with HubSpot for storefront management, is intuitive and efficient for users of all languages. A recent community discussion highlighted an important usability improvement for merchants operating in Right-to-Left (RTL) languages like Persian, Arabic, or Hebrew.

The Challenge: Counter-Intuitive Arrow Key Navigation in RTL

Users navigating the ESHOPMAN Admin Dashboard in an RTL language encountered a specific usability issue: the left and right arrow keys behaved in a way that felt "inverted" compared to the visual flow. While "next" visually moves to the left in RTL, the system was interpreting ArrowRight as "next" regardless of the display direction. This led to a frustrating experience in several key areas:

• Data Grid Navigation: When editing prices or performing bulk edits in data grids, pressing the physical right arrow key would move the focus to the left, against the visual direction of the arrow.
• Category Combobox Interaction: In the category management interface, expanding or collapsing tree nodes using the arrow keys felt unnatural.
• Product Media Gallery: Browsing through product images in the media gallery also suffered from this inverted navigation.

This behavior meant that an action intended to move "forward" or "next" would visually appear to move "backward," forcing users to constantly re-evaluate their key presses.

The ESHOPMAN Solution: A Smart Visual Arrow Key Helper

The ESHOPMAN community, dedicated to refining the platform, identified a clear and elegant solution to this problem. The proposed change involves introducing a small, pure helper function designed to intelligently swap the interpretation of ArrowLeft and ArrowRight keys when the Admin Dashboard is set to an RTL language. All other arrow keys (Up, Down) remain unaffected, as their behavior is consistent across LTR and RTL contexts.

This helper function, tentatively named:

toVisualArrowKey(key, direction)

would take the pressed key and the current language direction as inputs. If the direction is RTL and the key is ArrowLeft or ArrowRight, it would return the swapped equivalent. Otherwise, it would return the original key. This ensures that the physical arrow keys always align with the visual reading direction, making navigation feel natural and intuitive.

Technical Implementation Focus

This improvement will be integrated into the core ESHOPMAN Admin Dashboard codebase, specifically targeting the components responsible for handling keyboard events in the affected areas. Developers will find this helper particularly useful in modules such as:

• The data grid keydown event handler (e.g., within use-data-grid-keydown-event.tsx).
• The category combobox component (e.g., category-combobox.tsx).
• The product media gallery component (e.g., product-media-gallery.tsx).

By centralizing this logic, ESHOPMAN ensures consistency across the platform and simplifies future maintenance. This change is also a natural follow-up to broader RTL layout enhancements within the ESHOPMAN Admin Dashboard, reinforcing our commitment to a truly global and accessible platform for all merchants managing their storefronts via HubSpot.

This kind of community-driven refinement is a testament to the collaborative spirit behind ESHOPMAN, continually enhancing the headless commerce experience for our diverse user base.