Commit Graph

300 Commits

Author SHA1 Message Date
desrosj 4ce3b9978e Build/Test Tools: Update the `caniuse-lite` database.
This updates the data for the `caniuse-lite` package and runs `grunt precommit:css`.

Fixes #58869.
Built from https://develop.svn.wordpress.org/trunk@56956


git-svn-id: http://core.svn.wordpress.org/trunk@56467 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2023-10-17 13:20:23 +00:00
Aaron Jorbin 86be091aba CSS: Run grunt `precommit:css` to update CSS.
See: #58869.
Props peterwilsoncc.



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


git-svn-id: http://core.svn.wordpress.org/trunk@56459 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2023-10-16 21:48:24 +00:00
desrosj bc4dbee940 General: Commit changes after running `precommit:css`.
The `{min|max}-device-pixel-ratio` syntax as a a non-standard CSS media feature that was used as an alternative to the now standard `resolution`. Prior to Safari 16.0, `-webkit-{min|max}-device-pixel-ratio` was needed to correctly support it.

This change is a result of the `caniuse-lite` update that was applied recently in [56065]. Though there were no changes to target browsers as a result of this update, it seems an upstream change identified these as unnecessary.

See #57856, #58869.
Props desrosj, joemcgill, isabel_brison.
Built from https://develop.svn.wordpress.org/trunk@56279


git-svn-id: http://core.svn.wordpress.org/trunk@55791 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2023-07-21 18:06:28 +00:00
joedolson 993e1093eb Administration: Fix visual regression in media search input.
Follow up to [r56023]. Improve handling of breakpoint between 782 and 1000px for media grid view & repair styles for media modal search input.

Props kebbet, joedolson.
Fixes #57949.
Built from https://develop.svn.wordpress.org/trunk@56026


git-svn-id: http://core.svn.wordpress.org/trunk@55538 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2023-06-25 21:13:21 +00:00
joedolson abc3ea5422 Administration: Consistent positioning and size of search form.
Move the visual positioning of the posts search form into it's DOM position. Fixes an accessibility bug where the keyboard focus sequence did not match the visual order. Change the media search form in list view to match the format of other post views. Give search forms a consistent layout on mobile.

Props oglekler, sabernhardt, joedolson.
Fixes #57949.
Built from https://develop.svn.wordpress.org/trunk@56023


git-svn-id: http://core.svn.wordpress.org/trunk@55535 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2023-06-25 17:21:28 +00:00
joedolson 9b15db20d3 Media: Update admin image editor design.
Significant restructure of the admin image editor interface, but no new functionality. Reorganize editing buttons into a common region at the top of the editor. Move image rotation tools into a pop-out menu. Add 180 degree rotation option. Add scale button to control group. Move sidebar tools next to the editing canvas to improve visual proximity between action and result. Enlarge editing canvas and crop handles. Separate activating crop functions from applying crop. Add numeric inputs for crop & scale values. 

A long term goal is to move undo/redo and cancel/save into the modal title bar, but that is not feasible without significant updates to the modal framework.

Props afercia, karmatosed, nrqsnchz, antpb, chaion07, costdev, peterwilsoncc, antpb, sabernhardt, prashantbhivsane, joedolson.
Fixes #50523.
Built from https://develop.svn.wordpress.org/trunk@55919


git-svn-id: http://core.svn.wordpress.org/trunk@55431 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2023-06-14 20:42:27 +00:00
joedolson 5bb4f1dcd7 Media: Fix CSS layout issues in Replace media dialog.
Make focus outline fully visible at all media query breakpoints, prevent the date filter from becoming hidden, and match the heading styles to other screens.

Props sabernhardt, hareesh-pillai, alvitazwar052.
Fixes #54395.
Built from https://develop.svn.wordpress.org/trunk@55896


git-svn-id: http://core.svn.wordpress.org/trunk@55408 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2023-06-08 11:16:18 +00:00
joedolson ee24b9b733 Media: Change alt attribute field to textarea in media library.
Change the input field used for `alt` attributes in the media library views from a text input to a textarea. This gives users more flexibility in resizing the field for easier management of longer alt attributes. 

This patch includes a less-common use of `esc_attr` for a `textarea`. This is because the primary usage of the `alt` attribute will be escaped using `esc_attr`, and the value in editing should match the value output on the front end.

Props edent, sabernhardt, afercia, JavierCasares, audrasjb, joedolson.
Fixes #50066.
Built from https://develop.svn.wordpress.org/trunk@54243


git-svn-id: http://core.svn.wordpress.org/trunk@53802 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-20 04:02:10 +00:00
audrasjb c9527eea2e Media: Ensure media preview is fully viewable in the "Add Media" modal.
This change ensures the media preview is not cut off in the "Add Media" modal box, when using the "Insert from URL" feature.

