From 5c308993c6a9988cbb72d48efe0a6a05f9ca8fed Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Sun, 23 Apr 2023 14:49:28 +0800
Subject: [PATCH] feat: add required indicator for formkit label (#3824)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind improvement
/area console
/milestone 2.5.x

#### What this PR does / why we need it:

为 FormKit 表单中包含了 required 验证的表单元素的 label 添加指示器（*），优化可访问性。

<img width="694" alt="image" src="https://user-images.githubusercontent.com/21301288/233822533-6a30b43e-738a-47f3-92c1-045d34cc1ba3.png">

#### Which issue(s) this PR fixes:

Fixes #3823

#### Special notes for your reviewer:

测试方式：

1. 检查 Console 端的表单中必填项的 label 是否添加了 * 即可。

#### Does this PR introduce a user-facing change?

```release-note
为 FormKit 表单中包含了 required 验证的表单元素的 label 添加指示器（*），优化可访问性。
```
---
 console/src/formkit/formkit.config.ts         |  8 ++++-
 .../src/formkit/plugins/required-asterisk.ts  | 35 +++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 console/src/formkit/plugins/required-asterisk.ts

diff --git a/console/src/formkit/formkit.config.ts b/console/src/formkit/formkit.config.ts
index 58ea8869c..b96634922 100644
--- a/console/src/formkit/formkit.config.ts
+++ b/console/src/formkit/formkit.config.ts
@@ -21,12 +21,18 @@ import { roleSelect } from "./inputs/role-select";
 import radioAlt from "./plugins/radio-alt";
 import stopImplicitSubmission from "./plugins/stop-implicit-submission";
 import passwordPreventAutocomplete from "./plugins/password-prevent-autocomplete";
+import requiredAsterisk from "./plugins/required-asterisk";
 
 const config: DefaultConfigOptions = {
   config: {
     classes: generateClasses(theme),
   },
-  plugins: [radioAlt, stopImplicitSubmission, passwordPreventAutocomplete],
+  plugins: [
+    radioAlt,
+    stopImplicitSubmission,
+    passwordPreventAutocomplete,
+    requiredAsterisk,
+  ],
   inputs: {
     form,
     group,
diff --git a/console/src/formkit/plugins/required-asterisk.ts b/console/src/formkit/plugins/required-asterisk.ts
new file mode 100644
index 000000000..8e7740090
--- /dev/null
+++ b/console/src/formkit/plugins/required-asterisk.ts
@@ -0,0 +1,35 @@
+import type { FormKitNode } from "@formkit/core";
+
+const isCheckboxAndRadioMultiple = (node) =>
+  (node.props.type === "checkbox" || node.props.type === "radio") &&
+  node.props.options;
+
+export default function requiredAsterisk(node: FormKitNode) {
+  node.on("created", () => {
+    if (!node.props.definition) return;
+
+    const schemaFn = node.props.definition?.schema;
+
+    if (typeof schemaFn !== "function") return;
+
+    node.props.definition.schema = (sectionsSchema = {}) => {
+      const isRequired = node.props.parsedRules.some(
+        (rule) => rule.name === "required"
+      );
+
+      if (isRequired) {
+        if (isCheckboxAndRadioMultiple(node)) {
+          sectionsSchema.legend = {
+            children: ["$label", " *"],
+          };
+        } else {
+          sectionsSchema.label = {
+            children: ["$label", " *"],
+          };
+        }
+      }
+
+      return schemaFn(sectionsSchema);
+    };
+  });
+}