Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ADMIN DASHBOARD Add dir attribute on the <html> tag based on the locale's rtl property. #11672

Open
MounsifChr opened this issue Mar 1, 2025 · 0 comments
Open

ADMIN DASHBOARD Add dir attribute on the <html> tag based on the locale's rtl property. #11672

MounsifChr opened this issue Mar 1, 2025 · 0 comments

Comments

@MounsifChr
Copy link

Problem

Currently, MedusaJS Admin does not dynamically set the dir attribute on the <html> tag based on the locale's direction (RTL or LTR). This can lead to accessibility and usability issues for users in RTL locales (e.g., Arabic). Additionally, styles like border-r on the MainSidebar are not dynamically adjusted for RTL locales, resulting in inconsistent UI experiences.

Proposed Solution

  1. Set Default dir Value
    Use the default language's rtl property to set the initial dir attribute on the <html> tag during app initialization.

  2. Update dir Dynamically
    Use a useEffect hook in the i18n-provider to update the dir attribute whenever the language changes.

  3. Dynamic Styles
    Ensure styles like border-r or border-l are dynamically adjusted based on the dir attribute.

Why is this Important?

  • Accessibility: Proper text direction is crucial for RTL languages to ensure readability and usability.
  • Consistency: Ensures the UI behaves consistently across all locales.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@MounsifChr