Guillermo Peralta Scura
67eca2bda1
Use HTML semantic elements to set the landmarks of the page. This is helpful for assistive technologies to determine the different regions of content. In our case it's useful for jumping between the different islands that we use to group the form controls.
32 lines
738 B
TypeScript
32 lines
738 B
TypeScript
import React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export function LanguageList<T>({
|
|
onClick,
|
|
languages,
|
|
currentLanguage,
|
|
}: {
|
|
languages: { lng: string; label: string }[];
|
|
onClick: (value: string) => void;
|
|
currentLanguage: string;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<select
|
|
className="language-select"
|
|
onChange={({ target }) => onClick(target.value)}
|
|
value={currentLanguage}
|
|
aria-label={t("buttons.selectLanguage")}
|
|
>
|
|
{languages.map(language => (
|
|
<option key={language.lng} value={language.lng}>
|
|
{language.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</React.Fragment>
|
|
);
|
|
}
|