@elementor/editor-editing-panel 3.33.0-176 → 3.33.0-178

package/dist/index.d.mts

@@ -45,6 +45,7 @@ type SectionContentProps = PropsWithChildren<{
     sx?: {
         pt?: number;
     };
+    'aria-label'?: string;
 }>;
 declare const SectionContent: FC<SectionContentProps>;
 
@@ -313,13 +314,14 @@ declare const controlTypes: {
         };
     };
     readonly text: {
-        readonly component: ControlComponent<({ placeholder, error, inputValue, inputDisabled, helperText, sx, }: {
+        readonly component: ControlComponent<({ placeholder, error, inputValue, inputDisabled, helperText, sx, ariaLabel, }: {
             placeholder?: string;
             error?: boolean;
             inputValue?: string;
             inputDisabled?: boolean;
             helperText?: string;
             sx?: _mui_system.SxProps;
+            ariaLabel?: string;
         }) => react.JSX.Element>;
         readonly layout: "full";
         readonly propTypeUtil: {
@@ -347,8 +349,9 @@ declare const controlTypes: {
         };
     };
     readonly textarea: {
-        readonly component: ControlComponent<({ placeholder }: {
+        readonly component: ControlComponent<({ placeholder, ariaLabel }: {
             placeholder?: string;
+            ariaLabel?: string;
         }) => react.JSX.Element>;
         readonly layout: "full";
         readonly propTypeUtil: {
@@ -650,6 +653,7 @@ declare const controlTypes: {
             }[];
             onChange?: (newValue: string | null, previousValue: string | null | undefined) => void;
             MenuProps?: _mui_material.SelectProps["MenuProps"];
+            ariaLabel?: string;
         } & {
             collectionId?: "off-canvas";
         }) => react.JSX.Element>;
@@ -688,6 +692,7 @@ declare const controlTypes: {
             minInputLength?: number;
             placeholder?: string;
             label?: string;
+            ariaLabel?: string;
         } & {
             context: {
                 elementId: string;
@@ -767,6 +772,7 @@ declare const controlTypes: {
             minInputLength?: number;
             placeholder?: string;
             onSetValue?: (value: any | null) => void;
+            ariaLabel?: string;
         }) => react.JSX.Element>;
         readonly layout: "full";
         readonly propTypeUtil: {
@@ -833,8 +839,9 @@ declare const controlTypes: {
         };
     };
     readonly url: {
-        readonly component: ControlComponent<({ placeholder }: {
+        readonly component: ControlComponent<({ placeholder, ariaLabel }: {
             placeholder?: string;
+            ariaLabel?: string;
         }) => react.JSX.Element>;
         readonly layout: "full";
         readonly propTypeUtil: {

package/dist/index.d.ts

@@ -45,6 +45,7 @@ type SectionContentProps = PropsWithChildren<{
     sx?: {
         pt?: number;
     };
+    'aria-label'?: string;
 }>;
 declare const SectionContent: FC<SectionContentProps>;
 
@@ -313,13 +314,14 @@ declare const controlTypes: {
         };
     };
     readonly text: {
-        readonly component: ControlComponent<({ placeholder, error, inputValue, inputDisabled, helperText, sx, }: {
+        readonly component: ControlComponent<({ placeholder, error, inputValue, inputDisabled, helperText, sx, ariaLabel, }: {
             placeholder?: string;
             error?: boolean;
             inputValue?: string;
             inputDisabled?: boolean;
             helperText?: string;
             sx?: _mui_system.SxProps;
+            ariaLabel?: string;
         }) => react.JSX.Element>;
         readonly layout: "full";
         readonly propTypeUtil: {
@@ -347,8 +349,9 @@ declare const controlTypes: {
         };
     };
     readonly textarea: {
-        readonly component: ControlComponent<({ placeholder }: {
+        readonly component: ControlComponent<({ placeholder, ariaLabel }: {
             placeholder?: string;
+            ariaLabel?: string;
         }) => react.JSX.Element>;
         readonly layout: "full";
         readonly propTypeUtil: {
@@ -650,6 +653,7 @@ declare const controlTypes: {
             }[];
             onChange?: (newValue: string | null, previousValue: string | null | undefined) => void;
             MenuProps?: _mui_material.SelectProps["MenuProps"];
+            ariaLabel?: string;
         } & {
             collectionId?: "off-canvas";
         }) => react.JSX.Element>;
@@ -688,6 +692,7 @@ declare const controlTypes: {
             minInputLength?: number;
             placeholder?: string;
             label?: string;
+            ariaLabel?: string;
         } & {
             context: {
                 elementId: string;
@@ -767,6 +772,7 @@ declare const controlTypes: {
             minInputLength?: number;
             placeholder?: string;
             onSetValue?: (value: any | null) => void;
+            ariaLabel?: string;
         }) => react.JSX.Element>;
         readonly layout: "full";
         readonly propTypeUtil: {
@@ -833,8 +839,9 @@ declare const controlTypes: {
         };
     };
     readonly url: {
-        readonly component: ControlComponent<({ placeholder }: {
+        readonly component: ControlComponent<({ placeholder, ariaLabel }: {
             placeholder?: string;
+            ariaLabel?: string;
         }) => react.JSX.Element>;
         readonly layout: "full";
         readonly propTypeUtil: {

package/dist/index.js

@@ -1651,7 +1651,7 @@ var PopoverBody = (props) => {
 // src/components/section-content.tsx
 var React13 = __toESM(require("react"));
 var import_ui8 = require("@elementor/ui");
-var SectionContent = ({ gap = 2, sx, children }) => /* @__PURE__ */ React13.createElement(import_ui8.Stack, { gap, sx: { ...sx } }, children);
+var SectionContent = ({ gap = 2, sx, children, "aria-label": ariaLabel }) => /* @__PURE__ */ React13.createElement(import_ui8.Stack, { gap, sx: { ...sx }, "aria-label": ariaLabel }, children);
 
 // src/components/style-sections/typography-section/hooks/use-font-families.ts
 var import_react15 = require("react");
@@ -2629,17 +2629,29 @@ var StylesFieldLayout = React28.forwardRef((props, ref) => {
 });
 var Row = React28.forwardRef(
   ({ label, children }, ref) => {
-    return /* @__PURE__ */ React28.createElement(import_ui20.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref }, /* @__PURE__ */ React28.createElement(import_ui20.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(ControlLabel, null, label)), /* @__PURE__ */ React28.createElement(
+    return /* @__PURE__ */ React28.createElement(
       import_ui20.Grid,
       {
-        item: true,
-        xs: 6,
-        sx: (theme) => ({
-          width: `calc(50% - ${theme.spacing(2)})`
-        })
+        container: true,
+        gap: 2,
+        alignItems: "center",
+        flexWrap: "nowrap",
+        ref,
+        "aria-label": `${label} control`
       },
-      children
-    ));
+      /* @__PURE__ */ React28.createElement(import_ui20.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React28.createElement(ControlLabel, null, label)),
+      /* @__PURE__ */ React28.createElement(
+        import_ui20.Grid,
+        {
+          item: true,
+          xs: 6,
+          sx: (theme) => ({
+            width: `calc(50% - ${theme.spacing(2)})`
+          })
+        },
+        children
+      )
+    );
   }
 );
 var Column = React28.forwardRef(
@@ -3889,7 +3901,8 @@ var CollapsibleContent = ({ children, defaultOpen = false, titleEnd = null }) =>
       variant: "outlined",
       onClick: handleToggle,
       endIcon: /* @__PURE__ */ React57.createElement(CollapseIcon, { open }),
-      sx: { my: 0.5 }
+      sx: { my: 0.5 },
+      "aria-label": open ? "Show less" : "Show more"
     },
     open ? (0, import_i18n39.__)("Show less", "elementor") : (0, import_i18n39.__)("Show more", "elementor")
   ), titleEnd && /* @__PURE__ */ React57.createElement(IndicatorsWrapper, null, getCollapsibleValue(titleEnd, open))), /* @__PURE__ */ React57.createElement(import_ui34.Collapse, { in: open, timeout: "auto", unmountOnExit: true }, children));
@@ -4401,6 +4414,7 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
     {
       id: labelId,
       "aria-controls": contentId,
+      "aria-label": `${title} section`,
       onClick: handleClick,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
@@ -4422,7 +4436,7 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
       timeout: "auto",
       unmountOnExit
     },
-    /* @__PURE__ */ React79.createElement(SectionRefContext.Provider, { value: ref }, /* @__PURE__ */ React79.createElement(import_ui37.Stack, { ref, gap: 2.5, p: 2 }, children))
+    /* @__PURE__ */ React79.createElement(SectionRefContext.Provider, { value: ref }, /* @__PURE__ */ React79.createElement(import_ui37.Stack, { ref, gap: 2.5, p: 2, "aria-label": `${title} section content` }, children))
   ), /* @__PURE__ */ React79.createElement(import_ui37.Divider, null));
 }
 
@@ -5715,7 +5729,7 @@ var DynamicSelection = ({ close: closePopover }) => {
       label: item.label
     }))
   ]);
-  return /* @__PURE__ */ React95.createElement(PopoverBody, null, /* @__PURE__ */ React95.createElement(
+  return /* @__PURE__ */ React95.createElement(PopoverBody, { "aria-label": (0, import_i18n65.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React95.createElement(
     import_editor_ui7.PopoverHeader,
     {
       title: (0, import_i18n65.__)("Dynamic tags", "elementor"),
@@ -5833,7 +5847,7 @@ var DynamicSelectionControl = () => {
       },
       ...(0, import_ui48.bindPopover)(selectionPopoverState)
     },
-    /* @__PURE__ */ React96.createElement(PopoverBody, null, /* @__PURE__ */ React96.createElement(DynamicSelection, { close: selectionPopoverState.close }))
+    /* @__PURE__ */ React96.createElement(PopoverBody, { "aria-label": (0, import_i18n66.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ React96.createElement(DynamicSelection, { close: selectionPopoverState.close }))
   ));
 };
 var DynamicSettingsPopover = ({ dynamicTag }) => {
@@ -5842,7 +5856,15 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
   if (!hasDynamicSettings) {
     return null;
   }
-  return /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement(import_ui48.IconButton, { size: SIZE7, ...(0, import_ui48.bindTrigger)(popupState), "aria-label": (0, import_i18n66.__)("Settings", "elementor") }, /* @__PURE__ */ React96.createElement(import_icons28.SettingsIcon, { fontSize: SIZE7 })), /* @__PURE__ */ React96.createElement(
+  return /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement(
+    import_ui48.IconButton,
+    {
+      size: SIZE7,
+      ...(0, import_ui48.bindTrigger)(popupState),
+      "aria-label": (0, import_i18n66.__)("Dynamic settings", "elementor")
+    },
+    /* @__PURE__ */ React96.createElement(import_icons28.SettingsIcon, { fontSize: SIZE7 })
+  ), /* @__PURE__ */ React96.createElement(
     import_ui48.Popover,
     {
       disablePortal: true,
@@ -5854,7 +5876,7 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
       },
       ...(0, import_ui48.bindPopover)(popupState)
     },
-    /* @__PURE__ */ React96.createElement(PopoverBody, null, /* @__PURE__ */ React96.createElement(
+    /* @__PURE__ */ React96.createElement(PopoverBody, { "aria-label": (0, import_i18n66.__)("Dynamic settings", "elementor") }, /* @__PURE__ */ React96.createElement(
       import_editor_ui8.PopoverHeader,
       {
         title: dynamicTag.label,
@@ -5916,7 +5938,17 @@ var Control3 = ({ control }) => {
   }
   const layout = getLayout(control);
   const shouldDisablePortal = control.type === "select";
-  const controlProps = shouldDisablePortal ? { ...control.props, MenuProps: { ...control.props?.MenuProps ?? {}, disablePortal: true } } : control.props;
+  const baseControlProps = shouldDisablePortal ? {
+    ...control.props,
+    MenuProps: {
+      ...control.props?.MenuProps ?? {},
+      disablePortal: true
+    }
+  } : { ...control.props };
+  const controlProps = {
+    ...baseControlProps,
+    ariaLabel: control.label
+  };
   const isSwitchControl = control.type === "switch";
   const layoutStyleProps = layout === "two-columns" ? {
     display: "grid",