Skip to content

Add RTL support to navigation component #392

@Jokinen

Description

@Jokinen

What

The <Navigation /> component should support right-to-left language direction so it can be used in applications that support languages which are read from right to left (for instance Arabic).

When the <Navigation /> component is used within a HTML document with the dir attribute set to rtl, the <Navigation /> component should offer an UX that's on par with that of a left-to-right language.

Why

In the Jässäri service, we want to add support for various other languages beyond the three defaults. This will make the service more inclusive for people who are most fluent in some other language than Finnish, Swedish or English. This language list contains rtl language(s).

Related material

A quick technical mock with current version using Arabic:
https://codesandbox.io/s/inspiring-sun-x2bih

The current Jässäri page in Munstadi in Arabic:
https://jassari.munstadi.fi/ar/

Link to relevant Jira issue in Jässäri project:
https://helsinkisolutionoffice.atlassian.net/browse/YM-480

Other points

With initial testing we didn't notice issues in other components we made use of. However, I understand that from HDS's perspective this may need to be considered in some other context than this component. Navigation just happened to be the component where we came across the issue.

FYI: The contribution guidelines you link in issue templates does not lead to anywhere: https://hds.hel.fi/contributing

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementRequest related to a current component/pattern/token/documentation.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions