Mintlify Sandbox

Coding Examples

Overview

Sled Tests

Go Headless

Studio Two

Dashboard Extensions

Backend Extensions

Site Extensions

Extend Websites with SDK

Wix APIs and References

Build Apps

Frontend Modules

Wix Design System (WDS)

Client (Deprecated)

API Preview

Wix CLI

Contexts

Ricos

Extend Websites with Velo

API Reference

Velo

Picasso

# Translations API: Sample Flows

This article presents possible use cases and corresponding sample flows that you can support. It provides a useful starting point as you plan your implementation.

## Label a component for screen readers

To label a component for screen readers, follow these steps:

1. Retrieve a lookup function for your component's namespace:

   ```ts
   const t = translationsService.translate('ProductGallery')
   ```

2. Retrieve the label by its key. Specify an English fallback, so screen readers don't announce the key when the namespace has no string for it:

   ```ts
   const nextLabel = t('nextButtonAriaLabel', 'Next product')
   ```

3. Set the label as the button's `aria-label`:

   ```tsx
   return <button aria-label={nextLabel}>→</button>
   ```

## Pass a set of labels to your own component

To pass a set of labels to your own component, follow these steps:

1. Retrieve every string in your component's namespace:

   ```ts
   const strings = translationsService.getTranslations('ProductGallery')
   ```

2. Read each label by its key, with your own default for a key the namespace doesn't have. `getTranslations()` has no fallback, so a missing key is `undefined`:

   ```ts
   const labels = {
       next: strings.nextButtonAriaLabel ?? 'Next product',
       previous: strings.previousButtonAriaLabel ?? 'Previous product',
   }
   ```

3. Pass the labels to your own `Carousel` component, with your own `products` list:

   ```tsx
   return <Carousel items={products} labels={labels} />
   ```