Is possible to translate "aria-label" using next-i18next

Question

I have an application which support multi languages and I want to translate accessibility props like "aria-label". In my case I'm using Next.js with next-i18next. I created a namespace specifically for those translations (a11y)

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

The component is using HOC withTranslation from from next-i18next like:

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

But I got this message: Warning: Prop aria-label did not match. Server: "toggle password visibility" Client: "TogglePassVisibility". If I inspect DOM I can see that it is working but the warning persist. Not sure if it is supported by the framework. I made my research but not luck so far.

felixmosh felixmosh · Accepted Answer · 2020-08-07T10:33:05

Aria-label is a regular DOM attribute, you can translate it.

Since Next.js is a Server & client side renderer, from you error looks like your server side render is different from the client side.

There are many possible reasons for this, one of them is that the language in the server side is different from the one that is in the client side.

Is possible to translate "aria-label" using next-i18next

1 Answers