Backports: Updates 6.6.0, 6.6.1, 6.6.2

assets/src/js/_acf-field-button-group.js

@@ -1,9 +1,12 @@
+import { update } from '@wordpress/icons';
+
 ( function ( $, undefined ) {
-	var Field = acf.Field.extend( {
+	const Field = acf.Field.extend( {
 		type: 'button_group',
 
 		events: {
 			'click input[type="radio"]': 'onClick',
+			'keydown label': 'onKeyDown',
 		},
 
 		$control: function () {
@@ -13,29 +16,80 @@
 		$input: function () {
 			return this.$( 'input:checked' );
 		},
+		initialize: function () {
+			this.updateButtonStates();
+		},
 
 		setValue: function ( val ) {
 			this.$( 'input[value="' + val + '"]' )
 				.prop( 'checked', true )
 				.trigger( 'change' );
+			this.updateButtonStates();
 		},
 
+		updateButtonStates: function () {
+			const labels = this.$control().find( 'label' );
+			const input = this.$input();
+			labels
+				.removeClass( 'selected' )
+				.attr( 'aria-checked', 'false' )
+				.attr( 'tabindex', '-1' );
+			if ( input.length ) {
+				// If there's a checked input, mark its parent label as selected
+				input
+					.parent( 'label' )
+					.addClass( 'selected' )
+					.attr( 'aria-checked', 'true' )
+					.attr( 'tabindex', '0' );
+			} else {
+				labels.first().attr( 'tabindex', '0' );
+			}
+		},
 		onClick: function ( e, $el ) {
-			// vars
-			var $label = $el.parent( 'label' );
-			var selected = $label.hasClass( 'selected' );
+			this.selectButton( $el.parent( 'label' ) );
+		},
+		onKeyDown: function ( event, label ) {
+			const key = event.which;
 
-			// remove previous selected
-			this.$( '.selected' ).removeClass( 'selected' );
+			// Space or Enter: select the button
+			if ( key === 13 || key === 32 ) {
+				event.preventDefault();
+				this.selectButton( label );
+				return;
+			}
+
+			// Arrow keys: move focus between buttons
+			if ( key === 37 || key === 39 || key === 38 || key === 40 ) {
+				event.preventDefault();
+				const labels = this.$control().find( 'label' );
+				const currentIndex = labels.index( label );
+				let nextIndex;
+
+				// Left/Up arrow: move to previous, wrap to last if at start
+				if ( key === 37 || key === 38 ) {
+					nextIndex =
+						currentIndex > 0 ? currentIndex - 1 : labels.length - 1;
+				}
+				// Right/Down arrow: move to next, wrap to first if at end
+				else {
+					nextIndex =
+						currentIndex < labels.length - 1 ? currentIndex + 1 : 0;
+				}
 
-			// add active class
-			$label.addClass( 'selected' );
+				const nextLabel = labels.eq( nextIndex );
+				labels.attr( 'tabindex', '-1' );
+				nextLabel.attr( 'tabindex', '0' ).trigger( 'focus' );
+			}
+		},
 
-			// allow null
-			if ( this.get( 'allow_null' ) && selected ) {
-				$label.removeClass( 'selected' );
-				$el.prop( 'checked', false ).trigger( 'change' );
+		selectButton: function ( element ) {
+			const inputRadio = element.find( 'input[type="radio"]' );
+			const isSelected = element.hasClass( 'selected' );
+			inputRadio.prop( 'checked', true ).trigger( 'change' );
+			if ( this.get( 'allow_null' ) && isSelected ) {
+				inputRadio.prop( 'checked', false ).trigger( 'change' );
 			}
+			this.updateButtonStates();
 		},
 	} );
 

assets/src/js/_acf-field-checkbox.js

@@ -7,6 +7,7 @@
 			'click .acf-add-checkbox': 'onClickAdd',
 			'click .acf-checkbox-toggle': 'onClickToggle',
 			'click .acf-checkbox-custom': 'onClickCustom',
+			'keydown input[type="checkbox"]': 'onKeyDownInput',
 		},
 
 		$control: function () {
@@ -71,24 +72,21 @@
 				.parent()
 				.find( 'input[type="text"]' )
 				.last()
-				.focus();
+				.trigger( 'focus' );
 		},
 
 		onClickToggle: function ( e, $el ) {
 			// Vars.
-			var checked = $el.prop( 'checked' );
-			var $inputs = this.$( 'input[type="checkbox"]' );
-			var $labels = this.$( 'label' );
-
-			// Update "checked" state.
-			$inputs.prop( 'checked', checked );
-
-			// Add or remove "selected" class.
-			if ( checked ) {
-				$labels.addClass( 'selected' );
-			} else {
-				$labels.removeClass( 'selected' );
-			}
+			const inputs = this.$inputs();
+			const hasUnchecked = $inputs.not( ':checked' ).length > 0;
+			inputs.each( function () {
+				$inputs.each( function () {
+					jQuery( this )
+						.prop( 'checked', hasUnchecked )
+						.trigger( 'change' );
+				} );
+			} );
+			$el.prop( 'checked', hasUnchecked );
 		},
 
 		onClickCustom: function ( e, $el ) {
@@ -109,6 +107,23 @@
 				}
 			}
 		},
+		onKeyDownInput: function ( e, $el ) {
+			// Check if Enter key (keyCode 13) was pressed
+			if ( e.which === 13 ) {
+				// Prevent default form submission
+				e.preventDefault();
+
+				// Toggle the checkbox state and trigger change event
+				$el.prop( 'checked', ! $el.prop( 'checked' ) ).trigger(
+					'change'
+				);
+
+				// If this is the "Select All" toggle checkbox, run the toggle logic
+				if ( $el.is( '.acf-checkbox-toggle' ) ) {
+					this.onClickToggle( e, $el );
+				}
+			}
+		},
 	} );
 
 	acf.registerFieldType( Field );

assets/src/js/_acf-field-color-picker.js

@@ -49,10 +49,26 @@
 				change: onChange,
 				clear: onChange,
 			};
