WordPress.org
Get WordPress

Make WordPress Core

Changeset 46356


Ignore:
Timestamp:
09/30/2019 05:23:06 PM (5 years ago)
Author:
afercia
Message:

Accessibility: Improve and modernize user interface controls: Improve the new form controls styles and heights.

Improves cross-browsers rendering and addresses most of the reported edge cases.

See #47477.

Location:
trunk/src
Files:
9 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/common.css

    r46344 r46356  
    776776}
    777777
    778 .quicktags,
    779 .search {
     778.quicktags {
    780779    background-color: #ccc;
    781780    color: #000;
    … …  
    10811080.wp-filter .search-form input[type="search"] {
    10821081    margin: 0;
    1083     padding: 3px 5px;
    10841082    width: 280px;
    10851083    max-width: 100%;
    1086     font-size: 16px;
    1087     font-weight: 300;
    1088     line-height: 1.5;
     1084    font-size: inherit;
     1085    /* inherits font size 13px */
     1086    line-height: 2.15384615; /* 28px */
    10891087}
    10901088
    10911089.wp-filter .search-form select {
    10921090    margin: 0;
    1093     height: 32px;
    1094     vertical-align: top;
    10951091}
    10961092
    … …  
    39113907    .fileedit-sub input[type="submit"] {
    39123908        margin-bottom: 0px;
    3913         padding: 8px 18px;
     3909        padding: 4px 18px;
    39143910    }
    39153911

  • trunk/src/wp-admin/css/edit.css

    r46355 r46356  
    7272    position: absolute;
    7373    font-size: 1.7em;
    74     padding: 11px 10px;
     74    padding: 10px;
    7575    pointer-events: none;
    7676}
    … …  
    420420
    421421#timestampdiv select {
    422     height: 21px;
    423     line-height: 1.16666666;
    424     padding: 0;
    425422    vertical-align: top;
    426423    font-size: 12px;
     424    line-height: 1.5; /* 18px */
    427425}
    428426
    429427#aa, #jj, #hh, #mn {
    430     padding: 1px;
     428    padding: 6px 1px;
    431429    font-size: 12px;
     430    line-height: 1.16666666; /* 14px */
    432431}
    433432
    … …  
    495494
    496495#timestampdiv input {
    497     border-width: 1px;
    498     border-style: solid;
    499496    text-align: center;
    500497}

  • trunk/src/wp-admin/css/forms.css

    r46345 r46356  
    11/* Include margin and padding in the width calculation of input and textarea. */
    22input,
     3select,
     4textarea,
     5button {
     6    box-sizing: border-box;
     7    font-family: inherit;
     8    font-size: inherit;
     9    font-weight: inherit;
     10}
     11
     12textarea,
     13input {
     14    font-size: 14px;
     15}
     16
    317textarea {
    4     box-sizing: border-box;
     18    overflow: auto;
     19    padding: 2px 6px;
     20    /* inherits font size 14px */
     21    line-height: 1.42857143; /* 20px */
     22    resize: vertical;
     23}
     24
     25label {
     26    cursor: pointer;
     27}
     28
     29input,
     30select {
     31    margin: 1px;
     32}
     33
     34textarea.code {
     35    padding: 4px 6px 1px 6px;
    536}
    637
    738input[type="text"],
    839input[type="password"],
    9 input[type="checkbox"],
    1040input[type="color"],
    1141input[type="date"],
    … …  
    1646input[type="number"],
    1747input[type="search"],
    18 input[type="radio"],
    1948input[type="tel"],
    20 input[type="text"],
    2149input[type="time"],
    2250input[type="url"],
    … …  
    2452select,
    2553textarea {
    26     padding: 6px 8px;
    2754    box-shadow: 0 0 0 transparent;
    28     transition: box-shadow 0.1s linear;
    2955    border-radius: 4px;
    3056    border: 1px solid #7e8993;
    3157    background-color: #fff;
    3258    color: #32373c;
    33     outline: none;
     59}
     60
     61input[type="text"],
     62input[type="password"],
     63input[type="date"],
     64input[type="datetime"],
     65input[type="datetime-local"],
     66input[type="email"],
     67input[type="month"],
     68input[type="number"],
     69input[type="search"],
     70input[type="tel"],
     71input[type="time"],
     72input[type="url"],
     73input[type="week"] {
     74    padding: 0 8px;
     75    /* inherits font size 14px */
     76    line-height: 2; /* 28px */
     77}
     78
     79::-webkit-datetime-edit {
     80    /* inherits font size 14px */
     81    line-height: 1.85714286; /* 26px */
    3482}
    3583
    … …  
    4593input[type="search"]:focus,
    4694input[type="tel"]:focus,
    47 input[type="text"]:focus,
    4895input[type="time"]:focus,
    4996input[type="url"]:focus,
    … …  
    65112}
    66113
    67 /* Vertically align the number selector with the input. */
    68 input[type="number"] {
    69     min-height: 28px;
    70     line-height: 1;
    71 }
    72 
    73114input[type="checkbox"],
    74115input[type="radio"] {
    75116    border: 1px solid #7e8993;
     117    border-radius: 4px;
    76118    background: #fff;
    77119    color: #555;
    … …  
    119161    border-radius: 50%;
    120162    margin-right: 0.25rem;
     163    /* 10px not sure if still necessary, comes from the MP6 redesign in r26072 */
    121164    line-height: 0.71428571;
    122165}
    … …  
    147190    height: 0.5rem; /* 8px */
    148191    margin: 0.1875rem; /* 3px */
    149     line-height: 0.76190476;
    150192    background-color: #1e8cbe;
     193    /* 16px not sure if still necessary, comes from the MP6 redesign in r26072 */
     194    line-height: 1.14285714;
    151195}
    152196
    … …  
    168212}
    169213
    170 .ie8 input[type="password"] {
    171     font-family: sans-serif;
    172 }
    173 
    174 textarea,
    175 input,
    176 select,
    177 button {
    178     font-family: inherit;
    179     font-size: inherit;
    180     font-weight: inherit;
    181 }
    182 
    183 textarea,
    184 input,
    185 select {
    186     font-size: 14px;
    187     padding: 3px 5px;
    188 }
    189 
    190 textarea {
    191     overflow: auto;
    192     padding: 2px 6px;
    193     line-height: 1.4;
    194     resize: vertical;
    195 }
    196 
    197214.wp-admin input[type="file"] {
    198215    padding: 3px 0;
    199216    cursor: pointer;
    200 }
    201 
    202 label {
    203     cursor: pointer;
    204 }
    205 
    206 input,
    207 select {
    208     margin: 1px;
    209     padding: 3px 5px;
    210 }
    211 
    212 input.code {
    213     padding-top: 6px;
    214 }
    215 
    216 textarea.code {
    217     line-height: 1.4;
    218     padding: 4px 6px 1px 6px;
    219217}
    220218
    … …  
    310308/* Select styles are based on the default button in buttons.css */
    311309.wp-admin select {
    312     color: #555;
     310    font-size: 13px;
     311    line-height: 1.38461538; /* 18px */
     312    color: #32373c;
    313313    border-color: #7e8993;
    314314    box-shadow: none;
    315315    border-radius: 3px;
    316     padding: 2px 24px 2px 8px;
     316    padding: 3px 24px 3px 8px;
    317317    min-height: 28px;
    318318    vertical-align: middle;
    319319    -webkit-appearance: none;
    320320    /* The SVG is arrow-down-alt2 from Dashicons. */
    321     background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 4px top 50%;
     321    background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;
    322322    background-size: 16px 16px;
     323    cursor: pointer;
     324}
     325
     326/* Color and font size in the core form tables. */
     327.wp-admin .form-table select {
     328    font-size: 14px;
     329    line-height: 1.28571428; /* 18px */
     330    color: #32373c;
    323331}
    324332
    … …  
    351359}
    352360
     361/* Reset Firefox inner outline that appears on :focus. */
     362/* This ruleset overrides the color change on :focus thus needs to be after select:focus. */
     363.wp-admin select:-moz-focusring {
     364    color: transparent;
     365    text-shadow: 0 0 0 #016087;
     366}
     367
     368/* Remove background focus style from IE11 while keeping focus style available on option elements. */
     369.wp-admin select::-ms-value {
     370    background: transparent;
     371    color: #555;
     372}
     373
     374.wp-admin select:hover::-ms-value {
     375    color: #007cba;
     376}
     377
     378.wp-admin select:focus::-ms-value {
     379    color: #016087;
     380}
     381
     382.wp-admin select.disabled::-ms-value,
     383.wp-admin select:disabled::-ms-value {
     384    color: #a0a5aa;
     385}
     386
     387/* Hide the native down arrow for select element on IE. */
     388.wp-admin select::-ms-expand {
     389    display: none;
     390}
     391
    353392.wp-admin .button-cancel {
     393    display: inline-block;
     394    min-height: 28px;
    354395    padding: 0 5px;
    355396    line-height: 2;
    … …  
    360401}
    361402
     403.misc-pub-post-status select {
     404    margin-top: 0;
     405}
     406
    362407.wp-admin select[multiple] {
    363408    height: auto;
     409    padding-right: 8px;
     410    background: #fff;
    364411}
    365412
    … …  
    417464input.small-text {
    418465    width: 50px;
    419     padding: 1px 6px;
     466    padding: 0 6px;
    420467}
    421468
    … …  
    449496    margin-right: 6px;
    450497    max-width: 12.5rem;
    451 }
    452 
    453 .ie8 .tablenav .actions select {
    454     width: 9.6875rem;
    455 }
    456 
    457 .ie8 .tablenav .actions select#cat {
    458     width: 12.5rem;
    459498}
    460499
    … …  
    591630.tagsdiv .newtag {
    592631    float: left;
    593     height: 28px;
    594632    margin: 0 4px 0 0;
    595633}
    … …  
    598636    margin: 0;
    599637    width: 280px;
    600     font-size: 16px;
    601     font-weight: 300;
    602     line-height: 1.5;
    603     padding: 3px 5px;
    604     height: 32px;
    605638}
    606639
    … …  
    953986.options-general-php input.small-text {
    954987    width: 56px;
     988    margin: -2px 0;
    955989}
    956990
    … …  
    11891223
    11901224.privacy_requests .next_steps .button {
    1191     height: auto;
    1192     line-height: 1.5;
    1193     padding: 4px 10px;
    11941225    word-break: break-all;
    11951226    white-space: unset;
    … …  
    12431274
    12441275.wp-privacy-request-form input {
    1245     line-height: 1.5;
    12461276    margin: 0;
    12471277}
    … …  
    12791309
    12801310    input[type="text"],
     1311    input[type="password"],
     1312    input[type="date"],
     1313    input[type="datetime"],
     1314    input[type="datetime-local"],
    12811315    input[type="email"],
     1316    input[type="month"],
     1317    input[type="number"],
    12821318    input[type="search"],
    1283     input[type="password"],
    1284     input[type="number"] {
     1319    input[type="tel"],
     1320    input[type="time"],
     1321    input[type="url"],
     1322    input[type="week"] {
    12851323        -webkit-appearance: none;
    1286         padding: 6px 10px;
    1287     }
    1288 
    1289     input[type="number"] {
    1290         min-height: 40px;
    1291     }
    1292 
    1293     input.code {
    1294         padding-bottom: 5px;
    1295         padding-top: 10px;
     1324        padding: 3px 10px;
     1325    }
     1326
     1327    ::-webkit-datetime-edit {
     1328        line-height: 1.875; /* 30px */
    12961329    }
    12971330
    … …  
    13411374    }
    13421375
    1343     #wpbody select {
    1344         min-height: 36px;
     1376    .wp-admin select,
     1377    .wp-admin .form-table select {
     1378        min-height: 40px;
    13451379        font-size: 16px;
     1380        line-height: 1.625; /* 26px */
     1381        padding: 5px 24px 5px 8px;
    13461382    }
    13471383
    13481384    .wp-admin .button-cancel {
    1349         padding: 0;
     1385        margin-bottom: 0;
     1386        padding: 2px 0;
    13501387        font-size: 14px;
     1388        vertical-align: middle;
    13511389    }
    13521390
    … …  
    13981436    #profile-page .form-table textarea {
    13991437        width: 100%;
    1400         font-size: 16px;
    1401         line-height: 1.5;
    1402         padding: 7px 10px;
    14031438        display: block;
    14041439        max-width: none;
    … …  
    14091444        float: right;
    14101445        margin: -30px 3px 0 0;
    1411     }
    1412 
    1413     #wpbody .form-table td select {
    1414         min-height: 40px;
    14151446    }
    14161447
    … …  
    14441475
    14451476    p.search-box input[name="s"] {
    1446         height: auto;
    14471477        float: none;
    14481478        width: 100%;
    14491479        margin-bottom: 10px;
    14501480        vertical-align: middle;
    1451         -webkit-appearance: none;
    14521481    }
    14531482
    … …  
    15491578    .wp-pwd .button .text {
    15501579        display: none;
     1580    }
     1581
     1582    .wp-pwd [type="text"],
     1583    .wp-pwd [type="password"] {
     1584        line-height: 2;
    15511585    }
    15521586

  • trunk/src/wp-admin/css/list-tables.css

    r45930 r46356  
    623623.tablenav-pages .current-page {
    624624    margin: 0 2px 0 0;
    625     padding-top: 5px;
    626     padding-bottom: 5px;
    627625    font-size: 13px;
    628626    text-align: center;
    … …  
    951949    display: inline-block;
    952950    margin: 0;
    953     line-height: 1.5;
    954951    vertical-align: baseline;
     952    line-height: 2;
    955953}
    956954
    … …  
    976974}
    977975
    978 .inline-edit-row fieldset.inline-edit-date select {
    979     margin: 1px;
    980     line-height: 2;
    981 }
    982 
    983976.inline-edit-row fieldset label span.input-text-wrap,
    984977.inline-edit-row fieldset .timestamp-wrap {
    … …  
    10401033.inline-edit-row fieldset input[name=jj],
    10411034.inline-edit-row fieldset input[name=hh],
    1042 .inline-edit-row fieldset input[name=mn] {
    1043     font-size: 12px;
    1044     width: 2.3em;
    1045 }
    1046 
     1035.inline-edit-row fieldset input[name=mn],
    10471036.inline-edit-row fieldset input[name=aa] {
    10481037    font-size: 12px;
    1049     width: 3.5em;
     1038    line-height: 1.16666666;
     1039    vertical-align: middle;
     1040    text-align: center;
     1041    padding: 6px 4px;
    10501042}
    10511043
    … …  
    19891981    }
    19901982
    1991     .inline-edit-row fieldset input[name=jj],
    1992     .inline-edit-row fieldset input[name=hh],
    1993     .inline-edit-row fieldset input[name=mn] {
    1994         width: 3em;
    1995     }
    1996 
    1997     .inline-edit-row fieldset input[name=aa] {
    1998         width: 4.5em;
    1999     }
    2000 
    20011983    .inline-edit-row .inline-edit-or {
    20021984        margin: 0 6px 0 0;

  • trunk/src/wp-admin/css/login.css

    r46293 r46356  
    274274.login input[type="password"] {
    275275    font-size: 24px;
     276    line-height: 1.16666666; /* 28px */
    276277    width: 100%;
    277278    padding: 5px;

  • trunk/src/wp-admin/css/themes.css

    r46242 r46356  
    3535    margin: 0;
    3636    width: 280px;
    37     font-size: 16px;
    38     font-weight: 300;
    39     line-height: 1.5;
    4037}
    4138

  • trunk/src/wp-includes/css/buttons.css

    r46350 r46356  
    8181    min-height: 24px;
    8282    line-height: 2;
    83     padding: 0 8px 1px;
     83    padding: 0 8px;
    8484    font-size: 11px;
    8585}
    … …  
    9191    line-height: 3.14285714;
    9292    padding: 0 36px;
    93 }
    94 
    95 /* Only visible in Windows High Contrast mode */
    96 .wp-core-ui .button:active,
    97 .wp-core-ui .button:focus {
    98     outline: 2px solid transparent;
    99     /* Reset inherited offset from Gutenberg */
    100     outline-offset: 0;
    10193}
    10294
    … …  
    136128.wp-core-ui .button.hover,
    137129.wp-core-ui .button:hover,
    138 .wp-core-ui .button-secondary:hover,
    139 .wp-core-ui .button.focus,
    140 .wp-core-ui .button:focus,
    141 .wp-core-ui .button-secondary:focus {
     130.wp-core-ui .button-secondary:hover{
    142131    background: #f1f1f1;
    143132    border-color: #016087;
    … …  
    152141    color: #016087;
    153142    box-shadow: 0 0 0 1px #007cba;
     143    /* Only visible in Windows High Contrast mode */
     144    outline: 2px solid transparent;
     145    /* Reset inherited offset from Gutenberg */
     146    outline-offset: 0;
    154147}
    155148
    … …  
    333326    input#save-post,
    334327    a.preview {
    335         padding: 6px 14px;
    336         line-height: normal;
     328        padding: 1px 14px;
     329        line-height: 2;
    337330        font-size: 14px;
    338331        vertical-align: middle;

  • trunk/src/wp-includes/css/editor.css

    r46355 r46356  
    15101510
    15111511#wp-link .link-search-field {
    1512     float: left;
    15131512    width: 250px;
    15141513    max-width: 70%;
    … …  
    15211520}
    15221521
    1523 #wp-link .link-search-wrapper span {
    1524     float: left;
    1525     margin-top: 4px;
    1526 }
    1527 
    15281522#wp-link .link-search-wrapper .spinner {
    1529     margin-top: 5px;
     1523    float: none;
     1524    margin: -3px 0 0 4px;
    15301525}
    15311526
    … …  
    15541549
    15551550.has-text-field #wp-link .query-results {
    1556     top: 200px;
     1551    top: 210px;
    15571552}
    15581553
    … …  
    17821777    padding: 3px;
    17831778    box-sizing: border-box;
     1779    line-height: 1.28571429;
    17841780}
    17851781

  • trunk/src/wp-includes/css/media-views.css

    r46244 r46356  
    3333    margin-left: -1%;
    3434    line-height: 1.2;
    35 }
    36 
    37 .media-frame input,
    38 .media-frame textarea {
    39     padding: 6px 8px;
    40 }
    41 
    42 .media-frame select,
    43 .wp-admin .media-frame select {
    44     min-height: 28px;
    45     vertical-align: middle;
    4635}
    4736
    … …  
    7867}
    7968
     69.media-frame input,
     70.media-frame textarea {
     71    padding: 6px 8px;
     72}
     73
     74.media-frame select,
     75.wp-admin .media-frame select {
     76    min-height: 28px;
     77    vertical-align: middle;
     78}
     79
    8080.media-frame input[type="text"],
    8181.media-frame input[type="password"],
     82.media-frame input[type="color"],
     83.media-frame input[type="date"],
     84.media-frame input[type="datetime"],
     85.media-frame input[type="datetime-local"],
     86.media-frame input[type="email"],
     87.media-frame input[type="month"],
    8288.media-frame input[type="number"],
    8389.media-frame input[type="search"],
    84 .media-frame input[type="email"],
     90.media-frame input[type="tel"],
     91.media-frame input[type="time"],
    8592.media-frame input[type="url"],
     93.media-frame input[type="week"],
    8694.media-frame textarea,
    8795.media-frame select {
    88     padding: 6px 8px;
    8996    box-shadow: 0 0 0 transparent;
    90     transition: box-shadow 0.1s linear;
     97    border-radius: 4px;
    9198    border: 1px solid #7e8993;
    92     border-radius: 4px;
     99    background-color: #fff;
     100    color: #32373c;
    93101    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    94     font-size: 12px;
     102    font-size: 13px;
     103}
     104
     105.media-frame input[type="text"],
     106.media-frame input[type="password"],
     107.media-frame input[type="date"],
     108.media-frame input[type="datetime"],
     109.media-frame input[type="datetime-local"],
     110.media-frame input[type="email"],
     111.media-frame input[type="month"],
     112.media-frame input[type="number"],
     113.media-frame input[type="search"],
     114.media-frame input[type="tel"],
     115.media-frame input[type="time"],
     116.media-frame input[type="url"],
     117.media-frame input[type="week"] {
     118    padding: 0 8px;
     119    /* inherits font size 13px */
     120    line-height: 2.15384615; /* 28px */
    95121}
    96122
    … …  
    808834 */
    809835.media-frame .search {
    810     margin-top: 11px;
     836    margin-top: 10px;
    811837    padding: 4px;
    812838    font-size: 13px;
    … …  
    10481074    width: 100%;
    10491075    margin: 0;
    1050     padding: 8px;
     1076    padding: 0 8px;
    10511077    font-size: 12px;
    10521078    border-radius: 0;
    … …  
    10761102.attachments-browser .media-toolbar-secondary > .media-button,
    10771103.attachments-browser .media-toolbar-secondary > .media-button-group {
    1078     margin: 11px 0;
     1104    margin: 10px 0;
    10791105}
    10801106
Note: See TracChangeset for help on using the changeset viewer.