Add accessible name to Contact Form dropdown (#34139)

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/6931463683
Automattic · Nov 20, 2023 · e92d769 · e92d769
1 parent 4e26b66
commit e92d769
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@ This is an alpha version! The changes listed here are not final.
 - The package now requires PHP >= 7.0.
 
 ### Fixed
+- Add an accessible name to the Contact Form dropdown rendered in the front-end
 - Avoid errors when a saved feedback form does not have the expected WP_Post format.
 
 ## [0.23.1] - 2023-11-14

diff --git a/src/contact-form/class-contact-form-field.php b/src/contact-form/class-contact-form-field.php
@@ -715,8 +715,12 @@ public function render_checkbox_multiple_field( $id, $label, $value, $class, $re
 	 * @return string HTML
 	 */
 	public function render_select_field( $id, $label, $value, $class, $required, $required_field_text ) {
-		$field  = $this->render_label( 'select', $id, $label, $required, $required_field_text );
-		$field .= "\t<select name='" . esc_attr( $id ) . "' id='" . esc_attr( $id ) . "' " . $class . ( $required ? "required aria-required='true'" : '' ) . ">\n";
+		$label_ns     = 'contact-form-label';
+		$label_id_key = "$label_ns-id";
+		$label_id_val = "$label_ns-$id";
+
+		$field  = $this->render_label( 'select', $id, $label, $required, $required_field_text, array( 'id' => $label_id_val ) );
+		$field .= "\t<select name='" . esc_attr( $id ) . "' id='" . esc_attr( $id ) . "' " . $class . ( $required ? "required aria-required='true'" : '' ) . "data-$label_id_key='" . esc_attr( $label_id_val ) . "'>\n";
 
 		if ( $this->get_attribute( 'togglelabel' ) ) {
 			$field .= "\t\t<option value=''>" . $this->get_attribute( 'togglelabel' ) . "</option>\n";

diff --git a/src/contact-form/js/dropdown.js b/src/contact-form/js/dropdown.js
@@ -13,14 +13,21 @@ jQuery( function ( $ ) {
 	} );
 
 	function initializeSelectMenu() {
-		$( '.contact-form .contact-form-dropdown' )
-			.selectmenu( {
-				classes: {
-					'ui-selectmenu-button': 'contact-form-dropdown__button',
-					'ui-selectmenu-menu': 'contact-form-dropdown__menu',
-				},
-			} )
-			.attr( 'aria-hidden', true )
-			.prop( 'tabindex', -1 );
+		$( '.contact-form .contact-form-dropdown' ).each( function () {
+			const $select = $( this );
+			const labelId = $select.data( 'contact-form-label-id' );
+
+			$select
+				.selectmenu( {
+					classes: {
+						'ui-selectmenu-button': 'contact-form-dropdown__button',
+						'ui-selectmenu-menu': 'contact-form-dropdown__menu',
+					},
+				} )
+				.attr( 'aria-hidden', true )
+				.prop( 'tabindex', -1 )
+				.selectmenu( 'widget' )
+				.attr( 'aria-labelledby', labelId );
+		} );
 	}
 } );