From 7a785704c06fc58354b60a2ed981264862fbcd4b Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 30 Jun 2020 13:26:03 +0000 Subject: [PATCH] Accessibility: Site Health: Improve the "Copy site info" button accessibility. - avoids a focus loss when clicking the "Copy site info" button - uses `setTimeout()` and `clearTimeout()` to properly handle the "Copied!" text - minor JavaScript coding standards Props audrasjb, Clorith, afercia. See #48463, #50335. Fixes #50322. Built from https://develop.svn.wordpress.org/trunk@48233 git-svn-id: http://core.svn.wordpress.org/trunk@48002 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-admin/css/site-health-rtl.css | 14 +++++------ wp-admin/css/site-health-rtl.min.css | 2 +- wp-admin/css/site-health.css | 14 +++++------ wp-admin/css/site-health.min.css | 2 +- wp-admin/js/site-health.js | 37 +++++++++++++++++++++------- wp-admin/js/site-health.min.js | 2 +- wp-admin/site-health-info.php | 2 +- wp-includes/version.php | 2 +- 8 files changed, 45 insertions(+), 30 deletions(-) diff --git a/wp-admin/css/site-health-rtl.css b/wp-admin/css/site-health-rtl.css index 0cbe720af5..679c95350d 100644 --- a/wp-admin/css/site-health-rtl.css +++ b/wp-admin/css/site-health-rtl.css @@ -204,22 +204,16 @@ } .site-health-copy-buttons .copy-button-wrapper { + display: inline-flex; + align-items: center; margin: 0.5rem 0 1rem; } .site-health-copy-buttons .success { - display: none; color: #40860a; - line-height: 1.8; margin-right: 0.5rem; } -.site-health-copy-buttons .success.visible { - display: inline-block; - height: 30px; - line-height: 2.30769231; -} - .site-status-has-issues.hide { display: none; } @@ -457,6 +451,10 @@ padding-bottom: 0; font-weight: 600; } + + .wp-core-ui .site-health-copy-buttons .copy-button { + margin-bottom: 0; + } } /* The breakpoint is usually at 960px, the additional space is to allow for the margin. */ diff --git a/wp-admin/css/site-health-rtl.min.css b/wp-admin/css/site-health-rtl.min.css index 2282b87c8c..ea33ffbf95 100644 --- a/wp-admin/css/site-health-rtl.min.css +++ b/wp-admin/css/site-health-rtl.min.css @@ -1,2 +1,2 @@ /*! This file is auto-generated */ -.site-health #wpcontent,.site-health.auto-fold #wpcontent{padding-right:0}.health-check-header h1{display:inline-block;font-weight:600;margin:0 .8rem 1rem;font-size:23px;padding:9px 0 4px 0;line-height:1.3}.health-check-body h2{padding:1rem 0;line-height:1.4}.health-check-body h3{padding:0;font-weight:400}.health-check-header{text-align:center;margin:0 0 1rem;background:#fff;border-bottom:1px solid #e2e4e7}.health-check-title-section{display:flex;align-items:center;justify-content:center;clear:both}.site-health-progress-wrapper{margin-bottom:1rem}.site-health-progress{display:inline-block;height:20px;width:20px;margin:0;border-radius:100%;position:relative;font-weight:600;font-size:.4rem}.site-health-progress-count{position:absolute;display:block;height:80px;width:80px;right:50%;top:50%;margin-top:-40px;margin-right:-40px;border-radius:100%;line-height:6.3;font-size:2em}.loading .site-health-progress svg #bar{stroke-dashoffset:0;stroke:#adc5d2;animation:loadingPulse 3s infinite ease-in-out}.site-health-progress svg circle{stroke-dashoffset:0;transition:stroke-dashoffset 1s linear;stroke:#ccc;stroke-width:2em}.site-health-progress svg #bar{stroke-dashoffset:565;stroke:#dc3232}.green .site-health-progress #bar{stroke:#46b450}.green .site-health-progress .site-health-progress-label{color:#46b450}.orange .site-health-progress #bar{stroke:#ffb900}.orange .site-health-progress .site-health-progress-label{color:#ffb900}.site-health-progress-label{font-weight:600;line-height:20px;margin-right:.3rem}@keyframes loadingPulse{0%{stroke:#adc5d2}50%{stroke:#00a0d2}100%{stroke:#adc5d2}}.health-check-tabs-wrapper{display:-ms-inline-grid;-ms-grid-columns:1fr 1fr;vertical-align:top;display:inline-grid;grid-template-columns:1fr 1fr}.health-check-tab{display:block;text-decoration:none;color:inherit;padding:.5rem 1rem 1rem;margin:0 1rem;transition:box-shadow .5s ease-in-out}.health-check-tab:nth-child(1){-ms-grid-column:1}.health-check-tab:nth-child(2){-ms-grid-column:2}.health-check-tab:focus{color:#191e23;outline:1px solid #6c7781;box-shadow:none}.health-check-tab.active{box-shadow:inset 0 -3px #007cba;font-weight:600}.health-check-body{max-width:800px;margin:0 auto}.health-check-table td:first-child{width:30%}.health-check-table td{width:70%}.health-check-table ol,.health-check-table ul{margin:0}.health-check-body li{line-height:1.5}.health-check-body .good::before,.health-check-body .pass::before{content:"\f147";color:#46b450}.health-check-body .warning::before{content:"\f460";color:#ffb900}.health-check-body .info::before{content:"\f348";color:#00a0d2}.health-check-body .error::before,.health-check-body .fail::before{content:"\f335";color:#dc3232}.site-health-copy-buttons{margin:1rem 0}.site-health-copy-buttons .copy-button-wrapper{margin:.5rem 0 1rem}.site-health-copy-buttons .success{display:none;color:#40860a;line-height:1.8;margin-right:.5rem}.site-health-copy-buttons .success.visible{display:inline-block;height:30px;line-height:2.30769231}.site-status-has-issues.hide{display:none}.site-health-view-more{text-align:center}.site-health-issues-wrapper:first-of-type{margin-top:3rem}.site-health-issues-wrapper{margin-bottom:3rem;margin-top:2rem}.site-status-all-clear{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;width:100%;margin-top:0}@media all and (min-width:784px){.site-status-all-clear{margin:5rem 0}}.site-status-all-clear.hide{display:none}.site-status-all-clear .dashicons{font-size:150px;height:130px;width:150px}.site-status-all-clear .encouragement{font-size:1.5rem;font-weight:600}.site-status-all-clear p{margin:0}.health-check-accordion{border:1px solid #ccd0d4}.health-check-accordion-heading{margin:0;border-top:1px solid #ccd0d4;font-size:inherit;line-height:inherit;font-weight:600;color:inherit}.health-check-accordion-heading:first-child{border-top:none}.health-check-accordion-trigger{background:#fff;border:0;color:#32373c;cursor:pointer;display:flex;font-weight:400;margin:0;padding:1em 1.5em 1em 3.5em;min-height:46px;position:relative;text-align:right;width:100%;align-items:center;justify-content:space-between;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.wp-core-ui .button.site-health-view-passed{position:relative;padding-left:40px;padding-right:20px}.health-check-accordion-trigger:active,.health-check-accordion-trigger:hover{background:#f8f9f9}.health-check-accordion-trigger:focus{color:#191e23;border:none;box-shadow:none;outline-offset:-1px;outline:2px solid #0071a1;background-color:#f8f9f9}.health-check-accordion-trigger .title{pointer-events:none;font-weight:600;flex-grow:1}.health-check-accordion-trigger .icon,.site-health-view-passed .icon{border:solid #555d66;border-width:0 0 2px 2px;height:.5rem;pointer-events:none;position:absolute;left:1.5em;top:50%;transform:translateY(-70%) rotate(-45deg);width:.5rem}.health-check-accordion-trigger .badge{padding:.1rem .5rem .15rem;color:#32373c;font-weight:600;margin-right:.5rem}.health-check-accordion-trigger .badge.blue{border:1px solid #bfe7f3}.health-check-accordion-trigger .badge.orange{border:1px solid #ffb900}.health-check-accordion-trigger .badge.red{border:1px solid #dc3232}.health-check-accordion-trigger .badge.green{border:1px solid #46b450}.health-check-accordion-trigger .badge.purple{border:1px solid #826eb4}.health-check-accordion-trigger .badge.gray{border:1px solid #ccd0d4}.health-check-accordion-trigger[aria-expanded=true] .icon,.site-health-view-passed[aria-expanded=true] .icon{transform:translateY(-30%) rotate(135deg)}.health-check-accordion-panel{margin:0;padding:1em 1.5em;background:#fff}.health-check-accordion-panel[hidden]{display:none}.health-check-accordion-panel a .dashicons{text-decoration:none}.site-health .notice{margin:5px 22px 15px 20px}.site-health .update-nag{margin-bottom:20px;margin-right:22px}.health-check-wp-paths-sizes.spinner{visibility:visible;float:none;margin:0 4px;flex-shrink:0}@media screen and (max-width:782px){.health-check-body{margin:0 12px;width:auto}.site-health .notice{margin:5px 10px 15px}.site-health .update-nag{margin-left:10px;margin-right:10px}.site-health-issues-wrapper .health-check-accordion-trigger{flex-direction:column;align-items:flex-start}.health-check-accordion-trigger .badge{margin:1em 0 0}.health-check-table{table-layout:fixed}.health-check-table td{box-sizing:border-box;display:block;width:100%;word-wrap:break-word}.health-check-table td:first-child{width:100%;padding-bottom:0;font-weight:600}}@media only screen and (max-width:1004px){.health-check-body{margin:0 22px;width:auto}} \ No newline at end of file +.site-health #wpcontent,.site-health.auto-fold #wpcontent{padding-right:0}.health-check-header h1{display:inline-block;font-weight:600;margin:0 .8rem 1rem;font-size:23px;padding:9px 0 4px 0;line-height:1.3}.health-check-body h2{padding:1rem 0;line-height:1.4}.health-check-body h3{padding:0;font-weight:400}.health-check-header{text-align:center;margin:0 0 1rem;background:#fff;border-bottom:1px solid #e2e4e7}.health-check-title-section{display:flex;align-items:center;justify-content:center;clear:both}.site-health-progress-wrapper{margin-bottom:1rem}.site-health-progress{display:inline-block;height:20px;width:20px;margin:0;border-radius:100%;position:relative;font-weight:600;font-size:.4rem}.site-health-progress-count{position:absolute;display:block;height:80px;width:80px;right:50%;top:50%;margin-top:-40px;margin-right:-40px;border-radius:100%;line-height:6.3;font-size:2em}.loading .site-health-progress svg #bar{stroke-dashoffset:0;stroke:#adc5d2;animation:loadingPulse 3s infinite ease-in-out}.site-health-progress svg circle{stroke-dashoffset:0;transition:stroke-dashoffset 1s linear;stroke:#ccc;stroke-width:2em}.site-health-progress svg #bar{stroke-dashoffset:565;stroke:#dc3232}.green .site-health-progress #bar{stroke:#46b450}.green .site-health-progress .site-health-progress-label{color:#46b450}.orange .site-health-progress #bar{stroke:#ffb900}.orange .site-health-progress .site-health-progress-label{color:#ffb900}.site-health-progress-label{font-weight:600;line-height:20px;margin-right:.3rem}@keyframes loadingPulse{0%{stroke:#adc5d2}50%{stroke:#00a0d2}100%{stroke:#adc5d2}}.health-check-tabs-wrapper{display:-ms-inline-grid;-ms-grid-columns:1fr 1fr;vertical-align:top;display:inline-grid;grid-template-columns:1fr 1fr}.health-check-tab{display:block;text-decoration:none;color:inherit;padding:.5rem 1rem 1rem;margin:0 1rem;transition:box-shadow .5s ease-in-out}.health-check-tab:nth-child(1){-ms-grid-column:1}.health-check-tab:nth-child(2){-ms-grid-column:2}.health-check-tab:focus{color:#191e23;outline:1px solid #6c7781;box-shadow:none}.health-check-tab.active{box-shadow:inset 0 -3px #007cba;font-weight:600}.health-check-body{max-width:800px;margin:0 auto}.health-check-table td:first-child{width:30%}.health-check-table td{width:70%}.health-check-table ol,.health-check-table ul{margin:0}.health-check-body li{line-height:1.5}.health-check-body .good::before,.health-check-body .pass::before{content:"\f147";color:#46b450}.health-check-body .warning::before{content:"\f460";color:#ffb900}.health-check-body .info::before{content:"\f348";color:#00a0d2}.health-check-body .error::before,.health-check-body .fail::before{content:"\f335";color:#dc3232}.site-health-copy-buttons{margin:1rem 0}.site-health-copy-buttons .copy-button-wrapper{display:inline-flex;align-items:center;margin:.5rem 0 1rem}.site-health-copy-buttons .success{color:#40860a;margin-right:.5rem}.site-status-has-issues.hide{display:none}.site-health-view-more{text-align:center}.site-health-issues-wrapper:first-of-type{margin-top:3rem}.site-health-issues-wrapper{margin-bottom:3rem;margin-top:2rem}.site-status-all-clear{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;width:100%;margin-top:0}@media all and (min-width:784px){.site-status-all-clear{margin:5rem 0}}.site-status-all-clear.hide{display:none}.site-status-all-clear .dashicons{font-size:150px;height:130px;width:150px}.site-status-all-clear .encouragement{font-size:1.5rem;font-weight:600}.site-status-all-clear p{margin:0}.health-check-accordion{border:1px solid #ccd0d4}.health-check-accordion-heading{margin:0;border-top:1px solid #ccd0d4;font-size:inherit;line-height:inherit;font-weight:600;color:inherit}.health-check-accordion-heading:first-child{border-top:none}.health-check-accordion-trigger{background:#fff;border:0;color:#32373c;cursor:pointer;display:flex;font-weight:400;margin:0;padding:1em 1.5em 1em 3.5em;min-height:46px;position:relative;text-align:right;width:100%;align-items:center;justify-content:space-between;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.wp-core-ui .button.site-health-view-passed{position:relative;padding-left:40px;padding-right:20px}.health-check-accordion-trigger:active,.health-check-accordion-trigger:hover{background:#f8f9f9}.health-check-accordion-trigger:focus{color:#191e23;border:none;box-shadow:none;outline-offset:-1px;outline:2px solid #0071a1;background-color:#f8f9f9}.health-check-accordion-trigger .title{pointer-events:none;font-weight:600;flex-grow:1}.health-check-accordion-trigger .icon,.site-health-view-passed .icon{border:solid #555d66;border-width:0 0 2px 2px;height:.5rem;pointer-events:none;position:absolute;left:1.5em;top:50%;transform:translateY(-70%) rotate(-45deg);width:.5rem}.health-check-accordion-trigger .badge{padding:.1rem .5rem .15rem;color:#32373c;font-weight:600;margin-right:.5rem}.health-check-accordion-trigger .badge.blue{border:1px solid #bfe7f3}.health-check-accordion-trigger .badge.orange{border:1px solid #ffb900}.health-check-accordion-trigger .badge.red{border:1px solid #dc3232}.health-check-accordion-trigger .badge.green{border:1px solid #46b450}.health-check-accordion-trigger .badge.purple{border:1px solid #826eb4}.health-check-accordion-trigger .badge.gray{border:1px solid #ccd0d4}.health-check-accordion-trigger[aria-expanded=true] .icon,.site-health-view-passed[aria-expanded=true] .icon{transform:translateY(-30%) rotate(135deg)}.health-check-accordion-panel{margin:0;padding:1em 1.5em;background:#fff}.health-check-accordion-panel[hidden]{display:none}.health-check-accordion-panel a .dashicons{text-decoration:none}.site-health .notice{margin:5px 22px 15px 20px}.site-health .update-nag{margin-bottom:20px;margin-right:22px}.health-check-wp-paths-sizes.spinner{visibility:visible;float:none;margin:0 4px;flex-shrink:0}@media screen and (max-width:782px){.health-check-body{margin:0 12px;width:auto}.site-health .notice{margin:5px 10px 15px}.site-health .update-nag{margin-left:10px;margin-right:10px}.site-health-issues-wrapper .health-check-accordion-trigger{flex-direction:column;align-items:flex-start}.health-check-accordion-trigger .badge{margin:1em 0 0}.health-check-table{table-layout:fixed}.health-check-table td{box-sizing:border-box;display:block;width:100%;word-wrap:break-word}.health-check-table td:first-child{width:100%;padding-bottom:0;font-weight:600}.wp-core-ui .site-health-copy-buttons .copy-button{margin-bottom:0}}@media only screen and (max-width:1004px){.health-check-body{margin:0 22px;width:auto}} \ No newline at end of file diff --git a/wp-admin/css/site-health.css b/wp-admin/css/site-health.css index accd0cacdf..19269f8a43 100644 --- a/wp-admin/css/site-health.css +++ b/wp-admin/css/site-health.css @@ -203,22 +203,16 @@ } .site-health-copy-buttons .copy-button-wrapper { + display: inline-flex; + align-items: center; margin: 0.5rem 0 1rem; } .site-health-copy-buttons .success { - display: none; color: #40860a; - line-height: 1.8; margin-left: 0.5rem; } -.site-health-copy-buttons .success.visible { - display: inline-block; - height: 30px; - line-height: 2.30769231; -} - .site-status-has-issues.hide { display: none; } @@ -456,6 +450,10 @@ padding-bottom: 0; font-weight: 600; } + + .wp-core-ui .site-health-copy-buttons .copy-button { + margin-bottom: 0; + } } /* The breakpoint is usually at 960px, the additional space is to allow for the margin. */ diff --git a/wp-admin/css/site-health.min.css b/wp-admin/css/site-health.min.css index 9fab387294..6b7136bfcd 100644 --- a/wp-admin/css/site-health.min.css +++ b/wp-admin/css/site-health.min.css @@ -1,2 +1,2 @@ /*! This file is auto-generated */ -.site-health #wpcontent,.site-health.auto-fold #wpcontent{padding-left:0}.health-check-header h1{display:inline-block;font-weight:600;margin:0 .8rem 1rem;font-size:23px;padding:9px 0 4px 0;line-height:1.3}.health-check-body h2{padding:1rem 0;line-height:1.4}.health-check-body h3{padding:0;font-weight:400}.health-check-header{text-align:center;margin:0 0 1rem;background:#fff;border-bottom:1px solid #e2e4e7}.health-check-title-section{display:flex;align-items:center;justify-content:center;clear:both}.site-health-progress-wrapper{margin-bottom:1rem}.site-health-progress{display:inline-block;height:20px;width:20px;margin:0;border-radius:100%;position:relative;font-weight:600;font-size:.4rem}.site-health-progress-count{position:absolute;display:block;height:80px;width:80px;left:50%;top:50%;margin-top:-40px;margin-left:-40px;border-radius:100%;line-height:6.3;font-size:2em}.loading .site-health-progress svg #bar{stroke-dashoffset:0;stroke:#adc5d2;animation:loadingPulse 3s infinite ease-in-out}.site-health-progress svg circle{stroke-dashoffset:0;transition:stroke-dashoffset 1s linear;stroke:#ccc;stroke-width:2em}.site-health-progress svg #bar{stroke-dashoffset:565;stroke:#dc3232}.green .site-health-progress #bar{stroke:#46b450}.green .site-health-progress .site-health-progress-label{color:#46b450}.orange .site-health-progress #bar{stroke:#ffb900}.orange .site-health-progress .site-health-progress-label{color:#ffb900}.site-health-progress-label{font-weight:600;line-height:20px;margin-left:.3rem}@keyframes loadingPulse{0%{stroke:#adc5d2}50%{stroke:#00a0d2}100%{stroke:#adc5d2}}.health-check-tabs-wrapper{display:-ms-inline-grid;-ms-grid-columns:1fr 1fr;vertical-align:top;display:inline-grid;grid-template-columns:1fr 1fr}.health-check-tab{display:block;text-decoration:none;color:inherit;padding:.5rem 1rem 1rem;margin:0 1rem;transition:box-shadow .5s ease-in-out}.health-check-tab:nth-child(1){-ms-grid-column:1}.health-check-tab:nth-child(2){-ms-grid-column:2}.health-check-tab:focus{color:#191e23;outline:1px solid #6c7781;box-shadow:none}.health-check-tab.active{box-shadow:inset 0 -3px #007cba;font-weight:600}.health-check-body{max-width:800px;margin:0 auto}.health-check-table td:first-child{width:30%}.health-check-table td{width:70%}.health-check-table ol,.health-check-table ul{margin:0}.health-check-body li{line-height:1.5}.health-check-body .good::before,.health-check-body .pass::before{content:"\f147";color:#46b450}.health-check-body .warning::before{content:"\f460";color:#ffb900}.health-check-body .info::before{content:"\f348";color:#00a0d2}.health-check-body .error::before,.health-check-body .fail::before{content:"\f335";color:#dc3232}.site-health-copy-buttons{margin:1rem 0}.site-health-copy-buttons .copy-button-wrapper{margin:.5rem 0 1rem}.site-health-copy-buttons .success{display:none;color:#40860a;line-height:1.8;margin-left:.5rem}.site-health-copy-buttons .success.visible{display:inline-block;height:30px;line-height:2.30769231}.site-status-has-issues.hide{display:none}.site-health-view-more{text-align:center}.site-health-issues-wrapper:first-of-type{margin-top:3rem}.site-health-issues-wrapper{margin-bottom:3rem;margin-top:2rem}.site-status-all-clear{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;width:100%;margin-top:0}@media all and (min-width:784px){.site-status-all-clear{margin:5rem 0}}.site-status-all-clear.hide{display:none}.site-status-all-clear .dashicons{font-size:150px;height:130px;width:150px}.site-status-all-clear .encouragement{font-size:1.5rem;font-weight:600}.site-status-all-clear p{margin:0}.health-check-accordion{border:1px solid #ccd0d4}.health-check-accordion-heading{margin:0;border-top:1px solid #ccd0d4;font-size:inherit;line-height:inherit;font-weight:600;color:inherit}.health-check-accordion-heading:first-child{border-top:none}.health-check-accordion-trigger{background:#fff;border:0;color:#32373c;cursor:pointer;display:flex;font-weight:400;margin:0;padding:1em 3.5em 1em 1.5em;min-height:46px;position:relative;text-align:left;width:100%;align-items:center;justify-content:space-between;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.wp-core-ui .button.site-health-view-passed{position:relative;padding-right:40px;padding-left:20px}.health-check-accordion-trigger:active,.health-check-accordion-trigger:hover{background:#f8f9f9}.health-check-accordion-trigger:focus{color:#191e23;border:none;box-shadow:none;outline-offset:-1px;outline:2px solid #0071a1;background-color:#f8f9f9}.health-check-accordion-trigger .title{pointer-events:none;font-weight:600;flex-grow:1}.health-check-accordion-trigger .icon,.site-health-view-passed .icon{border:solid #555d66;border-width:0 2px 2px 0;height:.5rem;pointer-events:none;position:absolute;right:1.5em;top:50%;transform:translateY(-70%) rotate(45deg);width:.5rem}.health-check-accordion-trigger .badge{padding:.1rem .5rem .15rem;color:#32373c;font-weight:600;margin-left:.5rem}.health-check-accordion-trigger .badge.blue{border:1px solid #bfe7f3}.health-check-accordion-trigger .badge.orange{border:1px solid #ffb900}.health-check-accordion-trigger .badge.red{border:1px solid #dc3232}.health-check-accordion-trigger .badge.green{border:1px solid #46b450}.health-check-accordion-trigger .badge.purple{border:1px solid #826eb4}.health-check-accordion-trigger .badge.gray{border:1px solid #ccd0d4}.health-check-accordion-trigger[aria-expanded=true] .icon,.site-health-view-passed[aria-expanded=true] .icon{transform:translateY(-30%) rotate(-135deg)}.health-check-accordion-panel{margin:0;padding:1em 1.5em;background:#fff}.health-check-accordion-panel[hidden]{display:none}.health-check-accordion-panel a .dashicons{text-decoration:none}.site-health .notice{margin:5px 20px 15px 22px}.site-health .update-nag{margin-bottom:20px;margin-left:22px}.health-check-wp-paths-sizes.spinner{visibility:visible;float:none;margin:0 4px;flex-shrink:0}@media screen and (max-width:782px){.health-check-body{margin:0 12px;width:auto}.site-health .notice{margin:5px 10px 15px}.site-health .update-nag{margin-right:10px;margin-left:10px}.site-health-issues-wrapper .health-check-accordion-trigger{flex-direction:column;align-items:flex-start}.health-check-accordion-trigger .badge{margin:1em 0 0}.health-check-table{table-layout:fixed}.health-check-table td{box-sizing:border-box;display:block;width:100%;word-wrap:break-word}.health-check-table td:first-child{width:100%;padding-bottom:0;font-weight:600}}@media only screen and (max-width:1004px){.health-check-body{margin:0 22px;width:auto}} \ No newline at end of file +.site-health #wpcontent,.site-health.auto-fold #wpcontent{padding-left:0}.health-check-header h1{display:inline-block;font-weight:600;margin:0 .8rem 1rem;font-size:23px;padding:9px 0 4px 0;line-height:1.3}.health-check-body h2{padding:1rem 0;line-height:1.4}.health-check-body h3{padding:0;font-weight:400}.health-check-header{text-align:center;margin:0 0 1rem;background:#fff;border-bottom:1px solid #e2e4e7}.health-check-title-section{display:flex;align-items:center;justify-content:center;clear:both}.site-health-progress-wrapper{margin-bottom:1rem}.site-health-progress{display:inline-block;height:20px;width:20px;margin:0;border-radius:100%;position:relative;font-weight:600;font-size:.4rem}.site-health-progress-count{position:absolute;display:block;height:80px;width:80px;left:50%;top:50%;margin-top:-40px;margin-left:-40px;border-radius:100%;line-height:6.3;font-size:2em}.loading .site-health-progress svg #bar{stroke-dashoffset:0;stroke:#adc5d2;animation:loadingPulse 3s infinite ease-in-out}.site-health-progress svg circle{stroke-dashoffset:0;transition:stroke-dashoffset 1s linear;stroke:#ccc;stroke-width:2em}.site-health-progress svg #bar{stroke-dashoffset:565;stroke:#dc3232}.green .site-health-progress #bar{stroke:#46b450}.green .site-health-progress .site-health-progress-label{color:#46b450}.orange .site-health-progress #bar{stroke:#ffb900}.orange .site-health-progress .site-health-progress-label{color:#ffb900}.site-health-progress-label{font-weight:600;line-height:20px;margin-left:.3rem}@keyframes loadingPulse{0%{stroke:#adc5d2}50%{stroke:#00a0d2}100%{stroke:#adc5d2}}.health-check-tabs-wrapper{display:-ms-inline-grid;-ms-grid-columns:1fr 1fr;vertical-align:top;display:inline-grid;grid-template-columns:1fr 1fr}.health-check-tab{display:block;text-decoration:none;color:inherit;padding:.5rem 1rem 1rem;margin:0 1rem;transition:box-shadow .5s ease-in-out}.health-check-tab:nth-child(1){-ms-grid-column:1}.health-check-tab:nth-child(2){-ms-grid-column:2}.health-check-tab:focus{color:#191e23;outline:1px solid #6c7781;box-shadow:none}.health-check-tab.active{box-shadow:inset 0 -3px #007cba;font-weight:600}.health-check-body{max-width:800px;margin:0 auto}.health-check-table td:first-child{width:30%}.health-check-table td{width:70%}.health-check-table ol,.health-check-table ul{margin:0}.health-check-body li{line-height:1.5}.health-check-body .good::before,.health-check-body .pass::before{content:"\f147";color:#46b450}.health-check-body .warning::before{content:"\f460";color:#ffb900}.health-check-body .info::before{content:"\f348";color:#00a0d2}.health-check-body .error::before,.health-check-body .fail::before{content:"\f335";color:#dc3232}.site-health-copy-buttons{margin:1rem 0}.site-health-copy-buttons .copy-button-wrapper{display:inline-flex;align-items:center;margin:.5rem 0 1rem}.site-health-copy-buttons .success{color:#40860a;margin-left:.5rem}.site-status-has-issues.hide{display:none}.site-health-view-more{text-align:center}.site-health-issues-wrapper:first-of-type{margin-top:3rem}.site-health-issues-wrapper{margin-bottom:3rem;margin-top:2rem}.site-status-all-clear{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;width:100%;margin-top:0}@media all and (min-width:784px){.site-status-all-clear{margin:5rem 0}}.site-status-all-clear.hide{display:none}.site-status-all-clear .dashicons{font-size:150px;height:130px;width:150px}.site-status-all-clear .encouragement{font-size:1.5rem;font-weight:600}.site-status-all-clear p{margin:0}.health-check-accordion{border:1px solid #ccd0d4}.health-check-accordion-heading{margin:0;border-top:1px solid #ccd0d4;font-size:inherit;line-height:inherit;font-weight:600;color:inherit}.health-check-accordion-heading:first-child{border-top:none}.health-check-accordion-trigger{background:#fff;border:0;color:#32373c;cursor:pointer;display:flex;font-weight:400;margin:0;padding:1em 3.5em 1em 1.5em;min-height:46px;position:relative;text-align:left;width:100%;align-items:center;justify-content:space-between;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.wp-core-ui .button.site-health-view-passed{position:relative;padding-right:40px;padding-left:20px}.health-check-accordion-trigger:active,.health-check-accordion-trigger:hover{background:#f8f9f9}.health-check-accordion-trigger:focus{color:#191e23;border:none;box-shadow:none;outline-offset:-1px;outline:2px solid #0071a1;background-color:#f8f9f9}.health-check-accordion-trigger .title{pointer-events:none;font-weight:600;flex-grow:1}.health-check-accordion-trigger .icon,.site-health-view-passed .icon{border:solid #555d66;border-width:0 2px 2px 0;height:.5rem;pointer-events:none;position:absolute;right:1.5em;top:50%;transform:translateY(-70%) rotate(45deg);width:.5rem}.health-check-accordion-trigger .badge{padding:.1rem .5rem .15rem;color:#32373c;font-weight:600;margin-left:.5rem}.health-check-accordion-trigger .badge.blue{border:1px solid #bfe7f3}.health-check-accordion-trigger .badge.orange{border:1px solid #ffb900}.health-check-accordion-trigger .badge.red{border:1px solid #dc3232}.health-check-accordion-trigger .badge.green{border:1px solid #46b450}.health-check-accordion-trigger .badge.purple{border:1px solid #826eb4}.health-check-accordion-trigger .badge.gray{border:1px solid #ccd0d4}.health-check-accordion-trigger[aria-expanded=true] .icon,.site-health-view-passed[aria-expanded=true] .icon{transform:translateY(-30%) rotate(-135deg)}.health-check-accordion-panel{margin:0;padding:1em 1.5em;background:#fff}.health-check-accordion-panel[hidden]{display:none}.health-check-accordion-panel a .dashicons{text-decoration:none}.site-health .notice{margin:5px 20px 15px 22px}.site-health .update-nag{margin-bottom:20px;margin-left:22px}.health-check-wp-paths-sizes.spinner{visibility:visible;float:none;margin:0 4px;flex-shrink:0}@media screen and (max-width:782px){.health-check-body{margin:0 12px;width:auto}.site-health .notice{margin:5px 10px 15px}.site-health .update-nag{margin-right:10px;margin-left:10px}.site-health-issues-wrapper .health-check-accordion-trigger{flex-direction:column;align-items:flex-start}.health-check-accordion-trigger .badge{margin:1em 0 0}.health-check-table{table-layout:fixed}.health-check-table td{box-sizing:border-box;display:block;width:100%;word-wrap:break-word}.health-check-table td:first-child{width:100%;padding-bottom:0;font-weight:600}.wp-core-ui .site-health-copy-buttons .copy-button{margin-bottom:0}}@media only screen and (max-width:1004px){.health-check-body{margin:0 22px;width:auto}} \ No newline at end of file diff --git a/wp-admin/js/site-health.js b/wp-admin/js/site-health.js index b0f24c7121..4e70556d39 100644 --- a/wp-admin/js/site-health.js +++ b/wp-admin/js/site-health.js @@ -10,19 +10,38 @@ jQuery( document ).ready( function( $ ) { var __ = wp.i18n.__, _n = wp.i18n._n, - sprintf = wp.i18n.sprintf; - - var data; - var clipboard = new ClipboardJS( '.site-health-copy-buttons .copy-button' ); - var isDebugTab = $( '.health-check-body.health-check-debug-tab' ).length; - var pathsSizesSection = $( '#health-check-accordion-block-wp-paths-sizes' ); + sprintf = wp.i18n.sprintf, + data, + clipboard = new ClipboardJS( '.site-health-copy-buttons .copy-button' ), + isDebugTab = $( '.health-check-body.health-check-debug-tab' ).length, + pathsSizesSection = $( '#health-check-accordion-block-wp-paths-sizes' ), + successTimeout; // Debug information copy section. clipboard.on( 'success', function( e ) { - var $wrapper = $( e.trigger ).closest( 'div' ); - $( '.success', $wrapper ).addClass( 'visible' ); + var triggerElement = $( e.trigger ), + successElement = $( '.success', triggerElement.closest( 'div' ) ); - wp.a11y.speak( __( 'Site information has been added to your clipboard.' ) ); + // Clear the selection and move focus back to the trigger. + e.clearSelection(); + // Handle ClipboardJS focus bug, see https://github.com/zenorocha/clipboard.js/issues/680 + triggerElement.focus(); + + // Show success visual feedback. + clearTimeout( successTimeout ); + successElement.removeClass( 'hidden' ); + + // Hide success visual feedback after 3 seconds since last success. + successTimeout = setTimeout( function() { + successElement.addClass( 'hidden' ); + // Remove the visually hidden textarea so that it isn't perceived by assistive technologies. + if ( clipboard.clipboardAction.fakeElem && clipboard.clipboardAction.removeFake ) { + clipboard.clipboardAction.removeFake(); + } + }, 3000 ); + + // Handle success audible feedback. + wp.a11y.speak( __( 'Site information has been copied to your clipboard.' ) ); } ); // Accordion handling in various areas. diff --git a/wp-admin/js/site-health.min.js b/wp-admin/js/site-health.min.js index 6c7f467e4f..9056768ddd 100644 --- a/wp-admin/js/site-health.min.js +++ b/wp-admin/js/site-health.min.js @@ -1,2 +1,2 @@ /*! This file is auto-generated */ -jQuery(document).ready(function(o){var e,t,s,a,r=wp.i18n.__,n=wp.i18n._n,h=wp.i18n.sprintf,i=new ClipboardJS(".site-health-copy-buttons .copy-button"),u=o(".health-check-body.health-check-debug-tab").length,c=o("#health-check-accordion-block-wp-paths-sizes");function l(e){var t,s,a=wp.template("health-check-issue"),i=o("#health-check-issues-"+e.status);SiteHealth.site_status.issues[e.status]++,s=SiteHealth.site_status.issues[e.status],"critical"===e.status?t=h(n("%s critical issue","%s critical issues",s),''+s+""):"recommended"===e.status?t=h(n("%s recommended improvement","%s recommended improvements",s),''+s+""):"good"===e.status&&(t=h(n("%s item with no issues detected","%s items with no issues detected",s),''+s+"")),t&&o(".site-health-issue-count-title",i).html(t),o(".issues","#health-check-issues-"+e.status).append(a(e))}function d(){var e,t,s=o(".site-health-progress"),a=s.closest(".site-health-progress-wrapper"),i=o(".site-health-progress-label",a),n=o(".site-health-progress svg #bar"),h=parseInt(SiteHealth.site_status.issues.good,0)+parseInt(SiteHealth.site_status.issues.recommended,0)+1.5*parseInt(SiteHealth.site_status.issues.critical,0),c=.5*parseInt(SiteHealth.site_status.issues.recommended,0)+1.5*parseInt(SiteHealth.site_status.issues.critical,0),l=100-Math.ceil(c/h*100);0!==h?(a.removeClass("loading"),e=n.attr("r"),l<0&&(l=0),100'+s+""):"recommended"===e.status?t=c(n("%s recommended improvement","%s recommended improvements",s),''+s+""):"good"===e.status&&(t=c(n("%s item with no issues detected","%s items with no issues detected",s),''+s+"")),t&&l(".site-health-issue-count-title",i).html(t),l(".issues","#health-check-issues-"+e.status).append(a(e))}function p(){var e,t,s=l(".site-health-progress"),a=s.closest(".site-health-progress-wrapper"),i=l(".site-health-progress-label",a),n=l(".site-health-progress svg #bar"),c=parseInt(SiteHealth.site_status.issues.good,0)+parseInt(SiteHealth.site_status.issues.recommended,0)+1.5*parseInt(SiteHealth.site_status.issues.critical,0),h=.5*parseInt(SiteHealth.site_status.issues.recommended,0)+1.5*parseInt(SiteHealth.site_status.issues.critical,0),o=100-Math.ceil(h/c*100);0!==c?(a.removeClass("loading"),e=n.attr("r"),o<0&&(o=0),100 - + diff --git a/wp-includes/version.php b/wp-includes/version.php index ed61fa2749..c8cab32b2d 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -13,7 +13,7 @@ * * @global string $wp_version */ -$wp_version = '5.5-alpha-48232'; +$wp_version = '5.5-alpha-48233'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.