WordPress.org
Get WordPress

Make WordPress Core

Changeset 46356


Ignore:
Timestamp:
09/30/2019 05:23:06 PM (7 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.