Commit Graph

23 Commits

Author SHA1 Message Date
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