Commit Graph

327 Commits

Author SHA1 Message Date
Sergey Biryukov
85bde2e551 Accessibility: Administration: Use a darker gray color for various admin UI items.
This ensures that the color meets the WCAG 2.0 AA recommended contrast ratio.

Follow-up to [50025], [50525].

Props sabernhardt, ryelle.
Merges [50571] to the 5.7 branch.
Fixes #52760.
Built from https://develop.svn.wordpress.org/branches/5.7@50578


git-svn-id: http://core.svn.wordpress.org/branches/5.7@50191 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-03-25 14:44:06 +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
Sergey Biryukov
4bb4107f50 General: Use correct value for the speak property in various CSS files.
Follow-up to [49263].

Props hareesh-pillai.
Fixes #51622.
Built from https://develop.svn.wordpress.org/trunk@49309


git-svn-id: http://core.svn.wordpress.org/trunk@49071 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-10-26 02:25:09 +00:00
John Blackbourn
afbfe981fc Media: Add an audio and video player to the media manager modal.
This introduces a means of playing existing audio and video files while browsing them prior to selecting them for use.

Props antpb, Mista-Flo, garrett-eclipse, mapk

Fixes #43640

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


git-svn-id: http://core.svn.wordpress.org/trunk@48957 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-10-18 17:39:07 +00:00
Sergey Biryukov
2cbcc5d548 Media: Make the "Copy URL" button implementation more consistent with other instances in core:
* Make the "Copied!" text green.
* Make the button verbiage clear that it's copied "to clipboard".

Props garrett-eclipse, mukesh27.
Fixes #51355.
Built from https://develop.svn.wordpress.org/trunk@49064


git-svn-id: http://core.svn.wordpress.org/trunk@48826 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-09-27 20:48:05 +00:00
Andrea Fercia
aee4324b9e Accessibility: Media: Improve accessibility of the status and error messages in the Image Editor.
- improves focus management by moving focus to the notices, if any, or to the first "tabbable" element
- this avoids a focus loss and helps Braille-only and screen magnification users to be aware of the messages
- adds an ARIA role `alert` to all the notices 
- uses `wp.a11y.speak()` to announce messages to assistive technology
- this way, all visual users will see the messages while assistive technology users will get an audible message
- uses `wp.i18n` for translatable strings in `wp-admin/js/image-edit.js`

Props anevins, ryanshoover, antpb, SergeyBiryukov, afercia.
See #20491.
Fixes #47147.

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


git-svn-id: http://core.svn.wordpress.org/trunk@48144 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-07-07 13:45:02 +00:00
Andrea Fercia
afa6bb4f1a Accessibility: Improve color contrast for the blue links :hover state.
For a number of years, WordPress has been using a `#00a0d2` blue shade for the links `:hover` state. This blue shade doesn't have a sufficient color contrast with the various (too many) background colors used in the admin interface.

The new `#006799` blue shade is part of the official WordPress color palette and does have a sufficient color contrast with most of the admin backgrounds.

Props ryokuhi, audrasjb, joedolson, mapk.
See #47682.

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


git-svn-id: http://core.svn.wordpress.org/trunk@48137 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-07-07 10:11:05 +00:00
Andrea Fercia
eebf187963 Accessibility: Media: Add a "Copy URL" button to the attachment File URL fields.
For a number of years, various screens in the WordPress admin provided users with a readonly input field to copy the attachment file URL. Manually copying from a readonly field is an annoying task at best even for mouser users. It's a usability and accessibility issue at the same time. 
These fields now have a new "Copy URL" button that is easy to use and accessible to everyone.

Props theolg, markdubois, vabrashev, sajjad67, xkon, nrqsnchz, melchoyce, audrasjb, afercia.
See #41612, #50322, #50335.
Fixes #48463.

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


git-svn-id: http://core.svn.wordpress.org/trunk@48001 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-06-30 13:16:04 +00:00
Andrew Ozz
10e3e44219 Media: Remove display: none; from the (visually hidden) <input type="file"> button used in Plupload to select files for uploading. Fixes selecting files in Edge <= 44 and iOS Safari.
Props treecutter, johnbillion, pbiron, isabel_brison, Ipstenu, azaozz.
Fixes #49753 for trunk.
Built from https://develop.svn.wordpress.org/trunk@47549


