fix(web): make human input button style selector accessible (#42747)

oxlint-suppressions.json

@@ -3276,14 +3276,6 @@
       "count": 5
     }
   },
-  "web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx": {
-    "jsx-a11y/click-events-have-key-events": {
-      "count": 4
-    },
-    "jsx-a11y/no-static-element-interactions": {
-      "count": 4
-    }
-  },
   "web/app/components/workflow/nodes/human-input/components/delivery-method/method-selector.tsx": {
     "jsx-a11y/click-events-have-key-events": {
       "count": 2

web/app/components/workflow/nodes/human-input/components/__tests__/button-style-dropdown.spec.tsx

@@ -15,22 +15,49 @@ describe('ButtonStyleDropdown', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockUseTranslation.mockReturnValue({
-      t: withSelectorKey((key: string) => key),
+      t: withSelectorKey((key: string) => {
+        const translations: Record<string, string> = {
+          'nodes.humanInput.userActions.buttonStyle.ghost': 'Ghost',
+          'nodes.humanInput.userActions.buttonStyle.primary': 'Primary',
+        }
+        return translations[key] ?? key
+      }),
     })
   })
 
   it('should open the style picker and update the selected style', async () => {
     const user = userEvent.setup()
-    render(
-      <ButtonStyleDropdown text="Approve" data={UserActionButtonType.Ghost} onChange={onChange} />,
+    const view = render(
+      <ButtonStyleDropdown
+        text="Approve"
+        data={UserActionButtonType.Ghost}
+        onChange={(nextStyle) => {
+          onChange(nextStyle)
+          view.rerender(<ButtonStyleDropdown text="Approve" data={nextStyle} onChange={onChange} />)
+        }}
+      />,
     )
 
-    await user.click(
-      screen.getByRole('button', { name: 'nodes.humanInput.userActions.chooseStyle' }),
-    )
-    expect(screen.getByText('nodes.humanInput.userActions.chooseStyle')).toBeInTheDocument()
-    await user.click(screen.getAllByRole('button', { name: 'Approve' })[0]!)
+    const trigger = screen.getByRole('button', {
+      name: 'Approve: nodes.humanInput.userActions.chooseStyle',
+    })
+    await user.tab()
+    expect(trigger).toHaveFocus()
+    await user.keyboard('{Enter}')
+    const radioGroup = screen.getByRole('radiogroup', {
+      name: 'Approve: nodes.humanInput.userActions.chooseStyle',
+    })
+    expect(radioGroup).toBeInTheDocument()
 
+    const ghostRadio = screen.getByRole('radio', { name: 'Approve, Ghost' })
+    expect(ghostRadio).toHaveAttribute('aria-checked', 'true')
+    const primaryRadio = screen.getByRole('radio', { name: 'Approve, Primary' })
+    ghostRadio.focus()
+    await user.keyboard('{ArrowRight}')
+
+    expect(primaryRadio).toHaveFocus()
+    await user.keyboard(' ')
+    expect(primaryRadio).toHaveAttribute('aria-checked', 'true')
     expect(onChange).toHaveBeenCalledWith(UserActionButtonType.Primary)
   })
 
@@ -40,11 +67,17 @@ describe('ButtonStyleDropdown', () => {
       <ButtonStyleDropdown text="Approve" data={UserActionButtonType.Ghost} onChange={onChange} />,
     )
 
-    const trigger = screen.getByRole('button', { name: 'nodes.humanInput.userActions.chooseStyle' })
+    const trigger = screen.getByRole('button', {
+      name: 'Approve: nodes.humanInput.userActions.chooseStyle',
+    })
     await user.tab()
     expect(trigger).toHaveFocus()
     await user.keyboard('{Enter}')
-    expect(await screen.findByRole('dialog')).toBeInTheDocument()
+    expect(
+      await screen.findByRole('dialog', {
+        name: 'Approve: nodes.humanInput.userActions.chooseStyle',
+      }),
+    ).toBeInTheDocument()
     await user.keyboard('{Escape}')
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
   })
@@ -60,11 +93,15 @@ describe('ButtonStyleDropdown', () => {
       />,
     )
 
-    const trigger = screen.getByRole('button', { name: 'nodes.humanInput.userActions.chooseStyle' })
+    const trigger = screen.getByRole('button', {
+      name: 'Approve: nodes.humanInput.userActions.chooseStyle',
+    })
     expect(trigger).toBeDisabled()
     await user.click(trigger)
 
-    expect(screen.queryByText('nodes.humanInput.userActions.chooseStyle')).not.toBeInTheDocument()
+    expect(
+      screen.queryByText('Approve: nodes.humanInput.userActions.chooseStyle'),
+    ).not.toBeInTheDocument()
     expect(onChange).not.toHaveBeenCalled()
   })
 })

