@elementor/editor-controls 3.32.0-90 → 3.32.0-91

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "3.32.0-90",
+  "version": "3.32.0-91",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,21 +40,21 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "3.32.0-90",
-    "@elementor/editor-elements": "3.32.0-90",
-    "@elementor/editor-props": "3.32.0-90",
-    "@elementor/editor-responsive": "3.32.0-90",
-    "@elementor/editor-ui": "3.32.0-90",
-    "@elementor/editor-v1-adapters": "3.32.0-90",
-    "@elementor/env": "3.32.0-90",
-    "@elementor/http-client": "3.32.0-90",
+    "@elementor/editor-current-user": "3.32.0-91",
+    "@elementor/editor-elements": "3.32.0-91",
+    "@elementor/editor-props": "3.32.0-91",
+    "@elementor/editor-responsive": "3.32.0-91",
+    "@elementor/editor-ui": "3.32.0-91",
+    "@elementor/editor-v1-adapters": "3.32.0-91",
+    "@elementor/env": "3.32.0-91",
+    "@elementor/http-client": "3.32.0-91",
     "@elementor/icons": "^1.51.1",
-    "@elementor/locations": "3.32.0-90",
-    "@elementor/query": "3.32.0-90",
-    "@elementor/session": "3.32.0-90",
+    "@elementor/locations": "3.32.0-91",
+    "@elementor/query": "3.32.0-91",
+    "@elementor/session": "3.32.0-91",
     "@elementor/ui": "1.36.8",
-    "@elementor/utils": "3.32.0-90",
-    "@elementor/wp-media": "3.32.0-90",
+    "@elementor/utils": "3.32.0-91",
+    "@elementor/wp-media": "3.32.0-91",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0"
   },

package/src/components/control-label.tsx

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import { type PropsWithChildren } from 'react';
-import { Stack } from '@elementor/ui';
+import { type FormLabelProps, Stack } from '@elementor/ui';
 
 import { ControlAdornments } from '../control-adornments/control-adornments';
 import { ControlFormLabel } from './control-form-label';
 