git-svn-id: http://core.svn.wordpress.org/trunk@47324 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-04-04 22:54:09 +00:00
Sergey Biryukov
8136532954 Accessibility: Media: Hide the invisible "file upload button" on media views from assistive technologies.
The button is visually hidden, but was announced by screen readers in workflows unrelated to file uploading, leading to confusion.

Props afercia, audrasjb, azaozz.
Fixes #47611.
Built from https://develop.svn.wordpress.org/trunk@47375


git-svn-id: http://core.svn.wordpress.org/trunk@47162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-02-25 20:44:06 +00:00
Andrea Fercia
0fcc994a8f Media: Fix bottom spacing on various Media Modal elements for non-webkit browsers.
Implementation of bottom padding in overflow content differs across browsers. See https://github.com/w3c/csswg-drafts/issues/129. To make bottom spacing consistent across browsers there's the need for an alternate CSS method.
- uses a CSS `after` pseudo element or simply a bottom margin to reserve some bottom spacing
- removes a couple leftovers from [40428]
- fixes an annoying visual glitch where the media modal content is visible behind the bottom toolbar border

Props sabernhardt, afercia.
See #40152.
Fixes #48378.

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


git-svn-id: http://core.svn.wordpress.org/trunk@47066 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-02-11 16:32:06 +00:00
Sergey Biryukov
a209908501 Administration: Standardize form control height and alignment across the admin.
This improves the appearance of various form controls in the admin and addresses some visual inconsistencies in WordPress 5.3.

Props afercia, audrasjb, jameskoster, GDragoN, azaozz, michaelarestad, murgroland, SamuelFernandez, chetan200891, veminom, dlh.
Fixes #48420.
Built from https://develop.svn.wordpress.org/trunk@46866


git-svn-id: http://core.svn.wordpress.org/trunk@46666 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-12-09 20:26:03 +00:00
Andrew Ozz
b37a2b5c3b Media: After [46237] add the same fix to the .button-group on the "Insert form URL" screen in the media modal.
Props afercia, sabernhardt.
FIxes #48087.
Built from https://develop.svn.wordpress.org/trunk@46567


git-svn-id: http://core.svn.wordpress.org/trunk@46364 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-21 23:23:04 +00:00
Andrea Fercia
44de60e8da Script Loader: Partially revert [46550] as it brought in unrelated CSS changes.
[46550] was meant to revert [46440] but it also merged some unrelated CSS changes.

See #47069.

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


git-svn-id: http://core.svn.wordpress.org/trunk@46356 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-16 17:49:03 +00:00
Andrea Fercia
02810533c4 Accessibility: Script Loader: Remove jQuery as dependency of admin-bar after [46440].
A better approach needs to be explored, as there are valid concerns for potential conflicts between different jQuery versions added by themes or plugins.

See #47069.

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


git-svn-id: http://core.svn.wordpress.org/trunk@46347 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-15 17:23:04 +00:00
Andrea Fercia
d5bfc553b9 Accessibility: Media: Improve the Media Modal spinner position after [46418].
Fixes #47138.

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


git-svn-id: http://core.svn.wordpress.org/trunk@46346 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-15 16:47:02 +00:00
Sergey Biryukov
ddcf1fb843 CSS Coding Standards: Use unitless values for line-height in wp-includes/css/media-views.css.
Follow-up to [45478].

Props ianbelanger, afercia.
Fixes #46529. See #44643.
Built from https://develop.svn.wordpress.org/trunk@46431


git-svn-id: http://core.svn.wordpress.org/trunk@46229 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-08 02:57:03 +00:00
Andrea Fercia
1f3d583825 Accessibility: Media: Improve the search media field labelling.
Visible `<label>` elements benefit all users. The `placeholder` attribute should not be used as a replacement for visible labels.
Instead, it's supposed to be used only for a short hint to aid users with data entry e.g. a sample value or a brief description of the expected format.

Screen readers may not announce a `placeholder` attribute at all. Other users may suffer from the lack of a visible label and a placeholder used as replacement, for example:

- users with cognitive disabilities may have trouble remembering what the filled field does
- speech recognition users cannot see the name they can speak to set focus on the field
- low-vision users with high text-size may not be able to see the whole placeholder even when it's visible, if its value is clipped by the edge of the input

