Announce changes to assistive technologies

As a start, this announces changes when adding/removing locales and when moving them up/down in the list.

See #15.

inc/functions.php

@@ -229,10 +229,31 @@ function preferred_languages_load_textdomain_mofile( $mofile ) {
 function preferred_languages_register_scripts() {
 	$suffix = SCRIPT_DEBUG ? '' : '.min';
 
-	wp_register_script( 'preferred-languages', plugin_dir_url( dirname( __FILE__ ) ) . 'js/preferred-languages' . $suffix . '.js', array(
-		'jquery',
-		'jquery-ui-sortable',
-	), '20170513', true );
+	wp_register_script(
+		'preferred-languages',
+		plugin_dir_url( dirname( __FILE__ ) ) . 'js/preferred-languages' . $suffix . '.js',
+		array(
+			'jquery',
+			'jquery-ui-sortable',
+			'wp-a11y'
+		),
+		'20170930',
+		true
+	);
+
+	wp_localize_script(
+		'preferred-languages',
+		'preferredLanguages',
+		array(
+			'l10n' => array(
+				'localeAdded'   => __( 'Locale added to list' ),
+				'localeRemoved' => __( 'Locale removed from list' ),
+				'movedUp'       => __( 'Locale moved up' ),
+				'movedDown'     => __( 'Locale moved down' ),
+			),
+		)
+	);
+
 	wp_enqueue_style( 'preferred-languages', plugin_dir_url( dirname( __FILE__ ) ) . 'css/preferred-languages.css', array(), '20170513', 'screen' );
 }
 

js/preferred-languages.js

@@ -1,4 +1,4 @@
-(function( $, settings ) {
+(function( wp, settings, $ ) {
 	var $activeLocales           = $( '.active-locales-list' ),
 	    $activeLocalesControls   = $( '.active-locales-controls' ),
 	    $inactiveLocales         = $( '.inactive-locales-list' ),
@@ -77,6 +77,9 @@
 
 		// 3. Update buttons.
 		changeButtonState( $selectedLocale );
+
+		// 4. Announce to assistive technologies.
+		wp.a11y.speak( settings.l10n.movedUp );
 	}
 
 	/**
@@ -93,6 +96,9 @@
 
 		// 3. Update buttons.
 		changeButtonState( $selectedLocale );
+
+		// 4. Announce to assistive technologies.
+		wp.a11y.speak( settings.l10n.movedDown );
 	}
 
 	/**
@@ -133,6 +139,9 @@
 
 		// 5. Make visible in dropdown again.
 		$inactiveLocales.find( 'select option[value="' + locale + '"]' ).removeClass('hidden');
+
+		// 6. Announce to assistive technologies.
+		wp.a11y.speak( settings.l10n.localeRemoved );
 	}
 
 	/**
@@ -180,6 +189,9 @@
 
 		// 5. Update hidden input field.
 		updateHiddenInput();
+
+		// 6. Announce to assistive technologies.
+		wp.a11y.speak( settings.l10n.localeAdded );
 	}
 
 	// Hide original language settings.
@@ -249,4 +261,4 @@
 
 	// Remove locale from list.
 	$activeLocalesControls.find( '.locales-remove' ).on( 'click', removeActiveLocale );
-})( jQuery, window.preferredLanguages );
+})( wp, preferredLanguages, jQuery );