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
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
In [43437], the link definition implementation caused attachment links to be unexpectedly nested under an attributes key. This changeset restores the prior behavior.
Merges [43681] to trunk.
Props TimothyBlynJacobs, danielbachhuber.
Fixes#44750.
Built from https://develop.svn.wordpress.org/trunk@43973
git-svn-id: http://core.svn.wordpress.org/trunk@43805 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Add a `human_readable_duration` function including tests.
* Add 'pixels' after image width/height.
* Add screen reader text for durations.
Props Presskopp, kiranpotphode, milindmore22, stormrockwell, afercia.
Fixes#39667.
Built from https://develop.svn.wordpress.org/trunk@43633
git-svn-id: http://core.svn.wordpress.org/trunk@43462 1a063a9b-81f0-0310-95a4-ce76da25c4cd
WPCS 1.0.0 includes a bunch of new auto-fixers, which drops the number of coding standards issues across WordPress significantly. Prior to running the auto-fixers, there were 15,312 issues detected. With this commit, we now drop to 4,769 issues.
This change includes three notable additions:
- Multiline function calls must now put each parameter on a new line.
- Auto-formatting files is now part of the `grunt precommit` script.
- Auto-fixable coding standards issues will now cause Travis failures.
Fixes#44600.
Built from https://develop.svn.wordpress.org/trunk@43571
git-svn-id: http://core.svn.wordpress.org/trunk@43400 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Moves focus to a proper element within the media modal to avoid the underlying
page to scroll to the bottom. Removes the media modal `freeze` option.
Props andreiglingeanu, adamsilverstein.
Fixes 39859.
Built from https://develop.svn.wordpress.org/trunk@42624
git-svn-id: http://core.svn.wordpress.org/trunk@42453 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Label elements should only be used for labelable elements.
- `Uploaded By` and `Uploaded To` aren't form controls and shouldn't be associated with labels
- changes the labels for media source, alternate sources, poster image, and tracks to solve a layout issue and explicitly associate the labels to their form fields (previously, the labels were wrapping also the Remove buttons)
Props Presskopp, afercia.
Fixes#38759, #40468.
Built from https://develop.svn.wordpress.org/trunk@42444
git-svn-id: http://core.svn.wordpress.org/trunk@42274 1a063a9b-81f0-0310-95a4-ce76da25c4cd
The last time a new widget was introduced, Vuvuzelas were a thing, Angry Birds started taking over phones, and WordPress stopped shipping with Kubrick. Seven years and 17 releases without new widgets have been enough, time to spice up your sidebar!
Props westonruter, melchoyce, obenland, timmydcrawford, adamsilverstein, gonom9, wonderboymusic, Fab1en, DrewAPicture, sirbrillig, joen, matias, samikeijonen, afercia, celloexpressions, designsimply, michelleweber, ranh, kjellr, karmatosed.
Fixes#32417, #39993, #39994, #39995.
Built from https://develop.svn.wordpress.org/trunk@40640
git-svn-id: http://core.svn.wordpress.org/trunk@40501 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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
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
This helps affirm that your upload is fine, and has not been reduced down to the first page or changed into an image. This applies to the attachment details modal in the media library, where media is also now centered in the preview area.
props folletto, helen.
fixes#38717.
Built from https://develop.svn.wordpress.org/trunk@39213
git-svn-id: http://core.svn.wordpress.org/trunk@39153 1a063a9b-81f0-0310-95a4-ce76da25c4cd
When support for PDFs is available, on upload,
render 'Thumbnail', 'Medium', 'Large', and 'Full' sizes of
the first page, and save them in attachment meta.
Use these renders within Add Media, Media Gallery and List views,
Attachment Details, Post/Attachment Edit screens, and Attachment pages.
Support available by default via Imagick -> ImageMagick -> Ghostscript,
but can be provided by any `WP_Image_Editor` that supports PDFs.
Props adamsilverstein, azaozz, celloexpressions, desrosj, dglingren, ericlewis, ipstenu, joemcgill, joyously, markoheijnen, melchoyce, mikeschroder, tomauger.
Fixes#31050.
Built from https://develop.svn.wordpress.org/trunk@38949
git-svn-id: http://core.svn.wordpress.org/trunk@38892 1a063a9b-81f0-0310-95a4-ce76da25c4cd
When inserting an image into a post, the values in `wp.media.controller.Library` should not default to linking the image when no user settings are present.
The default display setting value for `link` is now `none`. User settings persist and will override or confirm this value based on user actions.
Props liljimmi, janhenckens, eherman24, wonderboymusic.
Fixes#31467.
Built from https://develop.svn.wordpress.org/trunk@33729
git-svn-id: http://core.svn.wordpress.org/trunk@33697 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Monkey patches imgAreaSelect library to support touch events.
* Removes Settings version of Site Icon since it would have been the same flow.
* Removes default value for Customizer setting - there is no default favicon.
Fixes#16434.
Built from https://develop.svn.wordpress.org/trunk@33329
git-svn-id: http://core.svn.wordpress.org/trunk@33301 1a063a9b-81f0-0310-95a4-ce76da25c4cd
"Title" field is now labeled as "Link Text", to reflect how it's actually used. It's also hidden whenever the embed is updating, to make it clearer that something is happening. Embed dimension fields are shown below the preview, much like image property fields are shown below.
fixes#29476, see #31139.
Built from https://develop.svn.wordpress.org/trunk@31642
git-svn-id: http://core.svn.wordpress.org/trunk@31623 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Use `wp.shortcode()` instead of manually constructing a shortcode in `views/embed/link`
* Allow a URL to transition to a shortcode (and vice versa) when returning an embed to TinyMCE
* In `WP_Embed`, store the last URL and last set of attributes requested in class properties
* `wp_ajax_parse_embed()`, allow `[embed]`s to have attributes. Return `attr` in the response.
This is a first pass to allow broad testing with recent MCE view changes.
See #31139.
Built from https://develop.svn.wordpress.org/trunk@31620
git-svn-id: http://core.svn.wordpress.org/trunk@31601 1a063a9b-81f0-0310-95a4-ce76da25c4cd
- Better structure, simpler "view" registration, better extensibility.
- Better inline documentation.
- Don't show a placeholder for pasted link until we know the link is "embeddable'.
And many more improvements. Props iseulde. See #31412.
Built from https://develop.svn.wordpress.org/trunk@31546
git-svn-id: http://core.svn.wordpress.org/trunk@31527 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Bump MediaElement script loader versions to 2.16.2 - missed in [30634], oops!
* Add `Froogaloop` to `js/mediaelement` scripts for Vimeo
* Check for Vimeo in the same locations that YouTube is checked
* Dynamically load Froogaloop script in admin when editing a TinyMCE view
* Edit MediaElement to call `mejs.$.extend` instead of `$.extend` in `mejs.HtmlMediaElementShim.createPlugin()`, since `$` is not available via WP's jQuery (I will report this upstream):
6f9a78e008/src/js/me-shim.js (L631)Fixes#29267.
Built from https://develop.svn.wordpress.org/trunk@31016
git-svn-id: http://core.svn.wordpress.org/trunk@30997 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Only use the special `trashAttachment` logic when in `edit-metadata` mode.
* Don't support the `trash` filter in the Add Media modal for now.
* Properly toggle trash/untrash logic in the Attachment Details sidebar
See #29145.
Built from https://develop.svn.wordpress.org/trunk@29491
git-svn-id: http://core.svn.wordpress.org/trunk@29269 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Add a setting to `_wpMediaViewsL10n.settings`: `mediaTrash`
* In the attachment edit modal, properly toggle between Trash/Untrash
* In `media.view.Attachment`, add a method for `untrashAttachment`
* When creating the grid toolbar, switch the setting order of subviews so that `media.view.DeleteSelectedButton` can listen to the instance of `media.view.AttachmentFilters.All` to update the text in its UI.
* Add a new filter to `media.view.AttachmentFilters.All`, `trash`, when `settings.mediaTrash` is true
* Allow the cached queries in `Query.get()` to be flushed when race conditions exist and collections need to be refreshed. This is currently only being used when `MEDIA_TRASH` is set, to refresh the filtered/mirrored collections related to `all`, `trash`, and any already queried filter.
* Cleanup the bootstrapping of `media.view.MediaFrame.Manage`
* Allow `wp_ajax_query_attachments()` to return items from the trash when `MEDIA_TRASH` is `true`
* Allow `wp_ajax_save_attachment()` to set `post_status` when `MEDIA_TRASH` is `true`. It allows `wp_delete_post()` to be called, which will trash the attachment instead of deleting when the flag is set.
Props koop for the knowledge sharing and thought partnership.
See #29145.
Built from https://develop.svn.wordpress.org/trunk@29490
git-svn-id: http://core.svn.wordpress.org/trunk@29268 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Don't set height on responsive `<div>` when generating markup
* Move some CSS rules from the style tag to `.wp-video`
* Use Video Details view event delegation instead of click events delegated from `<body>`
* Fix some CSS rule collision in the grid modal
See #29110.
Built from https://develop.svn.wordpress.org/trunk@29456
git-svn-id: http://core.svn.wordpress.org/trunk@29234 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Align better visually with the existing media modal and the post image edit modal.
* Add back a link to the full attachment edit screen (post.php).
* Add a title to the modal and move prev/next buttons next to the more-consistent close button.
* Remove mode tabs (metadata vs. image editing) in favor of the Edit Image button.
Still to come: responsive, IE8 testing and targeted CSS (calc() usage), general CSS cleanup.
props ericlewis, helen, melchoyce. see #28844. fixes#28915.
Built from https://develop.svn.wordpress.org/trunk@29204
git-svn-id: http://core.svn.wordpress.org/trunk@28988 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Wins:
* Eliminates duplication of code between PHP and JS
* Views can load JS without messing with TinyMCE and scope
* MEjs doesn't break when it loads a file plugin-mode. This allows any file type the MEjs supports to play in MCE views.
* YouTube now works as the source for video.
* Users can still style the views, editor stylesheets are included in these sandboxes.
* Audio and Video URLs and `[embed]`s are no longer broken.
* Remove the crazy compat code necessary to determine what file types play in what browser.
* Remove unneeded Underscore templates.
* Remove the compat code for playlists.
See #28905.
Built from https://develop.svn.wordpress.org/trunk@29179
git-svn-id: http://core.svn.wordpress.org/trunk@28963 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Andrea Fercia
Sergey Biryukov
Gary Pendergast
Aaron Jorbin
Adam Silverstein
John Blackbourn
Weston Ruter
Helen Hou-Sandí
Mike Schroder
Scott Taylor
Dominik Schilling
Andrew Ozz
Konstantin Obenland
Andrew Nacin