WordPress.org
Get WordPress

Make WordPress Core

Ticket #30108: 30108.6.diff

File 30108.6.diff, 16.5 KB (added by iamtakashi, 10 years ago)

Adjust focus and hover style for better accessibility.

  • src/wp-content/themes/twentyfifteen/css/ie.css

     
    538538        padding: 4.5454% 9.0909%;
    539539}
    540540
    541 .posted-on a:before,
    542 .byline a:before,
    543 .cat-links span + a:before,
    544 .tags-links span + a:before,
    545 .comments-link a:before,
    546 .entry-format a:before,
    547 .edit-link a:before,
    548 .full-size-link a:before {
     541.posted-on:before,
     542.byline:before,
     543.cat-links:before,
     544.tags-links:before,
     545.comments-link:before,
     546.entry-format:before,
     547.edit-link:before,
     548.full-size-link:before {
    549549        top: 4px;
    550550}
    551551
    … …  
    649649        padding-left: 5.5em;
    650650}
    651651
    652 .comment-metadata .edit-link a:before,
    653 .pingback .edit-link a:before {
     652.comment-metadata .edit-link:before,
     653.pingback .edit-link:before {
    654654        top: 8px;
    655655}
    656656

  • src/wp-content/themes/twentyfifteen/inc/custom-header.php

     
    227227                        color: %1$s;
    228228                }
    229229
    230                 .secondary-toggle:focus {
    231                         outline-color: %1$s;
     230                .site-title a {
     231                        outline-color: %1$s; /* Fallback for IE7 and IE8 */
     232                        outline-color: %2$s;
    232233                }
    233234
    234                 .secondary-toggle:hover {
     235                .secondary-toggle {
     236                        border-color: %1$s; /* Fallback for IE7 and IE8 */
     237                        border-color: %3$s;
     238                }
     239
     240                .secondary-toggle:hover,
     241                .secondary-toggle:focus {
     242                        border-color: %1$s; /* Fallback for IE7 and IE8 */
    235243                        border-color: %4$s;
    236244                }
    237245
    … …  
    244252                                color: %1$s;
    245253                        }
    246254
    247                         .dropdown-toggle:focus {
    248                                 outline-color: %1$s;
    249                         }
    250 
    251255                        .widget button,
    252256                        .widget input[type="button"],
    253257                        .widget input[type="reset"],
    … …  
    256260                                background-color: %1$s;
    257261                        }
    258262
     263                        .textwidget a {
     264                                border-color: %1$s;
     265                        }
     266
    259267                        .main-navigation .menu-item-description,
    260268                        .main-navigation a:hover,
    261269                        .main-navigation a:focus,
    … …  
    274282                        }
    275283
    276284                        .widget_calendar tbody a:hover,
    277                         .widget_calendar tbody a:focus {
     285                        .widget_calendar tbody a:focus,
     286                        .widget button:hover,
     287                        .widget input[type="button"]:hover,
     288                        .widget input[type="reset"]:hover,
     289                        .widget input[type="submit"]:hover,
     290                        .widget button:focus,
     291                        .widget input[type="button"]:focus,
     292                        .widget input[type="reset"]:focus,
     293                        .widget input[type="submit"]:focus {
    278294                                background-color: %1$s; /* Fallback for IE7 and IE8 */
    279295                                background-color: %2$s;
    280296                        }
    … …  
    283299                                border-color: %2$s;
    284300                        }
    285301
     302                        .sidebar a:focus {
     303                                outline-color: %1$s; /* Fallback for IE7 and IE8 */
     304                                outline-color: %2$s;
     305                        }
     306
    286307                        .main-navigation ul,
    287308                        .main-navigation li,
    288309                        .secondary-toggle,
    … …  
    313334                                border-color: %1$s; /* Fallback for IE7 and IE8 */
    314335                                border-color: %4$s;
    315336                        }
     337
     338                        .dropdown-toggle:focus,
     339                        .widget button:focus,
     340                        .widget input[type="button"]:focus,
     341                        .widget input[type="reset"]:focus,
     342                        .widget input[type="submit"]:focus {
     343                                outline-color: %1$s; /* Fallback for IE7 and IE8 */
     344                                outline-color: %4$s;
     345                        }
    316346                }
    317347        ';
    318348

  • src/wp-content/themes/twentyfifteen/inc/customizer.php

     
    327327                .entry-summary a,
    328328                .page-content a,
    329329                .comment-content a,
     330                .pingback .comment-body > a,
    330331                .author-description a,
     332                .taxonomy-description a,
     333                .textwidget a,
     334                .entry-footer a:hover,
     335                .comment-metadata a:hover,
     336                .pingback .edit-link a:hover,
    331337                .comment-list .reply a:hover,
    332                 .comment-list .reply a:focus {
     338                .site-info a:hover {
    333339                        border-color: %4$s;
    334340                }
    335341
    … …  
    367373                .comment-navigation,
    368374                .comment-navigation a,
    369375                .widget,
    370                 .entry-content a:hover,
    371                 .entry-content a:focus,
    372                 .entry-summary a:hover,
    373                 .entry-summary a:focus,
    374                 .page-content a:hover,
    375                 .page-content a:focus,
    376                 .comment-content a:hover,
    377                 .comment-content a:focus,
    378                 .author-description a:hover,
    379                 .author-description a:focus,
    380376                .author-heading,
    381377                .entry-footer,
    382378                .entry-footer a,
    … …  
    386382                .comment-author,
    387383                .comment-metadata,
    388384                .comment-metadata a,
    389                 .pingback .comment-edit-link,
     385                .pingback .edit-link,
     386                .pingback .edit-link a,
    390387                .post-password-form label,
    391388                .comment-form label,
    392389                .comment-notes,
    … …  
    405402
    406403                /* Secondary Text Color */
    407404                blockquote,
    408                 .entry-content a:hover,
    409                 .entry-content a:focus,
    410                 .entry-summary a:hover,
    411                 .entry-summary a:focus,
    412                 .page-content a:hover,
    413                 .page-content a:focus,
    414                 .comment-content a:hover,
    415                 .comment-content a:focus,
    416                 .author-description a:hover,
    417                 .author-description a:focus {
     405                .logged-in-as a:hover,
     406                .comment-author a:hover {
    418407                        border-color: %4$s; /* Fallback for IE7 and IE8 */
    419408                        border-color: %5$s;
    420409                }
    … …  
    467456                }
    468457
    469458                /* Border Focus Color */
     459                a:focus,
     460                button:focus,
     461                input[type="button"]:focus,
     462                input[type="reset"]:focus,
     463                input[type="submit"]:focus {
     464                        outline-color: %4$s; /* Fallback for IE7 and IE8 */
     465                        outline-color: %7$s;
     466                }
     467
    470468                input:focus,
    471                 textarea:focus {
     469                textarea:focus,
     470                .secondary-toggle:hover,
     471                .secondary-toggle:focus {
    472472                        border-color: %4$s; /* Fallback for IE7 and IE8 */
    473473                        border-color: %7$s;
    474474                }
    475475
    476476                /* Sidebar Link Color */
    477                 .secondary-toggle:hover {
    478                         border-color: %8$s;
    479                 }
    480 
    481477                .secondary-toggle:before {
    482478                        color: %8$s;
    483479                }
    484480
    485                 .secondary-toggle:focus {
    486                         outline-color: %8$s;
    487                 }
    488 
    489481                .site-title a,
    490482                .site-description {
    491483                        color: %8$s;
    … …  
    554546                                color: %8$s;
    555547                        }
    556548
    557                         .dropdown-toggle:focus {
    558                                 outline-color: %8$s;
    559                         }
    560 
    561549                        /* Sidebar Text Color */
    562550                        .secondary a:hover,
    563551                        .secondary a:focus,

  • src/wp-content/themes/twentyfifteen/rtl.css

     
    276276        margin: 0 0 1.6em 1.6em;
    277277}
    278278
    279 .posted-on a:before,
    280 .byline a:before,
    281 .cat-links span + a:before,
    282 .tags-links span + a:before,
    283 .comments-link a:before,
    284 .entry-format a:before,
    285 .edit-link a:before,
    286 .full-size-link a:before {
     279.posted-on:before,
     280.byline:before,
     281.cat-links:before,
     282.tags-links:before,
     283.comments-link:before,
     284.entry-format:before,
     285.edit-link:before,
     286.full-size-link:before {
    287287        margin-right: auto;
    288288        margin-left: 2px;
    289289}

  • src/wp-content/themes/twentyfifteen/style.css

     
    140140}
    141141
    142142a:focus {
    143         outline: thin dotted;
     143        outline: 2px solid #c1c1c1;
     144        outline: 2px solid rgba(51, 51, 51, 0.3);
    144145}
    145146
    146147a:hover,
    … …  
    165166.comment-reply-title small a:before,
    166167.comment-navigation .nav-next a:after,
    167168.comment-navigation .nav-previous a:before,
    168 .posted-on a:before,
    169 .byline a:before,
    170 .cat-links span + a:before,
    171 .tags-links span + a:before,
    172 .comments-link a:before,
    173 .entry-format a:before,
    174 .edit-link a:before,
    175 .full-size-link a:before,
     169.posted-on:before,
     170.byline:before,
     171.cat-links:before,
     172.tags-links:before,
     173.comments-link:before,
     174.entry-format:before,
     175.edit-link:before,
     176.full-size-link:before,
    176177.pagination .prev:before,
    177178.pagination .next:before,
    178179.image-navigation a:before,
    … …  
    535536input[type="submit"]:focus {
    536537        background-color: #707070;
    537538        background-color: rgba(51, 51, 51, 0.7);
    538         outline: 0;
    539539}
    540540
     541button:focus,
     542input[type="button"]:focus,
     543input[type="reset"]:focus,
     544input[type="submit"]:focus {
     545        outline: 2px solid #c1c1c1;
     546        outline: 2px solid rgba(51, 51, 51, 0.3);
     547}
     548
    541549input[type="checkbox"],
    542550input[type="radio"] {
    543551        padding: 0;
    … …  
    715723}
    716724
    717725.dropdown-toggle:focus {
    718         outline: dotted thin #333;
     726        outline-width: 1px;
    719727}
    720728
    721729.dropdown-toggle.toggle-on:after {
    … …  
    876884        left: 0;
    877885}
    878886
    879 .secondary-toggle:hover {
     887.secondary-toggle:hover,
     888.secondary-toggle:focus {
    880889        background-color: transparent;
     890        border: 1px solid #c1c1c1;
    881891        border: 1px solid rgba(51, 51, 51, 0.3);
     892        outline: 0;
    882893}
    883894
    884 .secondary-toggle:focus {
    885         background-color: transparent;
    886         border: 1px solid transparent;
    887         outline: dotted thin #333;
    888 }
    889 
    890895.secondary-toggle.toggled-on:before {
    891896        content: "\f405";
    892897        font-size: 32px;
    893         top: 1px;
    894         left: 0;
     898        top: 0;
     899        left: -1px;
    895900}
    896901
    897902.post-navigation {
    … …  
    15041509        opacity: 0.8;
    15051510}
    15061511
    1507 .widget_text > div > :last-child {
     1512.textwidget > :last-child {
    15081513        margin-bottom: 0;
    15091514}
    15101515
     1516.textwidget a {
     1517        border-bottom: 1px solid #333;
     1518}
    15111519
     1520.textwidget a:hover,
     1521.textwidget a:focus {
     1522        border-bottom: 0;
     1523}
     1524
     1525
    15121526/**
    15131527 * 12.0 Content
    15141528 */
    … …  
    17001714.entry-content a,
    17011715.entry-summary a,
    17021716.page-content a,
    1703 .comment-content a {
     1717.comment-content a,
     1718.pingback .comment-body > a {
    17041719        border-bottom: 1px solid #333;
    17051720}
    17061721
    … …  
    17111726.page-content a:hover,
    17121727.page-content a:focus,
    17131728.comment-content a:hover,
    1714 .comment-content a:focus {
    1715         border-color: #707070;
    1716         border-color: rgba(51, 51, 51, 0.7);
    1717         color: #707070;
    1718         color: rgba(51, 51, 51, 0.7);
     1729.comment-content a:focus,
     1730.pingback .comment-body > a:hover,
     1731.pingback .comment-body > a:focus {
     1732        border-bottom: 0;
    17191733}
    17201734
    17211735.entry-content .more-link {
    … …  
    17811795
    17821796.author-description a:hover,
    17831797.author-description a:focus {
    1784         border-color: rgba(51, 51, 51, 0.7);
    1785         color: rgba(51, 51, 51, 0.7);
     1798        border-bottom: 0;
    17861799}
    17871800
    17881801.author-description > :last-child {
    … …  
    18151828        color: rgba(51, 51, 51, 0.7);
    18161829}
    18171830
     1831.entry-footer a:hover {
     1832        border-bottom: 1px solid #333;
     1833}
     1834
    18181835.entry-footer a:hover,
    18191836.entry-footer a:focus {
    18201837        color: #333;
    … …  
    18351852        display: none;
    18361853}
    18371854
    1838 .sticky .posted-on,
    1839 .sticky .posted-on + .byline:before {
     1855.sticky .posted-on {
    18401856        display: none;
    18411857}
    18421858
    1843 .posted-on a:before,
    1844 .byline a:before,
    1845 .cat-links span + a:before,
    1846 .tags-links span + a:before,
    1847 .comments-link a:before,
    1848 .entry-format a:before,
    1849 .edit-link a:before,
    1850 .full-size-link a:before {
     1859.posted-on:before,
     1860.byline:before,
     1861.cat-links:before,
     1862.tags-links:before,
     1863.comments-link:before,
     1864.entry-format:before,
     1865.edit-link:before,
     1866.full-size-link:before {
    18511867        margin-right: 2px;
    18521868        position: relative;
    18531869}
    … …  
    18621878        margin-right: 1em;
    18631879}
    18641880
    1865 .format-aside .entry-format a:before {
     1881.format-aside .entry-format:before {
    18661882        content: "\f101";
    18671883}
    18681884
    1869 .format-image .entry-format a:before {
     1885.format-image .entry-format:before {
    18701886        content: "\f473";
    18711887}
    18721888
    1873 .format-gallery .entry-format a:before {
     1889.format-gallery .entry-format:before {
    18741890        content: "\f103";
    18751891}
    18761892
    1877 .format-video .entry-format a:before {
     1893.format-video .entry-format:before {
    18781894        content: "\f104";
    18791895}
    18801896
    1881 .format-status .entry-format a:before {
     1897.format-status .entry-format:before {
    18821898        content: "\f105";
    18831899}
    18841900
    1885 .format-quote .entry-format a:before {
     1901.format-quote .entry-format:before {
    18861902        content: "\f106";
    18871903}
    18881904
    1889 .format-link .entry-format a:before {
     1905.format-link .entry-format:before {
    18901906        content: "\f107";
    18911907}
    18921908
    1893 .format-chat .entry-format a:before {
     1909.format-chat .entry-format:before {
    18941910        content: "\f108";
    18951911}
    18961912
    1897 .format-audio .entry-format a:before {
     1913.format-audio .entry-format:before {
    18981914        content: "\f109";
    18991915}
    19001916
    1901 .posted-on a:before {
     1917.posted-on:before {
    19021918        content: "\f307";
    19031919}
    19041920
    1905 .byline a:before {
     1921.byline:before {
    19061922        content: "\f304";
    19071923}
    19081924
    1909 .cat-links span + a:before {
     1925.cat-links:before {
    19101926        content: "\f301";
    19111927}
    19121928
    1913 .tags-links span + a:before {
     1929.tags-links:before {
    19141930        content: "\f302";
    19151931}
    19161932
    1917 .comments-link a:before {
     1933.comments-link:before {
    19181934        content: "\f300";
    19191935}
    19201936
    1921 .full-size-link a:before {
     1937.full-size-link:before {
    19221938        content: "\f402";
    19231939}
    19241940
    1925 .edit-link a:before {
     1941.edit-link:before {
    19261942        content: "\f411";
    19271943}
    19281944
    … …  
    19451961        padding-top: 0.4em;
    19461962}
    19471963
     1964.taxonomy-description a {
     1965        border-bottom: 1px solid #333;
     1966}
     1967
     1968.taxonomy-description a:hover,
     1969.taxonomy-description a:focus {
     1970        border-bottom: 0;
     1971}
     1972
    19481973.taxonomy-description > :last-child {
    19491974        margin-bottom: 0;
    19501975}
    … …  
    21382163        margin-bottom: 0.4em;
    21392164}
    21402165
     2166.comment-author a:hover {
     2167        border-bottom: 1px solid #707070;
     2168        border-bottom: 1px solid rgba(51, 51, 51, 0.7);
     2169}
     2170
    21412171.comment-author .avatar {
    21422172        border-radius: 50%;
    21432173        float: left;
    … …  
    21742204}
    21752205
    21762206.comment-metadata a:hover,
     2207.pingback .edit-link a:hover{
     2208        border-bottom: 1px solid #333;
     2209}
     2210
     2211.comment-metadata a:hover,
    21772212.comment-metadata a:focus,
    21782213.pingback .edit-link a:hover,
    21792214.pingback .edit-link a:focus {
    … …  
    21922227        margin-left: 1em;
    21932228}
    21942229
    2195 .pingback .edit-link a:before {
     2230.pingback .edit-link:before {
    21962231        top: 5px;
    21972232}
    21982233
    … …  
    22332268.comment-list .reply a:focus {
    22342269        border-color: #333;
    22352270        color: #333;
     2271        outline: 0;
    22362272}
    22372273
    22382274.comment-form {
    … …  
    22722308        margin-bottom: 2em;
    22732309}
    22742310
     2311.logged-in-as a:hover {
     2312        border-bottom: 1px solid #333;
     2313}
     2314
    22752315.no-comments {
    22762316        border-top: 1px solid #eaeaea;
    22772317        border-top: 1px solid rgba(51, 51, 51, 0.1);
    … …  
    23352375        color: rgba(51, 51, 51, 0.7);
    23362376}
    23372377
     2378.site-info a:hover {
     2379        border-bottom: 1px solid #333;
     2380}
     2381
    23382382.site-info a:hover,
    23392383.site-info a:focus {
    23402384        color: #333;
    … …  
    31363180                top: 3px;
    31373181        }
    31383182
    3139         .posted-on a:before,
    3140         .byline a:before,
    3141         .cat-links span + a:before,
    3142         .tags-links span + a:before,
    3143         .comments-link a:before,
    3144         .entry-format a:before,
    3145         .edit-link a:before,
    3146         .full-size-link a:before {
     3183        .posted-on:before,
     3184        .byline:before,
     3185        .cat-links:before,
     3186        .tags-links:before,
     3187        .comments-link:before,
     3188        .entry-format:before,
     3189        .edit-link:before,
     3190        .full-size-link:before {
    31473191                top: 3px;
    31483192        }
    31493193
    … …  
    32223266                width: 42px;
    32233267        }
    32243268
    3225         .comment-metadata .edit-link a:before {
     3269        .comment-metadata .edit-link:before {
    32263270                top: 2px;
    32273271        }
    32283272
    3229         .pingback .edit-link a:before {
     3273        .pingback .edit-link:before {
    32303274                top: 6px;
    32313275        }
    32323276
    … …  
    36663710                top: 0;
    36673711        }
    36683712
    3669         .posted-on a:before,
    3670         .byline a:before,
    3671         .cat-links span + a:before,
    3672         .tags-links span + a:before,
    3673         .comments-link a:before,
    3674         .entry-format a:before,
    3675         .edit-link a:before,
    3676         .full-size-link a:before {
     3713        .posted-on:before,
     3714        .byline:before,
     3715        .cat-links:before,
     3716        .tags-links:before,
     3717        .comments-link:before,
     3718        .entry-format:before,
     3719        .edit-link:before,
     3720        .full-size-link:before {
    36773721                top: 4px;
    36783722        }
    36793723
    … …  
    37473791                line-height: 2;
    37483792        }
    37493793
    3750         .comment-metadata .edit-link a:before {
     3794        .comment-metadata .edit-link:before {
    37513795                top: 8px;
    37523796        }
    37533797
    3754         .pingback .edit-link a:before {
     3798        .pingback .edit-link:before {
    37553799                top: 8px;
    37563800        }
    37573801
    … …  
    43124356                padding: 5% 10%;
    43134357        }
    43144358
    4315         .posted-on a:before,
    4316         .byline a:before,
    4317         .cat-links span + a:before,
    4318         .tags-links span + a:before,
    4319         .comments-link a:before,
    4320         .entry-format a:before,
    4321         .edit-link a:before,
    4322         .full-size-link a:before {
     4359        .posted-on:before,
     4360        .byline:before,
     4361        .cat-links:before,
     4362        .tags-links:before,
     4363        .comments-link:before,
     4364        .entry-format:before,
     4365        .edit-link:before,
     4366        .full-size-link:before {
    43234367                top: 0;
    43244368        }
    43254369
    … …  
    44064450                width: 24px;
    44074451        }
    44084452
    4409         .comment-metadata .edit-link a:before {
     4453        .comment-metadata .edit-link:before {
    44104454                top: 3px;
    44114455        }
    44124456
    4413         .pingback .edit-link a:before {
     4457        .pingback .edit-link:before {
    44144458                top: 5px;
    44154459        }
    44164460
    … …  
    48374881                top: 3px;
    48384882        }
    48394883
    4840         .posted-on a:before,
    4841         .byline a:before,
    4842         .cat-links span + a:before,
    4843         .tags-links span + a:before,
    4844         .comments-link a:before,
    4845         .entry-format a:before,
    4846         .edit-link a:before,
    4847         .full-size-link a:before {
     4884        .posted-on:before,
     4885        .byline:before,
     4886        .cat-links:before,
     4887        .tags-links:before,
     4888        .comments-link:before,
     4889        .entry-format:before,
     4890        .edit-link:before,
     4891        .full-size-link:before {
    48484892                top: 3px;
    48494893        }
    48504894
    … …  
    49234967                left: 6px;
    49244968        }
    49254969
    4926         .comment-metadata .edit-link a:before {
     4970        .comment-metadata .edit-link:before {
    49274971                top: 6px;
    49284972        }
    49294973
    4930         .pingback .edit-link a:before {
     4974        .pingback .edit-link:before {
    49314975                top: 6px;
    49324976        }
    49334977
    … …  
    53495393                top: 0;
    53505394        }
    53515395
    5352         .posted-on a:before,
    5353         .byline a:before,
    5354         .cat-links span + a:before,
    5355         .tags-links span + a:before,
    5356         .comments-link a:before,
    5357         .entry-format a:before,
    5358         .edit-link a:before,
    5359         .full-size-link a:before {
     5396        .posted-on:before,
     5397        .byline:before,
     5398        .cat-links:before,
     5399        .tags-links:before,
     5400        .comments-link:before,
     5401        .entry-format:before,
     5402        .edit-link:before,
     5403        .full-size-link:before {
    53605404                top: 4px;
    53615405        }
    53625406
    … …  
    54305474                top: 8px;
    54315475        }
    54325476
    5433         .comment-metadata .edit-link a:before {
     5477        .comment-metadata .edit-link:before {
    54345478                top: 8px;
    54355479        }
    54365480
    5437         .pingback .edit-link a:before {
     5481        .pingback .edit-link:before {
    54385482                top: 8px;
    54395483        }
    54405484