web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx

@@ -1,11 +1,12 @@
 import type { FC } from 'react'
-import { Button } from '@langgenius/dify-ui/button'
+import { buttonVariants } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { IconButton, iconButtonVariants } from '@langgenius/dify-ui/icon-button'
-import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
+import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from '@langgenius/dify-ui/popover'
+import { RadioGroup, RadioItem } from '@langgenius/dify-ui/radio-group'
 import { RiFontSize } from '@remixicon/react'
 import * as React from 'react'
-import { useMemo, useState } from 'react'
+import { useId, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { UserActionButtonType } from '../types'
 
@@ -21,6 +22,9 @@ type Props = Readonly<{
 const ButtonStyleDropdown: FC<Props> = ({ text = 'Button Text', data, onChange, readonly }) => {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
+  const titleId = useId()
+  const chooseStyleLabel = t(($) => $[`${i18nPrefix}.userActions.chooseStyle`], { ns: 'workflow' })
+  const accessibleLabel = `${text}: ${chooseStyleLabel}`
   const currentStyle = useMemo(() => {
     switch (data) {
       case UserActionButtonType.Primary:
@@ -45,7 +49,7 @@ const ButtonStyleDropdown: FC<Props> = ({ text = 'Button Text', data, onChange,
       <PopoverTrigger
         render={
           <IconButton
-            aria-label={t(($) => $[`${i18nPrefix}.userActions.chooseStyle`], { ns: 'workflow' })}
+            aria-label={accessibleLabel}
             variant="tertiary"
             size="lg"
             disabled={readonly}
@@ -71,59 +75,66 @@ const ButtonStyleDropdown: FC<Props> = ({ text = 'Button Text', data, onChange,
         className="border-none bg-transparent shadow-none"
       >
         <div className="rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-4 shadow-lg backdrop-blur-xs">
-          <div className="system-md-medium text-text-primary">
-            {t(($) => $[`${i18nPrefix}.userActions.chooseStyle`], { ns: 'workflow' })}
-          </div>
-          <div className="mt-2 flex w-81 flex-wrap gap-1">
-            <div
-              className={cn(
-                'box-border flex h-20 w-40 cursor-pointer items-center justify-center rounded-lg border-[1.5px] border-transparent bg-background-section hover:bg-background-section-burn',
-                data === UserActionButtonType.Primary &&
-                  'border-components-option-card-option-selected-border',
-              )}
-              onClick={() => onChange(UserActionButtonType.Primary)}
+          <PopoverTitle id={titleId} className="system-md-medium text-text-primary">
+            {accessibleLabel}
+          </PopoverTitle>
+          <RadioGroup
+            aria-labelledby={titleId}
+            value={data}
+            onValueChange={(value) => onChange(value)}
+            disabled={readonly}
+            className="mt-2 flex w-81 flex-wrap gap-1"
+          >
+            <RadioItem
+              value={UserActionButtonType.Primary}
+              aria-label={`${text}, ${t(($) => $[`${i18nPrefix}.userActions.buttonStyle.primary`], { ns: 'workflow' })}`}
+              nativeButton
+              render={<button type="button" />}
+              className="box-border flex h-20 w-40 cursor-pointer items-center justify-center rounded-lg border-[1.5px] border-transparent bg-background-section outline-hidden hover:bg-background-section-burn focus-visible:ring-2 focus-visible:ring-state-accent-solid data-checked:border-components-option-card-option-selected-border data-disabled:cursor-not-allowed"
             >
-              <Button variant="primary" className="pointer-events-none">
+              <span className={cn(buttonVariants({ variant: 'primary' }), 'pointer-events-none')}>
                 {text}
-              </Button>
-            </div>
-            <div
-              className={cn(
-                'box-border flex h-20 w-40 cursor-pointer items-center justify-center rounded-lg border-[1.5px] border-transparent bg-background-section hover:bg-background-section-burn',
-                data === UserActionButtonType.Default &&
-                  'border-components-option-card-option-selected-border',
-              )}
-              onClick={() => onChange(UserActionButtonType.Default)}
+              </span>
+            </RadioItem>
+            <RadioItem
+              value={UserActionButtonType.Default}
+              aria-label={`${text}, ${t(($) => $[`${i18nPrefix}.userActions.buttonStyle.default`], { ns: 'workflow' })}`}
+              nativeButton
+              render={<button type="button" />}
+              className="box-border flex h-20 w-40 cursor-pointer items-center justify-center rounded-lg border-[1.5px] border-transparent bg-background-section outline-hidden hover:bg-background-section-burn focus-visible:ring-2 focus-visible:ring-state-accent-solid data-checked:border-components-option-card-option-selected-border data-disabled:cursor-not-allowed"
             >
-              <Button variant="secondary" className="pointer-events-none">
+              <span className={cn(buttonVariants({ variant: 'secondary' }), 'pointer-events-none')}>
                 {text}
-              </Button>
-            </div>
-            <div
-              className={cn(
-                'box-border flex h-20 w-40 cursor-pointer items-center justify-center rounded-lg border-[1.5px] border-transparent bg-background-section hover:bg-background-section-burn',
-                data === UserActionButtonType.Accent &&
-                  'border-components-option-card-option-selected-border',
-              )}
-              onClick={() => onChange(UserActionButtonType.Accent)}
+              </span>
+            </RadioItem>
+            <RadioItem
+              value={UserActionButtonType.Accent}
+              aria-label={`${text}, ${t(($) => $[`${i18nPrefix}.userActions.buttonStyle.accent`], { ns: 'workflow' })}`}
+              nativeButton
+              render={<button type="button" />}
+              className="box-border flex h-20 w-40 cursor-pointer items-center justify-center rounded-lg border-[1.5px] border-transparent bg-background-section outline-hidden hover:bg-background-section-burn focus-visible:ring-2 focus-visible:ring-state-accent-solid data-checked:border-components-option-card-option-selected-border data-disabled:cursor-not-allowed"
             >
-              <Button variant="secondary-accent" className="pointer-events-none">
+              <span
+                className={cn(
+                  buttonVariants({ variant: 'secondary-accent' }),
+                  'pointer-events-none',
+                )}
+              >
                 {text}
-              </Button>
-            </div>
-            <div
-              className={cn(
-                'box-border flex h-20 w-40 cursor-pointer items-center justify-center rounded-lg border-[1.5px] border-transparent bg-background-section hover:bg-background-section-burn',
-                data === UserActionButtonType.Ghost &&
-                  'border-components-option-card-option-selected-border',
-              )}
-              onClick={() => onChange(UserActionButtonType.Ghost)}
+              </span>
+            </RadioItem>
+            <RadioItem
+              value={UserActionButtonType.Ghost}
+              aria-label={`${text}, ${t(($) => $[`${i18nPrefix}.userActions.buttonStyle.ghost`], { ns: 'workflow' })}`}
+              nativeButton
+              render={<button type="button" />}
+              className="box-border flex h-20 w-40 cursor-pointer items-center justify-center rounded-lg border-[1.5px] border-transparent bg-background-section outline-hidden hover:bg-background-section-burn focus-visible:ring-2 focus-visible:ring-state-accent-solid data-checked:border-components-option-card-option-selected-border data-disabled:cursor-not-allowed"
             >
-              <Button variant="ghost" className="pointer-events-none">
+              <span className={cn(buttonVariants({ variant: 'ghost' }), 'pointer-events-none')}>
                 {text}
-              </Button>
-            </div>
-          </div>
+              </span>
+            </RadioItem>
+          </RadioGroup>
         </div>
       </PopoverContent>
     </Popover>

web/i18n/locales/ar-TN/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "يجب أن يبدأ معرف الإجراء بحرف أو شرطة سفلية، متبوعاً بأحرف أو أرقام أو شرطات سفلية",
   "nodes.humanInput.userActions.actionIdTooLong": "يجب أن يكون معرف الإجراء {{maxLength}} حرفاً أو أقل",
   "nodes.humanInput.userActions.actionNamePlaceholder": "اسم الإجراء",
+  "nodes.humanInput.userActions.buttonStyle.accent": "مميز",
+  "nodes.humanInput.userActions.buttonStyle.default": "افتراضي",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "شفاف",
+  "nodes.humanInput.userActions.buttonStyle.primary": "أساسي",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "قيمة الإجراء",
   "nodes.humanInput.userActions.buttonTextTooLong": "يجب أن يكون نص الزر {{maxLength}} حرفاً أو أقل",
   "nodes.humanInput.userActions.chooseStyle": "اختر نمط الزر",

web/i18n/locales/az-AZ/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "Əməliyyat ID-si hərf və ya alt xətlə başlamalı, ardınca hərflər, rəqəmlər və ya alt xətlər gəlməlidir",
   "nodes.humanInput.userActions.actionIdTooLong": "Əməliyyat ID-si ən çox {{maxLength}} simvoldan ibarət olmalıdır",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Əməliyyat adı",
+  "nodes.humanInput.userActions.buttonStyle.accent": "Vurğulu",
+  "nodes.humanInput.userActions.buttonStyle.default": "Standart",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "Şəffaf",
+  "nodes.humanInput.userActions.buttonStyle.primary": "Əsas",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "Əməliyyat dəyəri",
   "nodes.humanInput.userActions.buttonTextTooLong": "Düymə mətni ən çox {{maxLength}} simvoldan ibarət olmalıdır",
   "nodes.humanInput.userActions.chooseStyle": "Düymə üslubu seçin",

web/i18n/locales/de-DE/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "Aktions-ID muss mit einem Buchstaben oder Unterstrich beginnen, gefolgt von Buchstaben, Zahlen oder Unterstrichen",
   "nodes.humanInput.userActions.actionIdTooLong": "Aktions-ID darf höchstens {{maxLength}} Zeichen lang sein",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Aktionsname",
+  "nodes.humanInput.userActions.buttonStyle.accent": "Akzent",
+  "nodes.humanInput.userActions.buttonStyle.default": "Standard",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "Transparent",
+  "nodes.humanInput.userActions.buttonStyle.primary": "Primär",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "Aktionswert",
   "nodes.humanInput.userActions.buttonTextTooLong": "Schaltflächentext darf höchstens {{maxLength}} Zeichen lang sein",
   "nodes.humanInput.userActions.chooseStyle": "Wählen Sie einen Schaltflächenstil",

web/i18n/locales/en-US/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "Action ID must start with a letter or underscores, followed by letters, numbers, or underscores",
   "nodes.humanInput.userActions.actionIdTooLong": "Action ID must be {{maxLength}} characters or less",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Action Name",
+  "nodes.humanInput.userActions.buttonStyle.accent": "Accent",
+  "nodes.humanInput.userActions.buttonStyle.default": "Default",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "Ghost",
+  "nodes.humanInput.userActions.buttonStyle.primary": "Primary",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "Action Value",
   "nodes.humanInput.userActions.buttonTextTooLong": "Button text must be {{maxLength}} characters or less",
   "nodes.humanInput.userActions.chooseStyle": "Choose a button style",

web/i18n/locales/es-ES/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "El ID de acción debe comenzar con una letra o guiones bajos, seguido de letras, números o guiones bajos",
   "nodes.humanInput.userActions.actionIdTooLong": "El ID de acción debe tener {{maxLength}} caracteres o menos",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Nombre de Acción",
+  "nodes.humanInput.userActions.buttonStyle.accent": "Acento",
+  "nodes.humanInput.userActions.buttonStyle.default": "Predeterminado",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "Transparente",
+  "nodes.humanInput.userActions.buttonStyle.primary": "Principal",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "Valor de la Acción",
   "nodes.humanInput.userActions.buttonTextTooLong": "El texto del botón debe tener {{maxLength}} caracteres o menos",
   "nodes.humanInput.userActions.chooseStyle": "Elija un estilo de botón",

web/i18n/locales/fa-IR/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "شناسه عملیات باید با حرف یا زیرخط شروع شود و فقط شامل حروف، اعداد و زیرخط باشد",
   "nodes.humanInput.userActions.actionIdTooLong": "شناسه عملیات باید {{maxLength}} کاراکتر یا کمتر باشد",
   "nodes.humanInput.userActions.actionNamePlaceholder": "نام عملیات",
+  "nodes.humanInput.userActions.buttonStyle.accent": "تأکیدی",
+  "nodes.humanInput.userActions.buttonStyle.default": "پیش‌فرض",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "شفاف",
+  "nodes.humanInput.userActions.buttonStyle.primary": "اصلی",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "مقدار عملیات",
   "nodes.humanInput.userActions.buttonTextTooLong": "متن دکمه باید {{maxLength}} کاراکتر یا کمتر باشد",
   "nodes.humanInput.userActions.chooseStyle": "انتخاب سبک دکمه",

web/i18n/locales/fr-FR/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "L'ID d'action doit commencer par une lettre ou des traits de soulignement, suivi de lettres, de chiffres ou de traits de soulignement",
   "nodes.humanInput.userActions.actionIdTooLong": "L'ID d'action doit comporter {{maxLength}} caractères ou moins",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Nom de l'Action",
+  "nodes.humanInput.userActions.buttonStyle.accent": "Accentué",
+  "nodes.humanInput.userActions.buttonStyle.default": "Par défaut",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "Transparent",
+  "nodes.humanInput.userActions.buttonStyle.primary": "Principal",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "Valeur de l'action",
   "nodes.humanInput.userActions.buttonTextTooLong": "Le texte du bouton doit comporter {{maxLength}} caractères ou moins",
   "nodes.humanInput.userActions.chooseStyle": "Choisissez un style de bouton",

web/i18n/locales/hi-IN/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "कार्रवाई आईडी एक अक्षर या अंडरस्कोर से शुरू होनी चाहिए, उसके बाद अक्षर, संख्याएं या अंडरस्कोर हो सकते हैं",
   "nodes.humanInput.userActions.actionIdTooLong": "कार्रवाई आईडी {{maxLength}} वर्ण या उससे कम होनी चाहिए",
   "nodes.humanInput.userActions.actionNamePlaceholder": "कार्रवाई नाम",
+  "nodes.humanInput.userActions.buttonStyle.accent": "विशिष्ट",
+  "nodes.humanInput.userActions.buttonStyle.default": "डिफ़ॉल्ट",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "पारदर्शी",
+  "nodes.humanInput.userActions.buttonStyle.primary": "प्राथमिक",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "क्रिया मूल्य",
   "nodes.humanInput.userActions.buttonTextTooLong": "बटन पाठ {{maxLength}} वर्ण या उससे कम होना चाहिए",
   "nodes.humanInput.userActions.chooseStyle": "बटन शैली चुनें",

web/i18n/locales/id-ID/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "ID tindakan harus dimulai dengan huruf atau garis bawah, diikuti dengan huruf, angka, atau garis bawah",
   "nodes.humanInput.userActions.actionIdTooLong": "ID tindakan harus {{maxLength}} karakter atau kurang",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Nama Tindakan",
+  "nodes.humanInput.userActions.buttonStyle.accent": "Aksen",
+  "nodes.humanInput.userActions.buttonStyle.default": "Bawaan",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "Transparan",
+  "nodes.humanInput.userActions.buttonStyle.primary": "Utama",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "Nilai Tindakan",
   "nodes.humanInput.userActions.buttonTextTooLong": "Teks tombol harus {{maxLength}} karakter atau kurang",
   "nodes.humanInput.userActions.chooseStyle": "Pilih gaya tombol",

web/i18n/locales/it-IT/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "L'ID azione deve iniziare con una lettera o underscore, seguito da lettere, numeri o underscore",
   "nodes.humanInput.userActions.actionIdTooLong": "L'ID azione deve essere di {{maxLength}} caratteri o meno",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Nome Azione",
+  "nodes.humanInput.userActions.buttonStyle.accent": "Accento",
+  "nodes.humanInput.userActions.buttonStyle.default": "Predefinito",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "Trasparente",
+  "nodes.humanInput.userActions.buttonStyle.primary": "Principale",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "Valore dell'azione",
   "nodes.humanInput.userActions.buttonTextTooLong": "Il testo del pulsante deve essere di {{maxLength}} caratteri o meno",
   "nodes.humanInput.userActions.chooseStyle": "Scegli uno stile del pulsante",

web/i18n/locales/ja-JP/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "アクションIDは文字またはアンダースコアで始まり、その後に文字、数字、またはアンダースコアが続く必要があります",
   "nodes.humanInput.userActions.actionIdTooLong": "アクションIDは{{maxLength}}文字以下である必要があります",
   "nodes.humanInput.userActions.actionNamePlaceholder": "アクション名",
+  "nodes.humanInput.userActions.buttonStyle.accent": "アクセント",
+  "nodes.humanInput.userActions.buttonStyle.default": "デフォルト",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "ゴースト",
+  "nodes.humanInput.userActions.buttonStyle.primary": "プライマリ",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "アクション値",
   "nodes.humanInput.userActions.buttonTextTooLong": "ボタンテキストは{{maxLength}}文字以下である必要があります",
   "nodes.humanInput.userActions.chooseStyle": "ボタンスタイルを選択",

web/i18n/locales/ko-KR/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "작업 ID는 문자 또는 밑줄로 시작하고 그 뒤에 문자, 숫자 또는 밑줄이 와야 합니다",
   "nodes.humanInput.userActions.actionIdTooLong": "작업 ID는 {{maxLength}}자 이하여야 합니다",
   "nodes.humanInput.userActions.actionNamePlaceholder": "작업 이름",
+  "nodes.humanInput.userActions.buttonStyle.accent": "강조",
+  "nodes.humanInput.userActions.buttonStyle.default": "기본",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "고스트",
+  "nodes.humanInput.userActions.buttonStyle.primary": "주요",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "액션 값",
   "nodes.humanInput.userActions.buttonTextTooLong": "버튼 텍스트는 {{maxLength}}자 이하여야 합니다",
   "nodes.humanInput.userActions.chooseStyle": "버튼 스타일 선택",

web/i18n/locales/lo-LA/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "ໄອດີການດຳເນີນການຕ້ອງເລີ່ມດ້ວຍຕົວອັກສອນ ຫຼື ຂີດກ້ອງ, ຕາມດ້ວຍຕົວອັກສອນ, ຕົວເລກ ຫຼື ຂີດກ້ອງ",
   "nodes.humanInput.userActions.actionIdTooLong": "ໄອດີການດຳເນີນການຕ້ອງບໍ່ເກີນ {{maxLength}} ຕົວອັກສອນ",
   "nodes.humanInput.userActions.actionNamePlaceholder": "ຊື່ການດຳເນີນການ",
+  "nodes.humanInput.userActions.buttonStyle.accent": "ເນັ້ນ",
+  "nodes.humanInput.userActions.buttonStyle.default": "ຄ່າເລີ່ມຕົ້ນ",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "ໂປ່ງໃສ",
+  "nodes.humanInput.userActions.buttonStyle.primary": "ຫຼັກ",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "ຄ່າການດຳເນີນການ",
   "nodes.humanInput.userActions.buttonTextTooLong": "ຂໍ້ຄວາມປຸ່ມຕ້ອງບໍ່ເກີນ {{maxLength}} ຕົວອັກສອນ",
   "nodes.humanInput.userActions.chooseStyle": "ເລືອກຮູບແບບປຸ່ມ",

web/i18n/locales/nl-NL/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "Action ID must start with a letter or underscores, followed by letters, numbers, or underscores",
   "nodes.humanInput.userActions.actionIdTooLong": "Action ID must be {{maxLength}} characters or less",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Action Name",
+  "nodes.humanInput.userActions.buttonStyle.accent": "Accent",
+  "nodes.humanInput.userActions.buttonStyle.default": "Standaard",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "Transparant",
+  "nodes.humanInput.userActions.buttonStyle.primary": "Primair",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "Actiewaarde",
   "nodes.humanInput.userActions.buttonTextTooLong": "Button text must be {{maxLength}} characters or less",
   "nodes.humanInput.userActions.chooseStyle": "Choose a button style",

web/i18n/locales/pl-PL/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "Identyfikator akcji musi zaczynać się od litery lub podkreślenia, po którym następują litery, cyfry lub podkreślenia",
   "nodes.humanInput.userActions.actionIdTooLong": "Identyfikator akcji musi mieć {{maxLength}} znaków lub mniej",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Nazwa akcji",
+  "nodes.humanInput.userActions.buttonStyle.accent": "Akcent",
+  "nodes.humanInput.userActions.buttonStyle.default": "Domyślny",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "Przezroczysty",
+  "nodes.humanInput.userActions.buttonStyle.primary": "Główny",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "Wartość akcji",
   "nodes.humanInput.userActions.buttonTextTooLong": "Tekst przycisku musi mieć {{maxLength}} znaków lub mniej",
   "nodes.humanInput.userActions.chooseStyle": "Wybierz styl przycisku",

web/i18n/locales/pt-BR/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "O ID da ação deve começar com uma letra ou sublinhados, seguido de letras, números ou sublinhados",
   "nodes.humanInput.userActions.actionIdTooLong": "O ID da ação deve ter {{maxLength}} caracteres ou menos",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Nome da Ação",
+  "nodes.humanInput.userActions.buttonStyle.accent": "Destaque",
+  "nodes.humanInput.userActions.buttonStyle.default": "Padrão",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "Transparente",
+  "nodes.humanInput.userActions.buttonStyle.primary": "Principal",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "Valor da Ação",
   "nodes.humanInput.userActions.buttonTextTooLong": "O texto do botão deve ter {{maxLength}} caracteres ou menos",
   "nodes.humanInput.userActions.chooseStyle": "Escolha um estilo de botão",

web/i18n/locales/ro-RO/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "ID-ul acțiunii trebuie să înceapă cu o literă sau underscore, urmat de litere, cifre sau underscore",
   "nodes.humanInput.userActions.actionIdTooLong": "ID-ul acțiunii trebuie să fie de {{maxLength}} caractere sau mai puțin",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Nume acțiune",
+  "nodes.humanInput.userActions.buttonStyle.accent": "Accent",
+  "nodes.humanInput.userActions.buttonStyle.default": "Implicit",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "Transparent",
+  "nodes.humanInput.userActions.buttonStyle.primary": "Principal",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "Valoarea Acțiunii",
   "nodes.humanInput.userActions.buttonTextTooLong": "Textul butonului trebuie să fie de {{maxLength}} caractere sau mai puțin",
   "nodes.humanInput.userActions.chooseStyle": "Alegeți un stil de buton",

web/i18n/locales/ru-RU/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "Идентификатор действия должен начинаться с буквы или подчеркивания, за которым следуют буквы, цифры или подчеркивания",
   "nodes.humanInput.userActions.actionIdTooLong": "Идентификатор действия должен содержать не более {{maxLength}} символов",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Название действия",
+  "nodes.humanInput.userActions.buttonStyle.accent": "Акцентный",
+  "nodes.humanInput.userActions.buttonStyle.default": "По умолчанию",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "Прозрачный",
+  "nodes.humanInput.userActions.buttonStyle.primary": "Основной",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "Значение действия",
   "nodes.humanInput.userActions.buttonTextTooLong": "Текст кнопки должен содержать не более {{maxLength}} символов",
   "nodes.humanInput.userActions.chooseStyle": "Выберите стиль кнопки",

web/i18n/locales/sl-SI/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "ID dejanja se mora začeti s črko ali podčrtajem, ki mu sledijo črke, številke ali podčrtaji",
   "nodes.humanInput.userActions.actionIdTooLong": "ID dejanja mora biti {{maxLength}} znakov ali manj",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Ime dejanja",
+  "nodes.humanInput.userActions.buttonStyle.accent": "Poudarjeno",
+  "nodes.humanInput.userActions.buttonStyle.default": "Privzeto",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "Prosojno",
+  "nodes.humanInput.userActions.buttonStyle.primary": "Primarno",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "Vrednost dejanja",
   "nodes.humanInput.userActions.buttonTextTooLong": "Besedilo gumba mora biti {{maxLength}} znakov ali manj",
   "nodes.humanInput.userActions.chooseStyle": "Izberite slog gumba",

web/i18n/locales/th-TH/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "ID การดำเนินการต้องเริ่มต้นด้วยตัวอักษรหรือขีดล่าง ตามด้วยตัวอักษร ตัวเลข หรือขีดล่าง",
   "nodes.humanInput.userActions.actionIdTooLong": "ID การดำเนินการต้องมีความยาว {{maxLength}} ตัวอักษรหรือน้อยกว่า",
   "nodes.humanInput.userActions.actionNamePlaceholder": "ชื่อการดำเนินการ",
+  "nodes.humanInput.userActions.buttonStyle.accent": "เน้น",
+  "nodes.humanInput.userActions.buttonStyle.default": "ค่าเริ่มต้น",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "โปร่งใส",
+  "nodes.humanInput.userActions.buttonStyle.primary": "หลัก",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "ค่าการดำเนินการ",
   "nodes.humanInput.userActions.buttonTextTooLong": "ข้อความบนปุ่มต้องมีความยาว {{maxLength}} ตัวอักษรหรือน้อยกว่า",
   "nodes.humanInput.userActions.chooseStyle": "เลือกสไตล์ปุ่ม",

web/i18n/locales/tr-TR/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "Eylem kimliği bir harf veya alt çizgi ile başlamalı, ardından harf, rakam veya alt çizgi gelmelidir",
   "nodes.humanInput.userActions.actionIdTooLong": "Eylem kimliği {{maxLength}} karakter veya daha az olmalıdır",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Eylem Adı",
+  "nodes.humanInput.userActions.buttonStyle.accent": "Vurgulu",
+  "nodes.humanInput.userActions.buttonStyle.default": "Varsayılan",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "Şeffaf",
+  "nodes.humanInput.userActions.buttonStyle.primary": "Birincil",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "Eylem Değeri",
   "nodes.humanInput.userActions.buttonTextTooLong": "Düğme metni {{maxLength}} karakter veya daha az olmalıdır",
   "nodes.humanInput.userActions.chooseStyle": "Bir düğme stili seçin",

web/i18n/locales/uk-UA/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "Ідентифікатор дії повинен починатися з літери або підкреслення, за яким слідують літери, цифри або підкреслення",
   "nodes.humanInput.userActions.actionIdTooLong": "Ідентифікатор дії повинен містити не більше {{maxLength}} символів",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Назва дії",
+  "nodes.humanInput.userActions.buttonStyle.accent": "Акцентний",
+  "nodes.humanInput.userActions.buttonStyle.default": "Типовий",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "Прозорий",
+  "nodes.humanInput.userActions.buttonStyle.primary": "Основний",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "Значення дії",
   "nodes.humanInput.userActions.buttonTextTooLong": "Текст кнопки повинен містити не більше {{maxLength}} символів",
   "nodes.humanInput.userActions.chooseStyle": "Виберіть стиль кнопки",

web/i18n/locales/vi-VN/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "ID hành động phải bắt đầu bằng chữ cái hoặc dấu gạch dưới, theo sau là chữ cái, số hoặc dấu gạch dưới",
   "nodes.humanInput.userActions.actionIdTooLong": "ID hành động phải có {{maxLength}} ký tự trở xuống",
   "nodes.humanInput.userActions.actionNamePlaceholder": "Tên Hành động",
+  "nodes.humanInput.userActions.buttonStyle.accent": "Nổi bật",
+  "nodes.humanInput.userActions.buttonStyle.default": "Mặc định",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "Trong suốt",
+  "nodes.humanInput.userActions.buttonStyle.primary": "Chính",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "Giá trị Hành động",
   "nodes.humanInput.userActions.buttonTextTooLong": "Văn bản nút phải có {{maxLength}} ký tự trở xuống",
   "nodes.humanInput.userActions.chooseStyle": "Chọn kiểu nút",

web/i18n/locales/zh-Hans/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "操作 ID 必须以字母或下划线开头，后跟字母、数字或下划线",
   "nodes.humanInput.userActions.actionIdTooLong": "操作 ID 不能超过 {{maxLength}} 个字符",
   "nodes.humanInput.userActions.actionNamePlaceholder": "操作名称",
+  "nodes.humanInput.userActions.buttonStyle.accent": "强调色",
+  "nodes.humanInput.userActions.buttonStyle.default": "默认",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "幽灵",
+  "nodes.humanInput.userActions.buttonStyle.primary": "主要",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "操作值",
   "nodes.humanInput.userActions.buttonTextTooLong": "按钮文本不能超过 {{maxLength}} 个字符",
   "nodes.humanInput.userActions.chooseStyle": "选择按钮样式",

web/i18n/locales/zh-Hant/workflow.json

@@ -643,6 +643,10 @@
   "nodes.humanInput.userActions.actionIdFormatTip": "操作 ID 必須以字母或下劃線開頭,後跟字母、數字或下劃線",
   "nodes.humanInput.userActions.actionIdTooLong": "操作 ID 不能超過{{maxLength}}個字符",
   "nodes.humanInput.userActions.actionNamePlaceholder": "操作名稱",
+  "nodes.humanInput.userActions.buttonStyle.accent": "強調色",
+  "nodes.humanInput.userActions.buttonStyle.default": "預設",
+  "nodes.humanInput.userActions.buttonStyle.ghost": "幽靈",
+  "nodes.humanInput.userActions.buttonStyle.primary": "主要",
   "nodes.humanInput.userActions.buttonTextPlaceholder": "操作值",
   "nodes.humanInput.userActions.buttonTextTooLong": "按鈕文本不能超過{{maxLength}}個字符",
   "nodes.humanInput.userActions.chooseStyle": "選擇按鈕樣式",