feat: improve a11y by adding aria-labels to icon-only buttons

src/components/EditorCanvas/Table.jsx

@@ -174,6 +174,7 @@ export default function Table({
               <div className="hidden group-hover:block">
                 <div className="flex justify-end items-center mx-2 space-x-1.5">
                   <Button
+                    aria-label={tableData.locked ? t("unlock") : t("lock")}
                     icon={tableData.locked ? <IconLock /> : <IconUnlock />}
                     size="small"
                     theme="solid"
@@ -184,6 +185,7 @@ export default function Table({
                     onClick={lockUnlockTable}
                   />
                   <Button
+                    aria-label={t("edit")}
                     icon={<IconEdit />}
                     size="small"
                     theme="solid"
@@ -260,6 +262,7 @@ export default function Table({
                     style={{ width: "200px", wordBreak: "break-word" }}
                   >
                     <Button
+                      aria-label={t("more")}
                       icon={<IconMore />}
                       type="tertiary"
                       size="small"
@@ -461,6 +464,7 @@ export default function Table({
         <div className="text-zinc-400">
           {hoveredField === index ? (
             <Button
+              aria-label={t("delete")}
               theme="solid"
               size="small"
               style={{

src/components/EditorSidePanel/RelationshipsTab/RelationshipInfo.jsx

@@ -216,7 +216,7 @@ export default function RelationshipInfo({ data }) {
             position="rightTop"
             showArrow
           >
-            <Button icon={<IconMore />} type="tertiary" />
+            <Button aria-label={t("more")} icon={<IconMore />} type="tertiary" />
           </Popover>
         </div>
       </div>

src/components/EditorSidePanel/TablesTab/IndexDetails.jsx

@@ -189,6 +189,7 @@ export default function IndexDetails({ data, fields, iid, tid }) {
         showArrow
       >
         <Button
+          aria-label={t("more")}
           icon={<IconMore />}
           type="tertiary"
           style={{ marginLeft: "12px" }}

src/components/EditorSidePanel/TablesTab/TableField.jsx

@@ -226,7 +226,7 @@ export default function TableField({ data, tid, index, inherited }) {
           position="right"
           showArrow
         >
-          <Button type="tertiary" icon={<IconMore />} />
+          <Button aria-label={t("more")} type="tertiary" icon={<IconMore />} />
         </Popover>
       </div>
     </div>

src/components/EditorSidePanel/TypesTab/TypeField.jsx

@@ -327,7 +327,7 @@ export default function TypeField({ data, tid, fid }) {
           trigger="click"
           position="right"
         >
-          <Button icon={<IconMore />} type="tertiary" />
+          <Button aria-label={t("more")} icon={<IconMore />} type="tertiary" />
         </Popover>
       </Col>
     </Row>

src/components/EditorSidePanel/TypesTab/TypesTab.jsx

@@ -42,7 +42,7 @@ export default function TypesTab() {
             showArrow
             position="rightTop"
           >
-            <Button theme="borderless" icon={<IconInfoCircle />} />
+            <Button aria-label={t("info")} theme="borderless" icon={<IconInfoCircle />} />
           </Popover>
         )}
       </div>

src/i18n/locales/en.js

@@ -290,6 +290,10 @@ const en = {
     type_name_required: "Type name is required",
     database: "Database",
     saved: "Saved",
+    lock: "Lock",
+    unlock: "Unlock",
+    info: "Info",
+    more: "More",
   },
 };
 

src/utils/types.js

@@ -0,0 +1,15 @@
+export function getTypeIndex(types, idOrIndex) {
+  if (typeof idOrIndex === "number") return idOrIndex;
+  if (typeof idOrIndex === "string") {
+    return types.findIndex((t) => t.id === idOrIndex);
+  }
+  return -1;
+}
+
+export function getTypeById(types, idOrIndex) {
+  const index = getTypeIndex(types, idOrIndex);
+  return {
+    type: index >= 0 ? types[index] : null,
+    index,
+  };
+}

vite.config.js

@@ -4,4 +4,28 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes("node_modules")) {
+            if (id.includes("@douyinfe/semi-ui") || id.includes("@douyinfe/semi-icons")) {
+              return "semi-ui";
+            }
+            if (id.includes("@lexical") || id.includes("lexical")) {
+              return "lexical";
+            }
+            if (id.includes("node-sql-parser") || id.includes("oracle-sql-parser")) {
+              return "sql-parser";
+            }
+            if (id.includes("lodash") || id.includes("luxon") || id.includes("axios")) {
+              return "utils";
+            }
+            return "vendor";
+          }
+        },
+      },
+    },
+    chunkSizeWarningLimit: 1000,
+  },
+});