+			if ( 'custom' === $inputText.data( 'acf-palette-type' ) ) {
+				const paletteColor = $inputText
+					.data( 'acf-palette-colors' )
+					.match(
+						/#(?:[0-9a-fA-F]{3}){1,2}|rgba?\([\s*(\d|.)+\s*,]+\)/g
+					);
+				if ( paletteColor ) {
+					let trimmed = paletteColor.map( ( color ) => color.trim() );
+					args.palettes = trimmed;
+				}
+			}
 
 			// filter
 			var args = acf.applyFilters( 'color_picker_args', args, this );
-
+			if ( Array.isArray( args.palettes ) && args.palettes.length > 10 ) {
+				// Add class for large custom palette styling
+				this.$control().addClass(
+					'acf-color-picker-large-custom-palette'
+				);
+			}
 			// initialize
 			$inputText.wpColorPicker( args );
 		},

assets/src/js/_acf-field-file.js

@@ -1,5 +1,5 @@
 ( function ( $, undefined ) {
-	var Field = acf.models.ImageField.extend( {
+	const Field = acf.models.ImageField.extend( {
 		type: 'file',
 
 		$control: function () {
@@ -9,7 +9,13 @@
 		$input: function () {
 			return this.$( 'input[type="hidden"]:first' );
 		},
-
+		events: {
+			'click a[data-name="add"]': 'onClickAdd',
+			'click a[data-name="edit"]': 'onClickEdit',
+			'click a[data-name="remove"]': 'onClickRemove',
+			'change input[type="file"]': 'onChange',
+			'keydown .file-wrap': 'onImageWrapKeydown',
+		},
 		validateAttachment: function ( attachment ) {
 			// defaults
 			attachment = attachment || {};
@@ -54,26 +60,29 @@
 			);
 
 			// vars
-			var val = attachment.id || '';
+			const val = attachment.id || '';
 
 			// update val
 			acf.val( this.$input(), val );
-
-			// update class
 			if ( val ) {
+				// update class
 				this.$control().addClass( 'has-value' );
+				const fileWrap = this.$( '.file-wrap' );
+				if ( fileWrap.length ) {
+					fileWrap.trigger( 'focus' );
+				}
 			} else {
 				this.$control().removeClass( 'has-value' );
 			}
 		},
 
 		selectAttachment: function () {
 			// vars
-			var parent = this.parent();
-			var multiple = parent && parent.get( 'type' ) === 'repeater';
+			const parent = this.parent();
+			const multiple = parent && parent.get( 'type' ) === 'repeater';
 
 			// new frame
-			var frame = acf.newMediaPopup( {
+			const frame = acf.newMediaPopup( {
 				mode: 'select',
 				title: acf.__( 'Select File' ),
 				field: this.get( 'key' ),
@@ -90,9 +99,9 @@
 			} );
 		},
 
-		editAttachment: function () {
+		editAttachment: function ( button ) {
 			// vars
-			var val = this.val();
+			const val = this.val();
 
 			// bail early if no val
 			if ( ! val ) {
@@ -106,9 +115,22 @@
 				button: acf.__( 'Update File' ),
 				attachment: val,
 				field: this.get( 'key' ),
-				select: $.proxy( function ( attachment, i ) {
+				select: $.proxy( function ( attachment ) {
 					this.render( attachment );
 				}, this ),
+				close: $.proxy( function () {
+					if ( 'edit-button' === button ) {
+						const edit = this.$el.find( 'a[data-name="edit"]' );
+						if ( edit.length ) {
+							edit.trigger( 'focus' );
+						}
+					} else {
+						const imageWrap = this.$el.find( '.image-wrap' );
+						if ( imageWrap.length ) {
+							imageWrap.trigger( 'focus' );
+						}
+					}
+				}, this ),
 			} );
 		},
 	} );