Ticket #28577: 28577.diff

src/wp-admin/css/install.css

@@ -316 +316 @@
         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 +333 @@
         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 +351 @@
 
 .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;
+}

src/wp-admin/install.php

@@ -202 +202 @@
         case 0: // Step 0
                 if ( $body = wp_get_available_translations() ) {
                         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 "\n";
+                        echo '<input type="radio" checked="checked" class="screen-reader-input" name="language" id="unitedstates" value=""><label for="unitedstates">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="'. esc_attr( $language['language'] ) .'" value="' . esc_attr( $language['language'] ) . '">';
+                                echo '<label for="' . 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;