-export const ControlLabel = ( { children }: PropsWithChildren< object > ) => {
+type ControlLabelProps = FormLabelProps & PropsWithChildren< object >;
+
+export const ControlLabel = ( { children, ...props }: ControlLabelProps ) => {
 	return (
 		<Stack direction="row" alignItems="center" justifyItems="start" gap={ 0.25 }>
-			<ControlFormLabel>{ children }</ControlFormLabel>
+			<ControlFormLabel { ...props }>{ children }</ControlFormLabel>
 			<ControlAdornments />
 		</Stack>
 	);

package/src/components/size-control/size-input.tsx

@@ -21,6 +21,7 @@ type SizeInputProps = {
 	popupState: PopupState;
 	disabled?: boolean;
 	min?: number;
+	id?: string;
 };
 
 export const SizeInput = ( {
@@ -37,6 +38,7 @@ export const SizeInput = ( {
 	popupState,
 	disabled,
 	min,
+	id,
 }: SizeInputProps ) => {
 	const unitInputBufferRef = useRef( '' );
 	const inputType = isUnitExtendedOption( unit ) ? 'text' : 'number';
@@ -115,6 +117,7 @@ export const SizeInput = ( {
 					InputProps={ InputProps }
 					inputProps={ { min, step: 'any' } }
 					isPopoverOpen={ popupState.isOpen }
+					id={ id }
 				/>
 			</Box>
 		</ControlActions>

package/src/components/size-control/text-field-inner-selection.tsx

@@ -31,6 +31,7 @@ type TextFieldInnerSelectionProps = {
 	inputProps?: TextFieldProps[ 'inputProps' ];
 	disabled?: boolean;
 	isPopoverOpen?: boolean;
+	id?: string;
 };
 
 export const TextFieldInnerSelection = forwardRef(
@@ -47,6 +48,7 @@ export const TextFieldInnerSelection = forwardRef(
 			inputProps,
 			disabled,
 			isPopoverOpen,
+			id,
 		}: TextFieldInnerSelectionProps,
 		ref
 	) => {
@@ -73,6 +75,7 @@ export const TextFieldInnerSelection = forwardRef(
 				placeholder={ placeholder ?? ( String( boundPropPlaceholder?.size ?? '' ) || undefined ) }
 				InputProps={ InputProps }
 				inputProps={ inputProps }
+				id={ id }
 			/>
 		);
 	}

package/src/components/sortable.tsx

@@ -11,6 +11,7 @@ import {
 	UnstableSortableProvider,
 	type UnstableSortableProviderProps,
 } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
 
 export const SortableProvider = < T extends number >( props: UnstableSortableProviderProps< T > ) => {
 	return (
@@ -40,7 +41,7 @@ export const SortableItem = ( { id, children, disabled }: SortableItemProps ): R
 				dropIndicationStyle,
 			}: UnstableSortableItemRenderProps ) => {
 				return (
-					<StyledListItem { ...itemProps } style={ itemStyle }>
+					<StyledListItem { ...itemProps } style={ itemStyle } tabIndex={ -1 }>
 						{ ! disabled && <SortableTrigger { ...triggerProps } style={ triggerStyle } /> }
 						{ children }
 						{ showDropIndication && <StyledDivider style={ dropIndicationStyle } /> }
@@ -74,7 +75,8 @@ const StyledListItem = styled( ListItem )`
 		box-shadow: ${ ( { theme } ) => theme.shadows[ 3 ] };
 	}
 
-	&:hover {
+	&:hover,
+	&:focus-within {
 		& .class-item-sortable-trigger {
 			visibility: visible;
 		}
@@ -82,7 +84,13 @@ const StyledListItem = styled( ListItem )`
 `;
 
 const SortableTrigger = ( props: React.HTMLAttributes< HTMLDivElement > ) => (
-	<div { ...props } role="button" className="class-item-sortable-trigger">
+	<div
+		{ ...props }
+		role="button"
+		className="class-item-sortable-trigger"
+		tabIndex={ 0 }
+		aria-label={ __( 'Drag item', 'elementor' ) }
+	>
 		<GripVerticalIcon fontSize="tiny" />
 	</div>
 );

package/src/components/unstable-repeater/actions/tooltip-add-item-action.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PlusIcon } from '@elementor/icons';
 import { Box, IconButton, Infotip } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 import { useRepeaterContext } from '../context/repeater-context';
 
@@ -12,6 +12,7 @@ export type TooltipAddItemActionProps = {
 	enableTooltip?: boolean;
 	tooltipContent?: React.ReactNode;
 	newItemIndex?: number;
+	ariaLabel?: string;
 };
 
 export const TooltipAddItemAction = ( {
@@ -19,6 +20,7 @@ export const TooltipAddItemAction = ( {
 	enableTooltip = false,
 	tooltipContent = null,
 	newItemIndex,
+	ariaLabel,
 }: TooltipAddItemActionProps ) => {
 	const { addItem } = useRepeaterContext();
 
@@ -31,7 +33,8 @@ export const TooltipAddItemAction = ( {
 					size={ SIZE }
 					disabled={ disabled }
 					onClick={ onClick }
-					aria-label={ __( 'Add item', 'elementor' ) }
+					/* Translators: %s: Aria label. */
+					aria-label={ sprintf( __( 'Add %s item', 'elementor' ), ariaLabel?.toLowerCase() ) }
 				>
 					<PlusIcon fontSize={ SIZE } />
 				</IconButton>

package/src/controls/filter-control/filter-repeater-control.tsx

@@ -56,21 +56,29 @@ export const FilterRepeaterControl = createControl( ( { filterPropName = 'filter
 				<Repeater
 					propTypeUtil={ propTypeUtil as PropTypeUtil< string, RepeatablePropValue[] > }
 					label={ label }
+					filterPropName={ filterPropName }
 				/>
 			</PropProvider>
 		</FilterConfigProvider>
 	);
 } );
 
-type RepeaterProps = { propTypeUtil: PropTypeUtil< string, RepeatablePropValue[] >; label: string };
+type RepeaterProps = {
+	propTypeUtil: PropTypeUtil< string, RepeatablePropValue[] >;
+	label: string;
+	filterPropName: string;
+};
 
-const Repeater = ( { propTypeUtil, label }: RepeaterProps ) => {
+const Repeater = ( { propTypeUtil, label, filterPropName }: RepeaterProps ) => {
 	const { getInitialValue } = useFilterConfig();
 
 	return (
 		<UnstableRepeater initial={ getInitialValue() as RepeatablePropValue } propTypeUtil={ propTypeUtil }>
 			<Header label={ label }>
-				<TooltipAddItemAction newItemIndex={ 0 } />
+				<TooltipAddItemAction
+					newItemIndex={ 0 }
+					ariaLabel={ filterPropName === 'backdrop-filter' ? 'backdrop filter' : 'filter' }
+				/>
 			</Header>
 			<ItemsContainer itemTemplate={ <Item Label={ FilterLabel } Icon={ FilterIcon } /> }>
 				<DuplicateItemAction />

package/src/controls/repeatable-control.tsx

@@ -79,7 +79,11 @@ export const RepeatableControl = createControl(
 						propTypeUtil={ childArrayPropTypeUtil as CollectionPropUtil< RepeatablePropValue > }
 					>
 						<Header label={ repeaterLabel }>
-							<TooltipAddItemAction { ...addItemTooltipProps } newItemIndex={ 0 } />
+							<TooltipAddItemAction
+								{ ...addItemTooltipProps }
+								newItemIndex={ 0 }
+								ariaLabel={ repeaterLabel }
+							/>
 						</Header>
 						<ItemsContainer
 							isSortable={ false }

package/src/controls/size-control.tsx

@@ -41,6 +41,7 @@ type BaseSizeControlProps = {
 	anchorRef?: RefObject< HTMLDivElement | null >;
 	min?: number;
 	enablePropTypeUnits?: boolean;
+	id?: string;
 };
 
 type LengthSizeControlProps = BaseSizeControlProps &
@@ -90,6 +91,7 @@ export const SizeControl = createControl(
 		disableCustom,
 		min = 0,
 		enablePropTypeUnits = false,
+		id,
 	}: Omit< SizeControlProps, 'variant' > & { variant?: SizeVariant } ) => {
 		const {
 			value: sizeValue,
@@ -219,6 +221,7 @@ export const SizeControl = createControl(
 					onClick={ onInputClick }
 					popupState={ popupState }
 					min={ min }
+					id={ id }
 				/>
 				{ anchorRef?.current && popupState.isOpen && (
 					<TextFieldPopover

package/src/controls/transform-control/functions/axis-row.tsx

@@ -18,11 +18,12 @@ type TransformAxisRowProps = {
 };
 
 export const AxisRow = ( { label, bind, startIcon, anchorRef, units, variant = 'angle' }: TransformAxisRowProps ) => {
+	const safeId = label.replace( /\s+/g, '-' ).toLowerCase();
 	return (
 		<Grid item xs={ 12 }>
 			<PopoverGridContainer ref={ anchorRef }>
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ label }</ControlLabel>
+					<ControlLabel htmlFor={ safeId }>{ label }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
 					<PropKeyProvider bind={ bind }>
@@ -32,6 +33,7 @@ export const AxisRow = ( { label, bind, startIcon, anchorRef, units, variant = '
 							units={ units }
 							variant={ variant }
 							min={ -Number.MAX_SAFE_INTEGER }
+							id={ safeId }
 						/>
 					</PropKeyProvider>
 				</Grid>

package/src/controls/transform-control/transform-repeater-control.tsx

@@ -89,6 +89,7 @@ const Repeater = ( { headerRef, propType }: { headerRef: React.RefObject< HTMLDi
 						disabled={ shouldDisableAddItem }
 						tooltipContent={ ToolTip }
 						enableTooltip={ shouldDisableAddItem }
+						ariaLabel={ 'transform' }
 					/>
 				</Header>
 				<ItemsContainer itemTemplate={ <Item Icon={ TransformIcon } Label={ TransformLabel } /> }>