Props anevins, audrasjb, karmatosed, azaozz, SergeyBiryukov, afercia.
See #40331.
Fixes #47138.

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


git-svn-id: http://core.svn.wordpress.org/trunk@46216 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-07 12:43:03 +00:00
Andrea Fercia
b1cd71c2d2 Accessibility: Media: Add more headings in the Media Modal.
Headings are the predominant mechanism for screen reader users to find information in a page. They also help all users to better identify the main sections of user interfaces.

- adds three new headings within the media modal 
- improves plural form translation for "item selected" by using `wp.i18n`
- horizontally centers the media modal menu in the responsive view

Props kjellr, karmatosed, melchoyce, afercia.
See #47149.
Fixes #47610.

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


git-svn-id: http://core.svn.wordpress.org/trunk@46174 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-03 12:10:57 +00:00
Andrea Fercia
91ab0b3989 Accessibility: Media: Allow users to set a proper language for Video subtitles.
For a number of years, subtitles track added to videos were always set to "English" regardless of the actual subtitles language.

By making the track `srclang`, `label`, and `kind` attributes editable, content authors are now able to set a language that matches the actual track content.

Props BjornW, audrasjb, birgire, karmatosed, sabernhardt, afercia.
Fixes #47559.

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


git-svn-id: http://core.svn.wordpress.org/trunk@46172 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-01 22:05:58 +00:00
Andrea Fercia
63e199abc7 Accessibility: Media: Use the ARIA tabs pattern for the media modal menus.
The ARIA tabs pattern improves interaction for keyboard and assistive technologies users.
It gives the menu items proper roles, and `aria-selected` allows users of assistive technologies to know which tab is currently selected.

Props audrasjb, afercia, joedolson, karmatosed, melchoyce.
See #47149.

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


git-svn-id: http://core.svn.wordpress.org/trunk@46162 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 19:37:58 +00:00
Andrea Fercia
e534fdf5aa Media: Fix the media modal "Insert from URL" field height after [46356].
See #47477.

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


git-svn-id: http://core.svn.wordpress.org/trunk@46161 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 19:20:58 +00:00
Andrea Fercia
6566808e8a 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.

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


git-svn-id: http://core.svn.wordpress.org/trunk@46155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 17:24:59 +00:00
Andrea Fercia
f9dbf1dd84 Accessibility: Improve and modernize user interface controls for better contrast. Fourth part: Media Views form controls.
Props anevins, audrasjb, nrqsnchzm, kjellr, karmatosed.
Fixes #47150.

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


git-svn-id: http://core.svn.wordpress.org/trunk@46056 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 15:49:57 +00:00
Andrea Fercia
38be855367 Accessibility: Improve and modernize user interface controls. Third part: allow buttons and form controls to scale with text.
Props kjellr, abrightclearweb, audrasjb.
Fixes #47477.

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


git-svn-id: http://core.svn.wordpress.org/trunk@46055 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 15:27:57 +00:00
Andrea Fercia
317ceae1ea Media: Fix buttons group layout for Internet Explorer 11 after [45499].
Props sabernhardt, afercia.
See #47122.
Fixes #48087.

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


git-svn-id: http://core.svn.wordpress.org/trunk@46049 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 10:00:59 +00:00
Andrea Fercia
00704114e0 Accessibility: Make the Media modal an ARIA modal dialog.
For a number of years, the Media modal missed an explicit ARIA role and the required attributes for modal dialogs.

This was confusing for assistive technology users, since they may not realize they're inside a dialog, and that consequently the keyboard interactions may be different from the rest of the page. Lack of an explicit label for the dialog was confusing as well, since assistive technology users didn't have an immediate sense of what the dialog is for.

This change makes the Media modal meet the ARIA Authoring Practices recommendations, helping users better understand the purpose and interactions with the modal. Also, it makes sure to hide the rest of the page content from assistive technologies, until support for `aria-modal="true"` improves.

Additionally:
- moves the modal H1 heading to the beginning of the modal content 
- changes the modal left menu position to make visual and DOM order match 
- improves the `wp.media.view.FocusManager` documentation

Fixes #47145.

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


git-svn-id: http://core.svn.wordpress.org/trunk@45383 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-27 12:33:56 +00:00
Andrea Fercia
c622fb4fe1 Media: Make sure the bottom media toolbar content is fully visible with Internet Explorer 11.
Props mspatovaliyski.
Fixes #47502.

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


