Commit Graph

31 Commits

Author SHA1 Message Date
ryelle 10d1280ff3 Administration: Update color contrast on UI elements.
The color palette changes in #49999 introduced some contrast issues on buttons, input elements, and links. This change ensures that all interactive elements have an appropriate contrast ratio.

Follow-up to [50025].
Props audrasjb, joedolson.
Fixes #52402.


Built from https://develop.svn.wordpress.org/trunk@50278


git-svn-id: http://core.svn.wordpress.org/trunk@49923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-02-09 19:47:03 +00:00
ryelle fed21a9863 Administration: Standardize colors used in CSS to a single palette.
This is part of a larger project in cleaning up core's admin CSS. This collapses all colors used in the CSS to one of 12 blues, greens, reds, and yellows, 13 grays, pure black, and pure white. The colors are perceptually uniform from light to dark, half of each range has a 4.5 or higher contrast against white, the other half has a 4.5 or higher contrast against black.

Standardizing on this set of colors will help contributors make consistent, accessible design decisions. The full color palette can be seen here: https://codepen.io/ryelle/full/WNGVEjw

Props notlaura, danfarrow, kburgoine, drw158, audrasjb, Joen, hedgefield, ibdz, melchoyce.
See #49999.


Built from https://develop.svn.wordpress.org/trunk@50025


git-svn-id: http://core.svn.wordpress.org/trunk@49726 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-01-26 18:54:59 +00:00
desrosj 3eb9b3e714 Build/Test Tools: Update CSS files after `grunt precommit:css`.
This removes instances of the `-moz-user-select` property, which was required until Firefox 68.

Firefox is currently in version 84, so these can safely be removed.

Fixes #52332.
Built from https://develop.svn.wordpress.org/trunk@49991


git-svn-id: http://core.svn.wordpress.org/trunk@49692 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-01-20 19:07:00 +00:00
desrosj b2622d5d8c Site Health: Use consistent padding around header tags.
Props vinita29, clorith.
Fixes #50638.
Built from https://develop.svn.wordpress.org/trunk@49229


git-svn-id: http://core.svn.wordpress.org/trunk@48991 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-10-20 14:18:08 +00:00
Andrea Fercia 7a785704c0 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
2020-06-30 13:26:03 +00:00
Sergey Biryukov dee326a5e4 Accessibility: Site Health: Make the heading text for site health check issues easier to select in Firefox.
Props afercia, sabernhardt, johnbillion, Clorith, audrasjb.
Fixes #50281.
Built from https://develop.svn.wordpress.org/trunk@48144


git-svn-id: http://core.svn.wordpress.org/trunk@47913 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-06-23 20:48:10 +00:00
Sergey Biryukov c32e05f308 Site Health: Improve focus style for accordion items on Site Health screens.
The new style is more consistent with other elements like `.wp-core-ui` buttons.

Props audrasjb, mensmaximus, afercia, melchoyce, Clorith.
Fixes #48578.
Built from https://develop.svn.wordpress.org/trunk@47188


git-svn-id: http://core.svn.wordpress.org/trunk@46988 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-02-05 06:43:04 +00:00
Sergey Biryukov d3d630c98a Site Health: Make sure the "Copied!" text is vertically centered to the "Copy site info to clipboard" button.
Props garrett-eclipse.
Fixes #49139.
Built from https://develop.svn.wordpress.org/trunk@47047


git-svn-id: http://core.svn.wordpress.org/trunk@46847 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-01-07 00:09:04 +00:00
Andrea Fercia 271f45072d Accessibility: Improve and modernize user interface controls for better contrast. Second part: tables, meta boxes, and other user interface elements.
Introduces better contrast for borders of the following user interface elements:
- Tables
- Screen Options and Help 
- Admin notices
- Welcome panel
- Meta boxes (post boxes)
- Cards
- Health Check accordions and headings
- Theme and Plugin upload forms

Props kjellr, melchoyce, karmatosed, audrasjb.
Fixes #48101.

Built from https://develop.svn.wordpress.org/trunk@46242


git-svn-id: http://core.svn.wordpress.org/trunk@46054 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 15:10:59 +00:00
Sergey Biryukov 42079f34a9 Site Health: Modify the grading indicator to remove percentage score in favor of a "Good" or "Should be improved" status.
This removes arbitrary confusion about what the numbers mean.

Props Clorith, hedgefield, Cybr, arena, DavidAnderson, earnjam, daveshine, Otto42, azaozz, asadkn, KARTHOST, tigertech, maximejobin, johnbillion, raboodesign, ramiy, afragen.
Fixes #47046.
Built from https://develop.svn.wordpress.org/trunk@46106


git-svn-id: http://core.svn.wordpress.org/trunk@45918 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-14 14:29:56 +00:00
Andrea Fercia 9f579ea448 Administration: Improve the horizontal centering of the Site Health tabs.
Props dkarfa, davidbaumwald, Clorith, tinkerbelly, afercia.
Fixes #46881.

Built from https://develop.svn.wordpress.org/trunk@45522


