Можно перевести "aria-label" с помощью next-i18next - PullRequest
Новая
       81

Можно перевести "aria-label" с помощью next-i18next

0 голосов
/ 07 августа 2020

У меня есть приложение, поддерживающее несколько языков, и я хочу перевести такие реквизиты доступности, как «aria-label». В моем случае я использую Next. js с next-i18next . Я создал пространство имен специально для этих переводов (a11y) 

<IconButton
  aria-label={t('a11y:TogglePassVisibility')}
  onClick={handleClickShowPassword}
  edge="end">
    {showPassword ? <Visibility /> : <VisibilityOff />}
</IconButton>

Компонент использует HO C withTranslation from from next-i18next как: 

export default withTranslation(['common', 'auth', 'a11y'])(SignUp);

Но я получил это сообщение: Предупреждение: Prop aria-label не соответствует. Сервер: «переключить видимость пароля» Клиент: «TogglePassVisibility». Если я проверю DOM, я вижу, что он работает, но предупреждение сохраняется. Не уверен, поддерживается ли это фреймворком. Я провел свое исследование, но пока безуспешно.

1 Ответ

0 голосов
/ 07 августа 2020

Aria-label - это обычный атрибут DOM, вы можете его перевести.

Поскольку Next. js - это серверный и клиентский рендерер, ваша ошибка выглядит так, будто рендеринг на стороне сервера отличается от рендеринга на стороне сервера. на стороне клиента.

Для этого может быть много возможных причин, одна из них заключается в том, что язык на стороне сервера отличается от того, который находится на стороне клиента.

...