git-svn-id: http://core.svn.wordpress.org/trunk@45337 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-13 14:12:52 +00:00
Andrea Fercia
6a9bcaeaa9 Accessibility: Improve accessibility of all the media views form controls.
- changes the media views form controls to have explicitly associated labels with for/id attributes
- adds a few missing labels / aria-labels
- improves a few existing labels / aria-labels
- improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes
- improves the image custom size input fields and their labelling
- adds `role="status"` to the "saved" indicator so that status messages are announced to assistive technologies
- swaps the columns source order in the image details template, to make visual and DOM order match
- swaps the "Replace" and "Back" buttons source order in the Replace Image view, to make visual and DOM order match
- gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right
- merge similar strings, unified to "Drop files to upload" (removed "Drop files here", and "Drop files anywhere to upload")
- makes the "upload-ui" consistent across the media views
- hides the IE 11 "X" `::-ms-clear` button in the Insert from URL field, as it conflicts with the uploading spinner
- adds comments to all the media templates to clarify their usage
- slightly increases vertical spacing between form fields in the media sidebar
- removes some CSS selectors introduced as backwards compatibility for WordPress pre-4.4
- removes some CSS still targeting Internet Explorer 7 and 8

Fixes #47141.
Fixes #47122.

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


git-svn-id: http://core.svn.wordpress.org/trunk@45310 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-07 20:45:02 +00:00
Sergey Biryukov
96a533b279 CSS Coding Standards: Use unitless values for line-height in wp-includes/css/media-views.css.
Props ianbelanger, pbiron, afercia.
Fixes #46529. See #44643.
Built from https://develop.svn.wordpress.org/trunk@45478


git-svn-id: http://core.svn.wordpress.org/trunk@45289 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-05-30 13:18:52 +00:00
Andrea Fercia
74c0d658b4 Accessibility: Improve the media views upload Dismiss Errors button.
- makes the Dismiss Errors button visible in the media views inline uploader
- avoids a focus loss when activating the Dismiss Errors button

See the related GitHub issue from the WPCampus accessibility audit https://github.com/WordPress/gutenberg/issues/15354

Fixes #47113.

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


git-svn-id: http://core.svn.wordpress.org/trunk@45187 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-05-22 19:33:53 +00:00
Andrea Fercia
22d8c0af3c Accessibility: Improve the "Alt text" description styles for small screens.
Amends [44900].
See #41612.

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


git-svn-id: http://core.svn.wordpress.org/trunk@45057 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-18 21:43:52 +00:00
Andrea Fercia
e9db7c48d2 Accessibility: improve the "URL" and "Alt text" fields in the media modals.
Many users found the attachment URL field confusing: it says "URL" so it may appear like a field meant to paste a URL into.
Also, the Alt text field is the most important one in terms of content, while the Title field needs to be de-emphasized.

- changes the URL field label to "Copy link"
- moves the alt text field to the top as first field 
- avoids to set initial focus on the alt text field 
- adds an explanatory text with a link pointing to the W3C "alt decision tree" tutorial 
- adds `aria-describedby` to target the explanatory text
- adjusts the CSS accordingly
- updates the QUnit index.html file

Props melchoyce, audrasjb, afercia.
Fixes #41612.

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


git-svn-id: http://core.svn.wordpress.org/trunk@44731 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-15 10:43:51 +00:00
Andrea Fercia
957ad84b81 Coding standards: Fix incorrect CSS rgba() values.
Also, fixes some indentation where spaces were used instead of tabs.

Props nielslange, mukesh27.
Fixes #45937.

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


git-svn-id: http://core.svn.wordpress.org/trunk@44623 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-04 22:02:52 +00:00
Mike Schroder
792d02dde0 Media: Port date filter width fix from Gutenberg.
Ensures the entire date selection dropdown shows in the media modal.

Previously this was worked around in 8deaf5eca6 in Gutenberg. This moves the rule to core, allowing the workaround to be removed in Gutenberg.

Props ianbelanger.
Fixes #44760.
See https://github.com/WordPress/gutenberg/issues/2202
Built from https://develop.svn.wordpress.org/trunk@44653