git-svn-id: http://core.svn.wordpress.org/trunk@45333 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-12 19:31:52 +00:00
Andrea Fercia 41accccad6 Administration: Improve the Site Health tables layout for small screens.
Props immeet94, jankimoradiya, desrosj, shashank3105, chetan200891, Clorith, hedgefield.	
Fixes #46960.

Built from https://develop.svn.wordpress.org/trunk@45463


git-svn-id: http://core.svn.wordpress.org/trunk@45274 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-05-29 18:22:51 +00:00
desrosj ca7c9a8288 Site Health: Improve alignment and spacing for section headers.
This changes the CSS for Site Health headers to use flexbox, which helps ensure the text is vertically aligned center and consistently spaced in both the Status and Info tabs. It also fixes an issue where the loading spinner GIF was cut off on smaller screens (originally reported in #47203.

Props Presskopp, odminstudios, kjellr, afercia, desrosj, hedgefield, ianbelanger, xavortm.
Fixes #47063.
Built from https://develop.svn.wordpress.org/trunk@45322


git-svn-id: http://core.svn.wordpress.org/trunk@45133 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-05-16 18:30:53 +00:00
desrosj f48f926077 Site Health: Improve vertical alignment of icons in test result descriptions.
This change removes redundant CSS properties for different health check statuses in favor of utilizing the `.dashicons` class already in Core to define them more consistently. This also fixes the vertical alignment issues.

Props chetan200891, Clorith, desrosj.
Fixes #46940.
Built from https://develop.svn.wordpress.org/trunk@45309


git-svn-id: http://core.svn.wordpress.org/trunk@45120 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-05-15 14:26:07 +00:00
Andrea Fercia d89a302503 Site Health: Improve the accordions styles for small screens.
Also, changes the hex color values to lowercase.

Props subrataemfluence, man4toman, garrett-eclipse, chetan200891, mukesh27, melchoyce, karmatosed, Clorith.
Fixes #46949.

Built from https://develop.svn.wordpress.org/trunk@45229


git-svn-id: http://core.svn.wordpress.org/trunk@45038 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-17 11:00:53 +00:00
Andrea Fercia fc7a8f7194 Administration: Improve the Site Health "Passed tests" button style for small screens.
Props chetan200891.
Fixes #46939.

Built from https://develop.svn.wordpress.org/trunk@45217


git-svn-id: http://core.svn.wordpress.org/trunk@45026 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-16 16:23:52 +00:00
Mel Choyce df276c333a Administration: Update chevron color in Site Health.
Props afercia.
Fixes #46934. See #46730.

Built from https://develop.svn.wordpress.org/trunk@45202


git-svn-id: http://core.svn.wordpress.org/trunk@45011 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-15 18:56:54 +00:00
Andrea Fercia 10239ba45d Administration: Add a chevron icon to the Site Health "Passed tests" button.
The chevron icon helps clarify what the button does.

Props garrett-eclipse, Clorith, xkon, melchoyce.
Fixes #46730.

Built from https://develop.svn.wordpress.org/trunk@45201


git-svn-id: http://core.svn.wordpress.org/trunk@45010 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-15 18:01:53 +00:00
Andrew Ozz 30ccfd540f Site health: Load the "Info" tab immediately and notify the user while gathering site data. Changes the Info tab to work similarly to the Status tab: it does separate request to fetch the directories sizes and doesn't "block" the loading of the page.
Props xkon, afercia, Clorith, azaozz.
See #46707.
Built from https://develop.svn.wordpress.org/trunk@45176


git-svn-id: http://core.svn.wordpress.org/trunk@44985 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-12 19:24:51 +00:00
desrosj 6afe73667c Site Health: Add missing actions to tests.
This change adds missing actions for several tests. This ensures that the user is provided with a next step, whenever possible.

Also, change the URL displayed in the WordPress.org communication test description to `api.wordpress.org` for accuracy.

Props: garrett-eclipse, Clorith, vaishalipanchal.
Fixes #46734.
Built from https://develop.svn.wordpress.org/trunk@45170


git-svn-id: http://core.svn.wordpress.org/trunk@44979 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-12 17:40:53 +00:00
desrosj 5bafb4ea2d Site Health: Improve the test badge implementation.
Label badges for each Site Health test currently display in either red, orange, or green, regardless of if the test passed or failed. This is confusing, as seeing red labels in the “Passed Test” section could alarm users (when really everything is OK and no action is required), and seeing green labels in the “Failed Tests” section would not appropriately encourage the user to take appropriate action.

This change makes several improvements to the label badges:

- Always right align the badges for consistent display.
- Remove background fill for badges. Instead, use a border.
- Use a consistent styling for all tests (passed and failed).
- The text color no longer uses true black (#000000).
- The `.badge.pink` CSS definition has been switched to `.badge.purple`, and the definitions for blue, gray, and green have also been updated to more closely follow the official WordPress color palette.

Props: pbiron, garrett-eclipse, hedgefield, Clorith, xkon, melchoyce, mdwolinski, alexdenning.
Fixes #46623.
Built from https://develop.svn.wordpress.org/trunk@45169


git-svn-id: http://core.svn.wordpress.org/trunk@44978 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-12 17:04:52 +00:00
Gary Pendergast 5b8db48734 Site Health: Remove animated ellipsis from the status loading indicator.
This animation wasn't particularly reliable across browsers.

Props Clorith, afercia.
Fixes #46684.


Built from https://develop.svn.wordpress.org/trunk@45145


git-svn-id: http://core.svn.wordpress.org/trunk@44954 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-08 23:29:51 +00:00
Sergey Biryukov 7eecc96e2d CSS Coding Standards: Use unitless values for `line-height` in `wp-admin/css/site-health.css`.
Props mukesh27, ianbelanger, pbiron, afercia.
Fixes #46760. See #44643.
Built from https://develop.svn.wordpress.org/trunk@45128


git-svn-id: http://core.svn.wordpress.org/trunk@44937 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-07 05:44:50 +00:00
Andrea Fercia 83546a04f5 Administration: Site Health: reserve some space for the admin notices.
Props xkon, Clorith, hedgefield, mapk, karmatosed, afercia.
Fixes #46651.

Built from https://develop.svn.wordpress.org/trunk@45091


git-svn-id: http://core.svn.wordpress.org/trunk@44900 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-01 18:01:52 +00:00
Andrea Fercia d8b8994336 Accessibility: Improve the Site Health accordions.
- removes the definition list and uses the markup from the ARIA Authoring Practices example
- removes incorrect ARIA roles
- avoids ARIA landmark regions proliferation

Props mukesh27 for the initial patch.
Fixes #46714.

Built from https://develop.svn.wordpress.org/trunk@45087


git-svn-id: http://core.svn.wordpress.org/trunk@44896 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-01 15:08:58 +00:00
Andrea Fercia fdda9ca9dd Coding Standards: Improve the Site Health CSS for small screens.
Amends #45071.
See #46685.

Built from https://develop.svn.wordpress.org/trunk@45074


git-svn-id: http://core.svn.wordpress.org/trunk@44883 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-30 14:09:51 +00:00
Andrea Fercia 0942dfc6d4 Administration: Improve the CSS for the Site Health pages header.
Avoids the Site Health pages header layout to break when the Hello Dolly plugin or other floated content is printed out at the top of the page.

Props xkon.
Fixes #46650.

Built from https://develop.svn.wordpress.org/trunk@45072


git-svn-id: http://core.svn.wordpress.org/trunk@44881 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-29 18:55:50 +00:00
Andrea Fercia 2a99454732 Coding Standards: Clean up the Site Health stylesheet.
- reduces selectors specificity to avoid over-qualified selectors
- removes unused rulesets / properties
- renames some CSS classes

Fixes #46685.

Built from https://develop.svn.wordpress.org/trunk@45071


git-svn-id: http://core.svn.wordpress.org/trunk@44880 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-29 18:44:51 +00:00
Gary Pendergast 65f7cdbce0 Site Health: Improve the "Copy to clipboard" button.
The previous method for copying the debug report to the clipboard involved having a hidden `<textarea>`, but this shows up in screen readers and can't be reliably hidden.

To work around this, the button now uses the `clipboard.js` library, which automatically handles browser differences in the Clipboard API, and can load the text to copy from a `data-` attribute on the button.

Props pento, hedgefield, afercia.
Fixes #46647.


Built from https://develop.svn.wordpress.org/trunk@45044


git-svn-id: http://core.svn.wordpress.org/trunk@44853 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-27 22:31:52 +00:00
Andrea Fercia 9b15549b1c Accessibility: Simplify the Site Health score indicator.
The Site Health score indicator isn't exactly a "progress bar" and shouldn't use ARIA roles and properties related to progress bars. Also, some browser / screen reader combinations don't announce the score properly.
- removes any ARIA
- adds a screen-reader-text "Current health score:"
- adds `role="img" aria-hidden="true" focusable="false"` to the SVG
- reduces CSS specificity simplifying unnecessary overqualified selectors
- fixes the syntax for ::after and ::before (double colon)

Fixes #46621.

Built from https://develop.svn.wordpress.org/trunk@45041


git-svn-id: http://core.svn.wordpress.org/trunk@44850 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-27 20:39:51 +00:00
Gary Pendergast 0a9d61ab63 Admin: Introduce the Site Health screens.
The Site Health tool serves two purposes:
- Provide site owners with information to improve the performance, reliability, and security of their site.
- Collect comprehensive debug information about the site.

By encouraging site owners to maintain their site and adhere to modern best practices, we ultimately improve the software hygeine of both the WordPress ecosystem, and the open internet as a whole.

Props Clorith, hedgefield, melchoyce, xkon, karmatosed, jordesign, earnjam, ianbelanger, wpscholar, desrosj, pedromendonca, peterbooker, jcastaneda, garyj, soean, pento, timothyblynjacobs, zodiac1978, dgroddick, garrett-eclipse, netweb, tobifjellner, pixolin, afercia, joedolson, birgire.
See #46573.

Built from https://develop.svn.wordpress.org/trunk@44986


git-svn-id: http://core.svn.wordpress.org/trunk@44817 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-23 03:55:53 +00:00