chore: add aria-label for block menu

packages/core/client/src/schema-initializer/SchemaInitializer.tsx

@@ -473,18 +473,21 @@ SchemaInitializer.Item = function Item(props: SchemaInitializerItemProps) {
     };
 
     const item = {
+      ...props,
       key: info.key,
       label: isString(children) ? compile(children) : children,
       icon: typeof icon === 'string' ? <Icon type={icon as string} /> : icon,
       children: renderMenuItem(items, info.key),
     };
 
-    collectMenuItem(item);
+    collectMenuItem(item as any);
     return null;
   }
 
   const label = isString(children) ? compile(children) : children;
   const item = {
+    role: props?.role,
+    'aria-label': props?.['aria-label'],
     key: info.key,
     label,
     title: label,

packages/core/client/src/schema-initializer/buttons/BlockInitializers.tsx

@@ -12,48 +12,64 @@ export const BlockInitializers = {
       title: '{{t("Data blocks")}}',
       children: [
         {
+          role: 'button',
+          'aria-label': 'data-block-table',
           key: 'table',
           type: 'item',
           title: '{{t("Table")}}',
           component: 'TableBlockInitializer',
         },
         {
+          role: 'button',
+          'aria-label': 'data-block-form',
           key: 'form',
           type: 'item',
           title: '{{t("Form")}}',
           component: 'FormBlockInitializer',
         },
         {
+          role: 'button',
+          'aria-label': 'data-block-details',
           key: 'details',
           type: 'item',
           title: '{{t("Details")}}',
           component: 'DetailsBlockInitializer',
         },
         {
+          role: 'button',
+          'aria-label': 'data-block-list',
           key: 'List',
           type: 'item',
           title: '{{t("List")}}',
           component: 'ListBlockInitializer',
         },
         {
+          role: 'button',
+          'aria-label': 'data-block-grid-card',
           key: 'GridCard',
           type: 'item',
           title: '{{t("Grid Card")}}',
           component: 'GridCardBlockInitializer',
         },
         {
+          role: 'button',
+          'aria-label': 'data-block-calendar',
           key: 'calendar',
           type: 'item',
           title: '{{t("Calendar")}}',
           component: 'CalendarBlockInitializer',
         },
         {
+          role: 'button',
+          'aria-label': 'data-block-kanban',
           key: 'kanban',
           type: 'item',
           title: '{{t("Kanban")}}',
           component: 'KanbanBlockInitializer',
         },
         {
+          role: 'button',
+          'aria-label': 'data-block-gantt',
           key: 'Gantt',
           type: 'item',
           title: '{{t("Gantt")}}',
@@ -67,12 +83,16 @@ export const BlockInitializers = {
       title: '{{t("Filter blocks")}}',
       children: [
         {
+          role: 'button',
+          'aria-label': 'filter-block-form',
           key: 'filterForm',
           type: 'item',
           title: '{{t("Form")}}',
           component: 'FilterFormBlockInitializer',
         },
         {
+          role: 'button',
+          'aria-label': 'filter-block-collapse',
           key: 'filterCollapse',
           type: 'item',
           title: '{{t("Collapse")}}',
@@ -86,12 +106,16 @@ export const BlockInitializers = {
       title: '{{t("Other blocks")}}',
       children: [
         {
+          role: 'button',
+          'aria-label': 'block-markdown',
           key: 'markdown',
           type: 'item',
           title: '{{t("Markdown")}}',
           component: 'MarkdownBlockInitializer',
         },
         {
+          role: 'button',
+          'aria-label': 'block-audit-logs',
           key: 'auditLogs',
           type: 'item',
           title: '{{t("Audit logs")}}',

packages/core/client/src/schema-initializer/types.ts

@@ -63,6 +63,7 @@ interface SchemaInitializerItemComponentProps {
 export interface SchemaInitializerItemProps extends Omit<MenuItemProps, 'onClick'> {
   items?: SchemaInitializerItemOptions[];
   onClick?: MenuClickEventHandler;
+  [key: string]: any;
 }
 
 type MenuClickEventHandler = (info: MenuInfo) => void;

packages/core/client/src/schema-settings/SchemaSettings.tsx

@@ -747,7 +747,7 @@ SchemaSettings.SelectItem = function SelectItem(props) {
 
   return (
     <SchemaSettings.Item {...others}>
-      <div style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
+      <label aria-label={title} style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
         {title}
         <Select
           data-testid="antd-select"
@@ -760,7 +760,7 @@ SchemaSettings.SelectItem = function SelectItem(props) {
           onClick={onClick}
           {...moreProps}
         />
-      </div>
+      </label>
     </SchemaSettings.Item>
   );
 };

packages/plugins/@nocobase/plugin-charts/src/client/index.tsx

@@ -50,6 +50,8 @@ const ChartsProvider = React.memo((props) => {
     const hasChartItem = children.some((child) => child?.component === 'ChartBlockInitializer');
     if (!hasChartItem) {
       children.push({
+        role: 'button',
+        'aria-label': 'data-block-chart',
         key: 'chart',
         type: 'item',
         icon: 'PieChartOutlined',

packages/plugins/@nocobase/plugin-data-visualization/src/client/DataVisualization.tsx

@@ -10,6 +10,8 @@ export const DataVisualization: React.FC = (props) => {
   const has = children.some((initializer) => initializer.component === 'ChartV2BlockInitializer');
   if (!has) {
     children.push({
+      role: 'button',
+      'aria-label': 'data-block-charts',
       key: 'chart-v2',
       type: 'item',
       title: t('Charts'),