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

package/build/dist/lib/standalone.js

@@ -16665,7 +16665,7 @@ _API_ready = new (weak_map_default())(), _API_externalId = new (weak_map_default
   return {
     clientName: "@seamly/web-ui",
     clientVariant: api_classPrivateFieldGet(this, _API_layoutMode, "f"),
-    clientVersion: "21.0.2-beta.4",
+    clientVersion: "21.0.1",
     currentUrl: window.location.toString(),
     screenResolution: `${window.screen.width}x${window.screen.height}`,
     timezone: getTimeZone(),
@@ -30020,9 +30020,15 @@ const OptionsButton = () => {
 
 
 
-const TranslationOption = ({ label, checked, description, onChange, id, }) => (o("li", Object.assign({ className: css_className('translation-options__item', {
-        'translation-options__item--checked': checked,
-    }) }, { children: [o("input", { id: id, type: "radio", value: label, checked: checked, className: css_className('visually-hidden'), onChange: onChange, name: "language" }), o("label", Object.assign({ htmlFor: id }, { children: [o(layout_icon, { alt: "", name: "check", size: "16" }), label, " ", description && o("span", { children: ["(", description, ")"] })] }))] })));
+const TranslationOption = ({ label, checked, description, onChange, id, }) => {
+    const onKeyDown = (e) => {
+        if (e.code === 'Space' || e.code === 'Enter') {
+            e.preventDefault();
+            onChange();
+        }
+    };
+    return (o("li", Object.assign({ className: css_className('translation-options__item'), "aria-selected": checked, role: "option", tabIndex: 0, onClick: onChange, onKeyDown: onKeyDown, id: id }, { children: [o(layout_icon, { alt: "", name: "check", size: "16" }), label, " ", description && o("span", { children: ["(", description, ")"] })] })));
+};
 /* harmony default export */ var translation_option = (TranslationOption);
 
 ;// CONCATENATED MODULE: ./src/javascripts/domains/translations/components/options-dialog/translation-options.tsx
@@ -30059,7 +30065,7 @@ const TranslationOptions = ({ onChange, describedById, }) => {
             });
         });
     }, [languages, defaultLocale]);
-    return (o("ul", Object.assign({ "aria-describedby": describedById, className: css_className('translation-options') }, { children: sortedLanguages.map((language, idx) => {
+    return (o("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 (o(translation_option, { id: language.locale, label: language.nativeName, checked: checked, description: isOriginal && t('translations.settings.original'), onChange: handleChange(language) }, language.locale));