Props siliconforks, sabernhardt, mukesh27, ankit-k-gupta.
Fixes #53636.

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


git-svn-id: http://core.svn.wordpress.org/trunk@51855 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-11-28 23:11:02 +00:00
joedolson 74395140ad Media: Move dismiss upload errors button after errors.
Change the button that dismissess upload errors so it appears after the relevant errors. Change button from icon-only to text-based. Removes ambiguity about what you are cancelling when using the control.

Props ComputerGuru, melchoyce, vdwijngaert, alexislloyd, joedolson, shaunandrews, sabernhardt.
Fixes #42979.

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


git-svn-id: http://core.svn.wordpress.org/trunk@51788 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-11-17 15:56:03 +00:00
ryelle c11fbdc7ae Coding Standards: Apply coding standards on CSS.
Remove units when the value is zero. Combine redundant values in shorthand declarations.
This was generated with `stylelint --fix` and a custom config (see #53866).

Props ankitmaru, audrasjb, pbiron, ayeshrajans, hareesh-pillai, netweb, mukesh27.
Fixes #53866.


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


git-svn-id: http://core.svn.wordpress.org/trunk@51333 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-09-02 22:18:00 +00:00
Andrew Ozz 4112d77597 Media: fix showing of the "Filter Media" filds when replacing an image from the media modal.
Props mhuntdesign, sabernhardt, azaozz.
Fixes #53833.
Built from https://develop.svn.wordpress.org/trunk@51703


git-svn-id: http://core.svn.wordpress.org/trunk@51309 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-08-31 17:27:57 +00:00
Peter Wilson c9bf6d13ef Media: Fix layout of media library modal on narrow screens.
Reduces the right margin of the media library modal on small and medium width screens to remove excess white-space. On very narrow screens this was preventing the media icons from displaying.

Props andraganescu, desrosj, joedolson, moch11, mukesh27, sabernhardt, SergeyBiryukov, zieladam.
Fixes #53679.

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


git-svn-id: http://core.svn.wordpress.org/trunk@51237 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-08-18 05:37:57 +00:00
joedolson 9b6710c43c Media: Remove infinite scroll from media library and modal.
Replace infinitely autoloading behavior on scroll with a user-controlled load more button. Fix a long standing accessibility issue in the media library. Infinite scroll poses a wide range of problems for accessibility, usability, and performance.

This change modifies the library to load 40 items in the initial view, with a load more button to load the next 40 items and a button to move focus from the load more region to the first of the most recently added items.

The text for communicating the jump target was broadly discussed, agreeing that the text incorporated here would most concisely and clearly convey the purpose of the button, and any further detail is learnable from use.
 
Props afercia, adamsilverstein, joedolson, audrasjb, francina 
Fixes #50105. See #40330. 
Built from https://develop.svn.wordpress.org/trunk@50829


git-svn-id: http://core.svn.wordpress.org/trunk@50438 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-05-07 23:19:03 +00:00
desrosj 64b4c21c1f Build/Test Tools: Remove Internet Explorer 11 from the `browserslist`.
This officially removes support for Internet Explorer 11 in the CSS files run through the build process in Core.

Individual tickets should be opened for removing each manually maintained area of the code base targeting IE11.

The resulting changes to CSS files are included in this commit.

Fixes #53077.
Built from https://develop.svn.wordpress.org/trunk@50784


git-svn-id: http://core.svn.wordpress.org/trunk@50393 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-04-22 22:58:05 +00:00
Sergey Biryukov fc6e4cbe3e 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.
Fixes #52760.
Built from https://develop.svn.wordpress.org/trunk@50571


git-svn-id: http://core.svn.wordpress.org/trunk@50184 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-03-24 16:41:07 +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
Dominik Schilling 7ded6c2d2a Administration: Remove any CSS related to Internet Explorer versions 6 – 10.
In WordPress 3.2 support for IE6 was dropped, IE7 followed a few versions later. With the 4.8 release, WordPress officially ended support for Internet Explorer versions 8, 9, and 10. Yet, we still have shipped CSS for the unsupported IE versions....until now! Goodbye to ie.css and star hacks!

* Removes ie.css and `ie` style handle.
* Removes IE specific class names and any related CSS.
* Drops support for IE8 and older in `wp_customize_support_script()`.
* Updates compatibility mode for CSS minification to `ie11`.

Props ayeshrajans, isabel_brison, afercia, netweb, peterwilsoncc, ocean90.
Fixes #17232, #46015.
Built from https://develop.svn.wordpress.org/trunk@47771


git-svn-id: http://core.svn.wordpress.org/trunk@47547 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-05-06 20:15:07 +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