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
Follow up to [46408]
Sometimes you need to take documentation literally. And sometimes you need to take it seriously. Deprecations and replacements in uglify are a case where I took them literally and should have taken them seriously.
See #48203.
Built from https://develop.svn.wordpress.org/trunk@46409
git-svn-id: http://core.svn.wordpress.org/trunk@46207 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
We've extracted wp-includes/wp-a11y.js to a reusable package wordpress/a11y which is published on NPM. Let's make sure this package is also used in WordPress core. Once all the JavaScript is built using webpack, we can also import this package wherever it is used and configure webpack to load is an external.
Props omarreiss, herregroen, desrosj, ocean90, afercia, sstoqnov
Built from https://develop.svn.wordpress.org/trunk@46167
git-svn-id: http://core.svn.wordpress.org/trunk@45979 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
Previously the sites were truncated which meant longer names but with ending identifications were unable to be seen as different. This shows the full site name to allow easier understanding.
Props tferry, melinedo, afercia, jeremyfelt
Fixes: 47112
Built from https://develop.svn.wordpress.org/trunk@45826
git-svn-id: http://core.svn.wordpress.org/trunk@45637 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This upgrade adds support for the transgender flag: 🏳️⚧️
There's some additional housekeeping in this commit:
- Twemoji recently rearranged their repository and package, so `Gruntfile.js` needed tweaking to allow for that.
- As only new files were added in this Twemoji release, the CDN version didn't need updating.
Fixes#47852.
Built from https://develop.svn.wordpress.org/trunk@45769
git-svn-id: http://core.svn.wordpress.org/trunk@45580 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Adds an ARIA `role="img"` to the emojis markup in the front end. While the ARIA role is technically redundant, it helps Safari and VoiceOver to properly announce the emojis as "image". Without the role, they announce a generic "group" role.
Tested with Safari 12.1.1 / VoiceOver 9.
Props pento.
See #37486.
Built from https://develop.svn.wordpress.org/trunk@45726
git-svn-id: http://core.svn.wordpress.org/trunk@45537 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
Andrea Fercia
Adam Silverstein
Aaron Jorbin
Sergey Biryukov
Dominik Schilling
Andrew Ozz
desrosj
antpb
gziolo
whyisjake
Tammie Lister
Gary Pendergast
youknowriad
atimmer