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
The previous method for copying the debug report to the clipboard involved having a hidden `<textarea>`, but this shows up in screen readers and can't be reliably hidden.
To work around this, the button now uses the `clipboard.js` library, which automatically handles browser differences in the Clipboard API, and can load the text to copy from a `data-` attribute on the button.
Props pento, hedgefield, afercia.
Fixes#46647.
Built from https://develop.svn.wordpress.org/trunk@45044
git-svn-id: http://core.svn.wordpress.org/trunk@44853 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
Allows for themes or plugins setting the comment-reply JavaScript as a dependency of an HTML header script. This in turn causes `comment-reply.js` to be loaded early, requiring execution to be delayed.
Props pento, peterwilsoncc, jorbin for feedback.
Fixes#46280.
Built from https://develop.svn.wordpress.org/trunk@44794
git-svn-id: http://core.svn.wordpress.org/trunk@44626 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
