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
Adds an explicit relationship between the upload button and the maximum upload limit, moves focus to the error dismiss button if an error occurs, and adds a call to wp.a11y.speak to report the error after it occurs.
Props afercia, anevins, antpb, adamsilverstein, poena
Fixes#47120
Built from https://develop.svn.wordpress.org/trunk@50352
git-svn-id: http://core.svn.wordpress.org/trunk@49963 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Previously, any video or audio playing in the media modal failed to stop playing when the modal was closed. Now we pause the player when the modal is closed.
Props adamsilverstein, hellofromTonya, paaljoachim, Mista-Flo, Clorith, justinahinon, afercia, amolv.
Fixes#48562.
Built from https://develop.svn.wordpress.org/trunk@50256
git-svn-id: http://core.svn.wordpress.org/trunk@49901 1a063a9b-81f0-0310-95a4-ce76da25c4cd
To be able to disable jQuery Migrate as step 3 of updating the jQuery version shipped with WordPress, all `JQMIGRATE` warnings in the browser console will have to be addressed.
This includes many minor adjustments to a wide array of core files.
Follow-up to:
* Step 1: Disabling jQuery Migrate 1.4.1 in WordPress 5.5: [48323], [48324]
* Step 2: Updating jQuery to 3.5.1 and adding jQuery Migrate 3.3.x in WordPress 5.6: [49101], [49338], [49615], [49649]
Props Clorith, azaozz.
See #51812.
Built from https://develop.svn.wordpress.org/trunk@50001
git-svn-id: http://core.svn.wordpress.org/trunk@49702 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
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
Patches occasionally come in on generated files. We should be kind to new contributors and give them a hint that these files are auto-generated.
This is a follow-up to [41271], which added the banner to minified CSS files.
Fixes#48424. See #30666.
Built from https://develop.svn.wordpress.org/trunk@46589
git-svn-id: http://core.svn.wordpress.org/trunk@46386 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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
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
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
- adds audible messages via `wp.a11y.speak()` to announce the search results
- removes a `keyup` event that was there only to support old browsers
- removes `aria-modal="true"` from the media modal dialog as it prevents the ARIA live regions to be perceived by screen readers
- triggers the search only after 2 ASCII characters have been typed
Props anevins, antpb, aduth, loreleiaurora, afercia.
Fixes#47146.
Built from https://develop.svn.wordpress.org/trunk@46239
git-svn-id: http://core.svn.wordpress.org/trunk@46051 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Makes sure the media modal dialog `h1` heading isn't empty when custom media frames don't set a title. This is particularly important now that the media modal is an ARIA dialog, as the title is referenced by an `aria-labelledby` attribute to properly label the dialog.
Props donmhico, audrasjb.
Fixes#47612.
Built from https://develop.svn.wordpress.org/trunk@45925
git-svn-id: http://core.svn.wordpress.org/trunk@45736 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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
- keeps focus management only where necessary to avoid focus losses
- removes focus management where a specific user workflow was assumed
- makes the "Attachment Details" navigation buttons really disabled when there are no next or previous attachments
- adds inline comments to clarify all the usages of focus()
Fixes#43169.
Built from https://develop.svn.wordpress.org/trunk@45524
git-svn-id: http://core.svn.wordpress.org/trunk@45335 1a063a9b-81f0-0310-95a4-ce76da25c4cd
- 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
* Add a new media view: `wp.media.view.Heading` designed to add accessibility friendly headers in the media library/modal.
* Add an initial "Attachments list" heading above the attachments list.
Props afercia.
Fixes#36925.
Built from https://develop.svn.wordpress.org/trunk@44969
git-svn-id: http://core.svn.wordpress.org/trunk@44800 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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
When Internet Explorer encounters a non interactive element with a `tabindex`
attribute, it adds the element to the accessibility tree with a `role=group` and
an accessible name computed from the element. This prevents JAWS from announcing
any fieldset legend within the element.
- removes `tabindex="0"` from the content and the toolbar containers: these tabindex attributes are no longer needed
- removes `aria-label="Main content"` from the content container: not needed
- keeps the media modal focus fallback introduced in [38142] by making the `#wpbody-content` element focusable only when needed
Props stevefaulkner, aardrian.
Fixes#43154.
Built from https://develop.svn.wordpress.org/trunk@44639
git-svn-id: http://core.svn.wordpress.org/trunk@44470 1a063a9b-81f0-0310-95a4-ce76da25c4cd
After the JavaScript reorganization in [43309], it was no longer possible to test WordPress from the `src` folder. That meant a build step was required to test PHP modifications. That is suboptimal as even a simple copy is slower than a web server just serving the new file.
We achieve building to `src` by setting a `WORKING_DIR` constant in the Gruntfile that is `build` by default, but changes to `src` when the `--dev` flag is present on any Grunt command. We provide sensible defaults so some commands, such as copying `version.php`, always build to `build`.
Because testing from `build` is no longer required, we change the messages present in `index.php` and `wp-admin/index.php` to be more broadly about building WordPress.
We also change the webpack config to have more straightforward behavior based on the `buildTarget` argument. It only determines the build target now and has no implicit behavior anymore. `grunt build` still works as it worked before, to make sure that the build server produces the same `wordpress.zip` we are used to.
We do all this instead of a symlink setup because symlinks don't work on every platform.
Props omarreiss, netweb, flixos90, SergeyBiryukov.
Fixes#44492.
Built from https://develop.svn.wordpress.org/trunk@44359
git-svn-id: http://core.svn.wordpress.org/trunk@44189 1a063a9b-81f0-0310-95a4-ce76da25c4cd
- `grunt webpack:dev` now copies packages JS into `/src/wp-includes/js/dist`, and CSS into `/src/wp-includes/css/dist`.
- `grunt webpack:prod` does the same, but into `/build` instead of `/src`.
- `grunt build` now runs the `webpack:prod` task.
Merges [43760] from the 5.0 branch to trunk.
Props atimmer, pento.
Fixes#45119.
Built from https://develop.svn.wordpress.org/trunk@44159
git-svn-id: http://core.svn.wordpress.org/trunk@43989 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Adjusts the packages registration after [43723]:
Combine the different registration functions into one `wp_default_packages` function. To reach this goal move the prefix logic into a function so it can be called from different locations. Use a static variable there to prevent duplicate inclusion of `version.php`.
Call this function from the `wp_default_scripts` action by registering it as a default filter.
Combine some of the logic in `_WP_Editors::print_tinymce_scripts` into `wp_register_tinymce_scripts`. The logic to force an uncompressed TinyMCE script file stays in `_WP_Editors::force_uncompressed_tinymce` because that logic is very specific to the classic editor.
The script handle `wp-tinymce` is now a dependency of the editor script handle. In combination with the previous item, this makes the classic editor work.
Adjust the syntax of the script paths to be more consistent with other WordPress code.
Always use "production" mode for the media files to prevent people from inadvertently committing development files.
Props pento, omarreiss, atimmer.
Merges [43738] into trunk.
Fixes#45065.
Built from https://develop.svn.wordpress.org/trunk@44115
git-svn-id: http://core.svn.wordpress.org/trunk@43945 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Minification is done by uglify, so disable that in the media build.
* The webpack boilerplate has changed, which explains the changes in the build files.
* ModuleConcatenationPlugin is enable by default for production builds so we don't have to specify that ourselves.
Merge notes: In `trunk` uglify isn't run on the media files after webpack, so webpack does need to do that. Newer webpack versions use `terser-webpack-plugin` as the default minification. Use the `uglifyjs-webpack-plugin` plugin to maintain the same behavior as before. We can look into terser as a minifier later.
Merges [43688] to trunk.
See #45065.
Built from https://develop.svn.wordpress.org/trunk@44111
git-svn-id: http://core.svn.wordpress.org/trunk@43941 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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