git-svn-id: http://core.svn.wordpress.org/trunk@44484 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-01-19 01:20:49 +00:00
Andrea Fercia
173e0f9ee7 Administration: CSS coding standards
- properties should be followed by a colon and a space
- media queries shouldn't use spaces within parenthesis
- indentation should use tabs instead of spaces or mixed spaces / tabs
- the content property should use double quotes
- no double spaces

Props nadim0988, afercia.
Fixes #45185.

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


git-svn-id: http://core.svn.wordpress.org/trunk@44468 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-01-17 07:41:52 +00:00
Andrea Fercia
7481337591 Accessibility: Add focus styles for Windows High Contrast mode.
Introduces in core new focus styles dedicated to Windows High Contrast mode. The 
new styles use a transparent CSS outline as already explored in the Block Editor.
This first part covers some of the main user interface controls like buttons, links,
and media views elements. Other parts will be addressed in the next future.

Fixes #41286.

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


git-svn-id: http://core.svn.wordpress.org/trunk@44375 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-01-10 16:47:50 +00:00
Sergey Biryukov
2a3473e0de Build: Remove a stray CSS comment that Autoprefixer failed to remove in [43309].
Props netweb.
See #45080.
Built from https://develop.svn.wordpress.org/trunk@44343


git-svn-id: http://core.svn.wordpress.org/trunk@44173 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2018-12-20 00:27:47 +00:00
Gary Pendergast
922f83a69f Once upon a midnight dreary, while I coded, weak and weary,
In many a strange and curious file of forgotten lore—
While I pondered, blaming Nacin, my notifications suddenly awakened,
As of someone quietly DMing;—DMing me, I can’t ignore.
“’Tis some contributor,” I muttered, “DMing me an idea or four—
            Only this and nothing more.”

Ah, distinctly I remember, at WordCamp US, last December;
A mad proposal nearly laid me—down out cold—upon the floor.
Curious, I listened closely;—to a plan I agreed with, mostly—
A way to make our JavaScript—JavaScript which was a chore—
Maintainable, extendable, for the future, is what I saw.
            Guten-ready for evermore.

Open here I switch to Slack, when, with many a patch and hack,
In there stepped Omar, a JavaScript developer hardcore;
Pronouncing all the changes fit; ready now to be commit;
“There’s nothing else for us to do,” DMing me, “It’s done!” he swore—
“No longer random guessing at which file need next be explored—
            Let’s move on, we’re all aboard.”

Moved all together, grouped and managed, in folders all is packaged,
The code had all been cleaned and tidied, important parts moved to the fore,
“Though this change be useful here,” I said, “it is too large, I fear,
We couldn’t manage such a patch, we’ve done nothing like this before—
Tell me where doth go this change, change to make our codebase soar!”
            Quoth Omar, “In WordPress Core.”

Props omarreis for shepherding this significant change.
Props adamsilverstein, aduth, atimmer, dingo_bastard, frank-klein, gziolo, herregroen, jaswrks, jeremyfelt, jipmoors, jorbin, netweb, ocean90, pento, tjnowell, and youknowriad for testing, feedback, discussion, encouragement, commiserations, etc.
I make no apologies for this commit message.
Fixes #43055.


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


git-svn-id: http://core.svn.wordpress.org/trunk@43138 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2018-05-23 10:05:31 +00:00
Andrea Fercia
d8ea080526 Accessibility: Change all the #f00 and red to the official WordPress accent red.
WordPress should exclusively use colors from the official colors palette, see
https://make.wordpress.org/design/handbook/design-guide/foundations/colors/
Partially addresses accessibility color contrast ratio issues.

See #35622.

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


git-svn-id: http://core.svn.wordpress.org/trunk@41545 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-10-03 16:03:32 +00:00
Aaron Jorbin
50cb2c5e28 Update autoprefixer browser support matrix
WordPress no longer supports many old old browsers: https://make.wordpress.org/core/2017/04/23/target-browser-coverage/

This also removes alot of no longer necessary CSS. It served us well, but we are never getting back together with IE8,9,10.

So, in the (paraphrased) words of Taylor Swift:

I remember when we dropped support  the first time
Saying, "This is it, I've had enough, " 'cause like
We hadn't seen many users in a month
When you said you needed flexbox. (What?)
Then you postMessage again and say
"IE8, I miss you and I swear I'm gonna change, trust me."
Remember how that lasted for a day?
I say, "I hate the box model, " we break up, you call me, "I love css-grids."
Ooh, we called it off again last night
But ooh, this time I'm telling you, I'm telling you

