Changeset 28983

Timestamp:

07/03/2014 10:53:01 PM (12 years ago)

Author:

johnbillion

Message:

First pass at switching to radio inputs for the install screen language selector. Needs some more work. See #28577. Props jorbin

Location:

trunk/src/wp-admin

Files:

• css/install.css (modified) (3 diffs)
• install.php (modified) (2 diffs)

trunk/src/wp-admin/css/install.css

@@ -317 +317 @@
 }
 
-.language-chooser select {
+.language-chooser fieldset {
         margin: 1px;
         padding: 8px;
-        width: 100%;
         display: block;
         border: 1px solid #ddd;
@@ -335 +334 @@
         font-family: inherit;
         font-weight: inherit;
-}
-
-.language-chooser select:focus {
+        overflow-y: scroll;
+        height: 250px;
+}
+
+/* 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);
@@ -351 +353 @@
         text-align: right;
 }
+
+.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;
+}

trunk/src/wp-admin/install.php

@@ -204 +204 @@
                 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>';
@@ -335 +340 @@
 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' ); ?>