Add a visible label with the `aria-label` value for image selection to enable voice control users to select images. Add visible labels on filters to improve access to media filters.
Props grahamarmfield, tomauger, afercia, rianrietveld, antpb, audrasjb, SirLouen, ozgursar, poojapadamad, mukesh27, alh0319, joedolson.
Fixes#23562.
Built from https://develop.svn.wordpress.org/trunk@61757
git-svn-id: http://core.svn.wordpress.org/trunk@61063 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Introduce a design system tokens file (`_tokens.scss`) based on the WordPress Design System, providing standardized values for colors, spacing, typography, border-radius, and elevation.
Update buttons to use CSS custom properties for theme color support across all admin color schemes. Restyle primary buttons with filled theme-color backgrounds, secondary buttons with outlined borders, and add a tertiary button mixin. Adopt Gutenberg-style focus rings with outset box-shadows and transparent outlines for Windows High Contrast mode compatibility.
Increase default input and select height from 30px to 40px, apply 2px border-radius, and update border and placeholder colors to match the design system. Restyle checkboxes and radios with filled theme-color checked states and white indicator marks, using outset double-ring focus styles consistent with Gutenberg.
Apply compact 32px sizing to list table controls, page-title-action buttons, and toolbar elements. Convert tag input layouts and the major-publishing-actions bar to flexbox.
Props fabiankaegy, joedolson, audrasjb, joen, phpbits, magaliechetrit, karmatosed.
Fixes#64547.
Built from https://develop.svn.wordpress.org/trunk@61645
git-svn-id: http://core.svn.wordpress.org/trunk@60956 1a063a9b-81f0-0310-95a4-ce76da25c4cd
In modern browsers the CSS `content` property provides alt text support for assistive technology in the form `display / alt text`. This introduces support for legacy browsers that do not support the new syntax.
CSS content properties take advantage of the CSS cascade and browsers ignoring values they don't understand by adding duplicate `content` properties in the form:
{{{#!css
content: display;
content: display / alt text;
}}}
Modern browsers will use the second property, legacy browsers will use the first.
Follow-up to [60885] for #63603.
Props acmoifr, joedolson, jorbin, mydesign78, ov3rfly, peterwilsoncc, presskopp, sabernhardt, siliconforks, swissspidy, threadi, wildworks, wolf45.
Fixes#64350.
Built from https://develop.svn.wordpress.org/trunk@61480
git-svn-id: http://core.svn.wordpress.org/trunk@60792 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Remove instances of `speak: never` and `@media aural`, which are deprecated and/or non-standard CSS. These never had any broad browser support, but generated content alternatives do. See #40428.
Props krokodok, audrasjb, joedolson.
Fixes#63603.
Built from https://develop.svn.wordpress.org/trunk@60885
git-svn-id: http://core.svn.wordpress.org/trunk@60221 1a063a9b-81f0-0310-95a4-ce76da25c4cd
For all CSS generated icons across core, either add `aria-hidden="true"` to the HTML wrapper or set the generated content alternative to an empty string in the CSS using the alternative text specification for CSS generated content.
Props afercia, joedolson, cheffheid, jhabdas.
Fixes#40428.
Built from https://develop.svn.wordpress.org/trunk@60806
git-svn-id: http://core.svn.wordpress.org/trunk@60142 1a063a9b-81f0-0310-95a4-ce76da25c4cd
On the Edit Media screen, buttons were not all of consistent size. This was caused by custom sizing applied to CSS in the Edit Media panel that was not consistent with other button sizes.
Remove custom sizing and adds class so all Edit Media buttons will match styling of other admin buttons in desktop and mobile viewports.
Props hbhalodia, sabernhardt, sandeepdahiya, mikinc860, mukesh27, joedolson.
Fixes#63559.
Built from https://develop.svn.wordpress.org/trunk@60640
git-svn-id: http://core.svn.wordpress.org/trunk@59976 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Following [r58279], the focus outline on the Edit button after uploading media was partially cut off. Adjust margin and padding to ensure the outline is visible, while also supporting appropriate word wrapping on long file names.
Props dilipbheda, karthikeya01, sabernhardt, narenin, zunaid321, Marius84, ankitkumarshah, riddhidave, dilip2615, SirLouen, Presskopp, joedolson.
Fixes#63239.
Built from https://develop.svn.wordpress.org/trunk@60637
git-svn-id: http://core.svn.wordpress.org/trunk@59973 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Switch the display of the Media editor Crop controls to `flexbox` and add a gap of 4px in both column and row directions. Gives space between buttons when they are stacked.
Props presskopp, audrasjb, rishabhwp, joedolson.
Fixes#63672.
Built from https://develop.svn.wordpress.org/trunk@60517
git-svn-id: http://core.svn.wordpress.org/trunk@59853 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This changeset fixes an issue in the Media Library where icons or thumbnails of uploaded files were stuck to the border of their container after file upload.
Follow-up to [58279].
Props sukhendu2002, im3dabasia1, sainathpoojary, joedolson.
Fixes#62573.
See #60141.
Built from https://develop.svn.wordpress.org/trunk@59550
git-svn-id: http://core.svn.wordpress.org/trunk@58936 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Add visible labels to inputs that are using placeholder attributes as a substitute for visible labeling.
Labels added or made visible on the customizer theme search, customizer widget search, customizer menu item search, customizer new page UI, the search plugins screens, the media search screens, and the classic editor link inserter.
Props afercia, joedolson, rcreators, sabernhardt.
See #40331.
Built from https://develop.svn.wordpress.org/trunk@58146
git-svn-id: http://core.svn.wordpress.org/trunk@57611 1a063a9b-81f0-0310-95a4-ce76da25c4cd
The value of `start` is not fully supported by Opera Mini which has 1.01% usage. There is no material change in functionality with this change.
Follow-up to [55919].
Props davidbaumwald, sabernhardt, khokansardar, devsahadat.
Fixes#60876.
Built from https://develop.svn.wordpress.org/trunk@57933
git-svn-id: http://core.svn.wordpress.org/trunk@57434 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Previously, the spacing between media toolbar elements in grid and list view did not match. We now use the same select margin across both views.
Props desrosj, seusmaniqbal, ianbelanger, subrataemfluence, sabernhardt, pooja1210, sumitbagthariya16, shailu25, devmuhib, huzaifaalmesbah, audrasjb.
Fixes#43904.
Built from https://develop.svn.wordpress.org/trunk@57764
git-svn-id: http://core.svn.wordpress.org/trunk@57265 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Apply new focus styles from WordPress 5.3 more broadly. An updated focus style for form inputs, buttons, and link styled as buttons was added in WordPress 5.3; this commit makes other focus styles consistent with those changes so they meet accessibility standards for color contrast.
Props johnbillion, kebbet, joedolson, afercia.
Fixes#51870.
Built from https://develop.svn.wordpress.org/trunk@57553
git-svn-id: http://core.svn.wordpress.org/trunk@57054 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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
Follow up to [56189], which resolved the initial problem but created new problems with control proximity on wide monitors. Change admin image editor panels to use flex so panels only occupy the space needed.
Props joedolson, sabernhardt, mikinc860.
Fixes#58692.
Built from https://develop.svn.wordpress.org/trunk@56242
git-svn-id: http://core.svn.wordpress.org/trunk@55754 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Add visual affordance to expanded/collapsed states and move panel under the control rather than placing it next to the toggle, to prevent overflow with the save menu.
Props nithi22, deepakvijayan, antpb, joedolson.
Fixes#58756.
Built from https://develop.svn.wordpress.org/trunk@56239
git-svn-id: http://core.svn.wordpress.org/trunk@55751 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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
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
Previously, when scaling an image larger than the source size in the image edit states the image would silently fail the scaling action. This patch provides an error when someone attempts to scale an image larger than the source size while also disabling the button to initiate the action.
Props brookedot, joedolson, markoheijnen, mikeschroder, desrosj, Mista-Flo, costdev.
Fixes#26381.
Built from https://develop.svn.wordpress.org/trunk@55859
git-svn-id: http://core.svn.wordpress.org/trunk@55371 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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
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
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
Adds a button to the media upload page to make copying the url possible on the same page when a media item upload is successful.
Props anotia, ryokuhi, Mista-Flo, lukecarbis, antpb, claytoncollie, shaunandrews, joedolson.
Fixes#51754.
Built from https://develop.svn.wordpress.org/trunk@51023
git-svn-id: http://core.svn.wordpress.org/trunk@50632 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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
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
Sets a defined size for text alongside the media browser uploader button fixing alignment on popular browsers.
Props krupajnanda, mikeschroder, aaroncampbell, lucagrandicelli, andraganescu, samful, sabernhardt, andystitt829, kburgoine.
Fixes#41648
Built from https://develop.svn.wordpress.org/trunk@49553
git-svn-id: http://core.svn.wordpress.org/trunk@49291 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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
Swaps the DOM order of the two main columns within the admin Image Editor.
When the sequence in which content is presented affects its meaning and the navigation sequences affect meaning or operation, visual order and DOM order must match. See WCAG 2.1 Success Criterion 1.3.2 Meaningful Sequence and Success Criterion 2.4.3 Focus Order.
Props sabernhardt, anevins, audrasjb, afercia.
Fixes#47136.
Built from https://develop.svn.wordpress.org/trunk@48265
git-svn-id: http://core.svn.wordpress.org/trunk@48034 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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
