RTL (Right-to-Left)

RTL (Right-to-Left) testing is essential for Skapa components that are intended for global audiences, especially in regions where languages such as Arabic, Hebrew, and Urdu are used. In these languages, the text direction is different from English and other LTR (Left-to-Right) languages, which means that the app's UI layout and elements need to be adapted accordingly. RTL testing ensures that our components are correctly localized for users using RTL languages. This means verifying that the elements are properly mirrored, supporting the correct reading order, aligning the components, and addressing any potential issues that can hinder the app's accessibility or usability.

General guidelines

• Make sure to always use Start and End alignment properties instead of Right and Left.
• Google suggestion to test RTL direction using the developer tool options. Force RTL layout direction.
• The text should be always displayed right to left, however, Arabic numbers and untranslated text should never be mirrored.
• Charts are never mirrored since the (X, Y) axis remains the same.
• Icons representing clockwise progress, non-directional icons, Images, and videos should never be mirrored.
• Navigation buttons should be displayed in reverse order. (e.g. back button should be in the right and pointing to the right)
• Icons indicating direction and motion should be displayed in opposite directions.
• Components such as Tabs, Carousel, and pagination are displayed in reverse order.

Skapa implementation guidelines

• Always refer to the Figma design for RTL implementation. Usually most things are already handled there. Are there any uncertainties, bring this up with other Skapa devs or designers.
• Leading and trailing positions should be flipped. (We are using leading and trailing instead of start and end is to align with the rest of Skapa).
• Make sure the positions and sizes of paddings are mirrored correctly.
• Text provided to components especially contentDescription should be localized.
• Setup a @Preview function in component source file that uses RTL layout (LocalLayoutDirection provides LayoutDirection.Rtl) for testing.
• In the Demo app component screen, always have a section tha uses IkeaRTLComponent{content} which is uses the LayoutDirection.Rtl under the hood.
• Add a snapshot test for the component in RTL mode.