WordPress.org

Make WordPress Core

Changeset 28983


Ignore:
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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/install.css

    r28850 r28983  
    317317} 
    318318 
    319 .language-chooser select { 
     319.language-chooser fieldset { 
    320320    margin: 1px; 
    321321    padding: 8px; 
    322     width: 100%; 
    323322    display: block; 
    324323    border: 1px solid #ddd; 
     
    335334    font-family: inherit; 
    336335    font-weight: inherit; 
    337 } 
    338  
    339 .language-chooser select:focus { 
     336    overflow-y: scroll; 
     337    height: 250px; 
     338} 
     339 
     340/* TODO:add focus style via JS */ 
     341.language-chooser fieldset.focus { 
    340342    border-color: #5b9dd9; 
    341343    -webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8); 
     
    351353    text-align: right; 
    352354} 
     355 
     356.language-chooser input:checked + label{ 
     357      color:white; 
     358      background: #0074A2; 
     359} 
     360 
     361.language-chooser label{ 
     362    display:block; 
     363} 
     364 
     365.screen-reader-input, 
     366.screen-reader-text { 
     367    position: absolute; 
     368    margin: -1px; 
     369    padding: 0; 
     370    height: 1px; 
     371    width: 1px; 
     372    overflow: hidden; 
     373    clip: rect(0 0 0 0); 
     374    border: 0; 
     375} 
  • trunk/src/wp-admin/install.php

    r28982 r28983  
    204204        if ( $body ) { 
    205205            display_header( 'language-chooser' ); 
    206  
    207206            echo '<form id="setup" method="post" action="install.php?step=1">'; 
    208             echo '<select name="language" id="language-chooser" size="15">'; 
    209             echo '<option selected="selected" value="">English (United States)</option>'; 
     207            echo "<fieldset>\n"; 
     208            echo "<legend class='screen-reader-text'>Select a default language</legend>\n"; 
     209            echo '<input type="radio" checked="checked" class="screen-reader-input" name="language" id="language_default" value="">'; 
     210            echo '<label for="language_default">English (United States)</label>'; 
     211            echo "\n"; 
     212 
    210213            foreach ( $body['languages'] as $language ) { 
    211                 echo '<option value="' . esc_attr( $language['language'] ) . '">' . esc_html( $language['native_name'] ) . "</option>\n"; 
     214                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'] ) . '">'; 
     215                echo '<label for="language_' . esc_attr( $language['language'] ) . '">' . esc_html( $language['native_name'] ) . "</label>\n"; 
    212216            } 
    213             echo "</select>\n"; 
     217 
     218            echo "</fieldset>\n"; 
    214219            echo '<p class="step"><input type="submit" class="button button-primary button-hero" value="&raquo;" /></p>'; 
    215220            echo '</form>'; 
     
    335340if ( !wp_is_mobile() ) { 
    336341?> 
    337 <script type="text/javascript">var t = document.getElementById('weblog_title') || document.getElementById('language-chooser'); if (t){ t.focus(); }</script> 
     342<script type="text/javascript">var t = document.getElementById('weblog_title'); if (t){ t.focus(); }</script> 
    338343<?php } ?> 
    339344<?php wp_print_scripts( 'user-profile' ); ?> 
Note: See TracChangeset for help on using the changeset viewer.