feat: improve locators

packages/core/client/src/icon/Icon.tsx

@@ -38,14 +38,14 @@ interface IconProps {
 export const Icon = (props: IconProps) => {
   const { type = '', component, ...restProps } = props;
   if (component) {
-    return <AntdIcon component={component} {...restProps} />;
+    return <AntdIcon role="button" component={component} {...restProps} />;
   }
   if (type && icons.has(type.toLowerCase())) {
     const IconComponent = icons.get(type.toLowerCase());
-    return <IconComponent {...restProps} />;
+    return <IconComponent role="button" {...restProps} />;
   }
   if (type && IconFont) {
-    return <IconFont type={type} />;
+    return <IconFont role="button" type={type} />;
   }
   return null;
 };

packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx

@@ -30,6 +30,7 @@ export const BlockItem: React.FC<any> = (props) => {
   return (
     <SortableItem
       data-testid={getTestId({ schema, blockName: props.name || name })}
+      role="button"
       className={cls(
         'nb-block-item',
         className,

packages/core/client/src/schema-component/antd/menu/Menu.tsx

@@ -492,7 +492,12 @@ Menu.Item = observer(
         label: (
           <SchemaContext.Provider value={schema}>
             <FieldContext.Provider value={field}>
-              <SortableItem className={designerCss} removeParentsIfNoChildren={false}>
+              <SortableItem
+                role="button"
+                aria-label={t(field.title)}
+                className={designerCss}
+                removeParentsIfNoChildren={false}
+              >
                 <Icon type={icon} />
                 <span
                   style={{

packages/core/client/src/schema-component/antd/menu/MenuItemInitializers/index.tsx

@@ -11,6 +11,7 @@ export const MenuItemInitializers = (props: any) => {
   const { t } = useTranslation();
   return (
     <SchemaInitializer.Button
+      role="button"
       insertPosition={'beforeEnd'}
       icon={'PlusOutlined'}
       insert={props.insert}

packages/core/client/src/schema-component/antd/table-v2/Table.Column.Decorator.tsx

@@ -41,7 +41,7 @@ export const TableColumnDecorator = (props) => {
     }
   }, [uiSchema?.title]);
   return (
-    <SortableItem className={designerCss}>
+    <SortableItem role="button" className={designerCss}>
       <Designer fieldSchema={fieldSchema} uiSchema={uiSchema} collectionField={collectionField} />
       {/* <RecursionField name={columnSchema.name} schema={columnSchema}/> */}
       {field?.title || compile(uiSchema?.title)}

packages/core/client/src/schema-component/antd/table-v2/Table.tsx

@@ -280,6 +280,7 @@ export const Table: any = observer(
             return (
               <th
                 {...props}
+                role="button"
                 className={cls(
                   props.className,
                   css`

packages/core/client/src/schema-component/common/sortable-item/SortableItem.tsx

@@ -38,6 +38,7 @@ export const Sortable = (props: any) => {
   return React.createElement(
     component || 'div',
     {
+      role: 'none',
       ...others,
       className: cx('nb-sortable-designer', props.className),
       ref: setNodeRef,

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

@@ -88,7 +88,12 @@ export const GeneralSchemaDesigner = (props: any) => {
           </Space>
         </div>
       )}
-      <div className={'general-schema-designer-icons'}>
+      <div
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        className={'general-schema-designer-icons'}
+      >
         <Space size={2} align={'center'}>
           {draggable && (
             <DragHandler>

packages/core/client/src/user/EditProfile.tsx

@@ -133,7 +133,7 @@ export const useEditProfile = () => {
         ctx?.setVisible(false);
       },
       label: (
-        <>
+        <div aria-label="edit-profile">
           {t('Edit profile')}
           <ActionContextProvider value={{ visible, setVisible }}>
             <div onClick={(e) => e.stopPropagation()}>
@@ -143,7 +143,7 @@ export const useEditProfile = () => {
               />
             </div>
           </ActionContextProvider>
-        </>
+        </div>
       ),
     };
   }, [visible]);

packages/core/client/src/user/LanguageSettings.tsx

@@ -19,6 +19,7 @@ export const useLanguageSettings = () => {
       },
       label: (
         <div
+          aria-label="language-settings"
           style={{
             display: 'flex',
             alignItems: 'center',

packages/core/client/src/user/SwitchRole.tsx

@@ -14,6 +14,7 @@ export const useSwitchRole = () => {
       eventKey: 'SwitchRole',
       label: (
         <div
+          aria-label="switch-role"
           style={{
             display: 'flex',
             alignItems: 'center',