From db8b7380b244a400527576dd6da64d893a518844 Mon Sep 17 00:00:00 2001
From: John Blackbourn <johnbillion@git.wordpress.org>
Date: Thu, 3 Jul 2014 22:53:01 +0000
Subject: [PATCH] First pass at switching to radio inputs for the install
 screen language selector. Needs some more work. See #28577. Props jorbin

git-svn-id: https://develop.svn.wordpress.org/trunk@28983 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/install.css | 31 +++++++++++++++++++++++++++----
 src/wp-admin/install.php     | 17 +++++++++++------
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css
index 07ca5c926f..dfed0f33e3 100644
--- a/src/wp-admin/css/install.css
+++ b/src/wp-admin/css/install.css
@@ -316,10 +316,9 @@ body.language-chooser {
 	max-width: 450px;
 }
 
-.language-chooser select {
+.language-chooser fieldset {
 	margin: 1px;
 	padding: 8px;
-	width: 100%;
 	display: block;
 	border: 1px solid #ddd;
 	-webkit-border-radius: 0;
@@ -334,9 +333,12 @@ body.language-chooser {
 	font-size: 16px;
 	font-family: inherit;
 	font-weight: inherit;
+	overflow-y: scroll;
+	height: 250px;
 }
 
-.language-chooser select:focus {
+/* TODO:add focus style via JS */
+.language-chooser fieldset.focus {
 	border-color: #5b9dd9;
 	-webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8);
 	box-shadow: 0 0 2px rgba(30,140,190,0.8);
@@ -349,4 +351,25 @@ body.language-chooser {
 
 .language-chooser p {
 	text-align: right;
-}
\ No newline at end of file
+}
+
+.language-chooser input:checked + label{
+	  color:white;
+	  background: #0074A2;
+}
+
+.language-chooser label{
+	display:block;
+}
+
+.screen-reader-input,
+.screen-reader-text {
+	position: absolute;
+	margin: -1px;
+	padding: 0;
+	height: 1px;
+	width: 1px;
+	overflow: hidden;
+	clip: rect(0 0 0 0);
+	border: 0;
+}
diff --git a/src/wp-admin/install.php b/src/wp-admin/install.php
index e2d644ab37..aa44a153d5 100644
--- a/src/wp-admin/install.php
+++ b/src/wp-admin/install.php
@@ -203,14 +203,19 @@ switch($step) {
 		$body = wp_get_available_translations();
 		if ( $body ) {
 			display_header( 'language-chooser' );
-
 			echo '<form id="setup" method="post" action="install.php?step=1">';
-			echo '<select name="language" id="language-chooser" size="15">';
-			echo '<option selected="selected" value="">English (United States)</option>';
+			echo "<fieldset>\n";
+			echo "<legend class='screen-reader-text'>Select a default language</legend>\n";
+			echo '<input type="radio" checked="checked" class="screen-reader-input" name="language" id="language_default" value="">';
+			echo '<label for="language_default">English (United States)</label>';
+			echo "\n";
+
 			foreach ( $body['languages'] as $language ) {
-				echo '<option value="' . esc_attr( $language['language'] ) . '">' . esc_html( $language['native_name'] ) . "</option>\n";
+				echo '<input type="radio" name="language" class="' . esc_attr( $language['language'] ) . ' screen-reader-input" id="language_'. esc_attr( $language['language'] ) .'" value="' . esc_attr( $language['language'] ) . '">';
+				echo '<label for="language_' . esc_attr( $language['language'] ) . '">' . esc_html( $language['native_name'] ) . "</label>\n";
 			}
-			echo "</select>\n";
+
+			echo "</fieldset>\n";
 			echo '<p class="step"><input type="submit" class="button button-primary button-hero" value="&raquo;" /></p>';
 			echo '</form>';
 			break;
@@ -334,7 +339,7 @@ switch($step) {
 }
 if ( !wp_is_mobile() ) {
 ?>
-<script type="text/javascript">var t = document.getElementById('weblog_title') || document.getElementById('language-chooser'); if (t){ t.focus(); }</script>
+<script type="text/javascript">var t = document.getElementById('weblog_title'); if (t){ t.focus(); }</script>
 <?php } ?>
 <?php wp_print_scripts( 'user-profile' ); ?>
 </body>