@seamly/web-ui 21.0.2-beta.4 → 21.0.2-beta.6

package/build/dist/lib/components.js

@@ -13670,9 +13670,15 @@ const OptionsButton = () => {
 
 
 
-const TranslationOption = ({ label, checked, description, onChange, id, }) => ((0,jsx_runtime_namespaceObject.jsxs)("li", Object.assign({ className: css_className('translation-options__item', {
-        'translation-options__item--checked': checked,
-    }) }, { children: [(0,jsx_runtime_namespaceObject.jsx)("input", { id: id, type: "radio", value: label, checked: checked, className: css_className('visually-hidden'), onChange: onChange, name: "language" }), (0,jsx_runtime_namespaceObject.jsxs)("label", Object.assign({ htmlFor: id }, { children: [(0,jsx_runtime_namespaceObject.jsx)(layout_icon, { alt: "", name: "check", size: "16" }), label, " ", description && (0,jsx_runtime_namespaceObject.jsxs)("span", { children: ["(", description, ")"] })] }))] })));
+const TranslationOption = ({ label, checked, description, onChange, id, }) => {
+    const onKeyDown = (e) => {
+        if (e.code === 'Space' || e.code === 'Enter') {
+            e.preventDefault();
+            onChange();
+        }
+    };
+    return ((0,jsx_runtime_namespaceObject.jsxs)("li", Object.assign({ className: css_className('translation-options__item'), "aria-selected": checked, role: "option", tabIndex: 0, onClick: onChange, onKeyDown: onKeyDown, id: id }, { children: [(0,jsx_runtime_namespaceObject.jsx)(layout_icon, { alt: "", name: "check", size: "16" }), label, " ", description && (0,jsx_runtime_namespaceObject.jsxs)("span", { children: ["(", description, ")"] })] })));
+};
 /* harmony default export */ const translation_option = (TranslationOption);
 
 ;// CONCATENATED MODULE: ./src/javascripts/domains/translations/components/options-dialog/translation-options.tsx
@@ -13709,7 +13715,7 @@ const TranslationOptions = ({ onChange, describedById, }) => {
             });
         });
     }, [languages, defaultLocale]);
-    return ((0,jsx_runtime_namespaceObject.jsx)("ul", Object.assign({ "aria-describedby": describedById, className: css_className('translation-options') }, { children: sortedLanguages.map((language, idx) => {
+    return ((0,jsx_runtime_namespaceObject.jsx)("ul", Object.assign({ "aria-describedby": describedById, role: "listbox", tabIndex: -1, className: css_className('translation-options') }, { children: sortedLanguages.map((language, idx) => {
             const isOriginal = idx === 0;
             const checked = currentLocale === language.locale || (!currentLocale && isOriginal);
             return ((0,jsx_runtime_namespaceObject.jsx)(translation_option, { id: language.locale, label: language.nativeName, checked: checked, description: isOriginal && t('translations.settings.original'), onChange: handleChange(language) }, language.locale));