We are never ever ever supporting IE 8,9,10,
We are never ever ever supporting IE 8,9,10,
You go talk to EDGE, talk to my FIREFOX, talk to CHROME
But we are never ever ever ever getting back together
Like, ever...

Fixes #37651.
Props stunnedbeast, netweb, jorbin.



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


git-svn-id: http://core.svn.wordpress.org/trunk@40912 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-07-16 01:15:46 +00:00
Andrea Fercia
3dab32af54 Accessibility: Improve the color contrast ratio of the dismiss notice buttons.
Props chris_dev.
Fixes #39970.

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


git-svn-id: http://core.svn.wordpress.org/trunk@40440 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-05-04 22:32:46 +00:00
Pascal Birchler
38c4565187 Media: Ensure Crop Image is always visible.
Previously, the crop button in the media modal after uploading header images or similar was hidden and the task could not be completed.

Props karinedo, sagarprajapati, Cybr, mayurk.
Fixes #40152.

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


git-svn-id: http://core.svn.wordpress.org/trunk@40326 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-04-14 09:31:43 +00:00
Andrea Fercia
822b8afb50 Accessibility: Improve the Media Library inline uploader accessibility.
For better accessibility, expandable panels should be placed immediately after
the control that expands them. This change moves the Media Library inline
uploader up, right after the "Add New" button, also introducing consistency with
the Plugin and Theme uploaders.
Adds a proper ARIA role on the button and an `aria-expanded` attribute to give
better feedback to assistive technologies users about the uploader's expanded state.
Improves the focus handling when closing the uploader, improves the focus style
and color contrast ratio of the uploader "close" button.

Props mantismamita, karmatosed, adamsilverstein, afercia.
Fixes #37188.

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


git-svn-id: http://core.svn.wordpress.org/trunk@40266 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-03-31 17:38:43 +00:00
Andrea Fercia
9c360b1ab8 Administration: Fix minor misalignments caused by the button-link CSS class.
After [40059] the CSS class `button-link` uses `text-align: left` by default.
This change now requires to limit as much as possible the use of `button-link`
to controls that should really look like links and to explicitly set
`text-align: center` in a few other cases.

Fixes #39983.

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


git-svn-id: http://core.svn.wordpress.org/trunk@40265 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-03-31 16:51:45 +00:00
Andrea Fercia
d33301821b Buttons: Improve the .button-link CSS class for link-like buttons.
Updates `.button-link` adding color and underline to make link-like buttons look
like links by default. Introduces `.button-link-delete` as a modifier, stackable
CSS class for red button-links.

Props Cheffheid, afercia.

See #34242.
Fixes #35126.

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


git-svn-id: http://core.svn.wordpress.org/trunk@39989 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-02-09 16:47:44 +00:00
Andrea Fercia
23ac0d0616 Accessibility: Improve keyboard accessibility avoiding confusing tab stops in the Media views.
When sections of the media modal are hidden out of view, their controls may be
still focusable and actionable. This completely hides these sections to avoid
unnecessary tab stops and potential confusion for assistive technology users.

Props SergeyBiryukov, afercia.

Fixes #30599.

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


git-svn-id: http://core.svn.wordpress.org/trunk@39469 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-12-06 23:28:41 +00:00
Helen Hou-Sandí
6d28c85bc7 System fonts: Don't quote single-word font names, per our coding standards.
props ocean90, netweb.
see #36753.

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


git-svn-id: http://core.svn.wordpress.org/trunk@38093 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-07-26 16:39:30 +00:00
Helen Hou-Sandí
8776694a33 Use numeric font weights instead of keywords.
When Open Sans was in use, the `300`, `400`, and `600` weights were loaded. `400` is the equivalent of `normal`; however, `bold` is equivalent to `700`, not `600`. With the move to system fonts, we need to be specific rather than relying on the lack of a `700` weight. Not all system fonts include a `600` weight; in those instances, they will use the `bold`/`700` weight.

The WordPress CSS Coding Standards have been updated accordingly.

props coderste.
see #36753.

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


git-svn-id: http://core.svn.wordpress.org/trunk@37705 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-06-17 18:37:28 +00:00