Investigate Translation Support for React & React Native Components in MetaMask Design System Across Mobile, Extension, and Portfolio

[georgewrmarshall]

Description

We need to explore how translations will work for the React and React Native components within the metamask-design-system monorepo. Specifically, this spike will investigate how components, such as those with default aria-labels (e.g., "close" on the Modal close button), will handle translations when used across multiple platforms: MetaMask Mobile, MetaMask Extension, and the MetaMask Portfolio.

The aim is to ensure that our design system can be seamlessly integrated with different translation providers, while also maintaining consistency across all MetaMask platforms.

Technical Details

• Investigate how React and React Native components can be localized using existing translation frameworks (e.g., i18next, react-intl).
• Explore how component libraries and design systems in other open-source projects manage translations, particularly across different platforms (e.g., Storybook, Material UI, Ant Design).
• Determine how we will implement and manage translations for:
  • MetaMask Mobile (React Native)
  • MetaMask Extension (React)
  • MetaMask Portfolio (React)
• Ensure that default aria-labels, as well as other accessibility features, can be translated and localized.
• Analyze potential challenges when using different translation providers across platforms and propose solutions to mitigate inconsistencies.
• Evaluate if fallback translations should be part of the design system, or if platform-specific translation logic should be enforced.

Acceptance Criteria

• Review how other design systems (e.g., Material UI, Ant Design) handle translations across multiple platforms (web and mobile).
• Ensure that the metamask-design-system components can be integrated with translation frameworks used in MetaMask Mobile, Extension, and Portfolio.
• Propose a solution that allows consistent localization across React and React Native components, with a focus on seamless integration across platforms.
• Verify that accessibility features such as aria-labels are properly localized across all platforms.

References

• MetaMask Mobile
• MetaMask Extension
• MetaMask Portfolio
• Material UI Translation Docs
• Ant Design Translation Docs

[georgewrmarshall]

Also make sure to include folks like @coreyjanssen from content design and Laurel from translations team in case there are opportunities to collaborate and share tooling