Changeset 28983

Timestamp:

07/03/14 22:53:01 (3 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' ); ?>