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.
git-svn-id: https://develop.svn.wordpress.org/trunk@44900 602fd350-edb4-49c9-b593-d223f7449a82
CSS generated content is rendered for speech output. When it's not meant to be announced by assistive technologies, for example with font icons, special care should be used to hide it. At the moment, the only reliable way to do this is making use of a wrapper element and set `aria-hidden="true"` on it.
Fixes#37513.
git-svn-id: https://develop.svn.wordpress.org/trunk@44793 602fd350-edb4-49c9-b593-d223f7449a82
Also, fixes some indentation where spaces were used instead of tabs.
Props nielslange, mukesh27.
Fixes#45937.
git-svn-id: https://develop.svn.wordpress.org/trunk@44791 602fd350-edb4-49c9-b593-d223f7449a82
- properties should be followed by a colon and a space
- media queries shouldn't use spaces within parenthesis
- indentation should use tabs instead of spaces or mixed spaces / tabs
- the content property should use double quotes
- no double spaces
Props nadim0988, afercia.
Fixes#45185.
git-svn-id: https://develop.svn.wordpress.org/trunk@44637 602fd350-edb4-49c9-b593-d223f7449a82
Introduces in core new focus styles dedicated to Windows High Contrast mode. The
new styles use a transparent CSS outline as already explored in the Block Editor.
This first part covers some of the main user interface controls like buttons, links,
and media views elements. Other parts will be addressed in the next future.
Fixes#41286.
git-svn-id: https://develop.svn.wordpress.org/trunk@44544 602fd350-edb4-49c9-b593-d223f7449a82
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.
git-svn-id: https://develop.svn.wordpress.org/trunk@43309 602fd350-edb4-49c9-b593-d223f7449a82
r43158 introduced a new admin pointer for the privacy tools added in 4.9.6. With the previous positioning, though, sometimes the `Dismiss` link would be fixed off screen, making it impossible for the user to dismiss the pointer. This happened when there were enough extra menu items, or when the viewport height was short enough.
This commit repositions the pointer to work around that problem. One down side of this workaround is that the arrow will not always be positioned next to the `Tools` menu, where it should be. That's an acceptable compromise given the current time constraints, though. A long term solution would be to make `WP_Pointer` robust enough to handle this use case.
Props imath, audrasjb, desrosj.
Fixes#44045.
git-svn-id: https://develop.svn.wordpress.org/trunk@43246 602fd350-edb4-49c9-b593-d223f7449a82
Previously the pointer overlapped the menu in order to draw attention to the fact that it applies to both the `Tools` and `Settings` menus. That caused a conflict if the menu was collapsed, though, because the icons were covered by the pointer and therefore inaccessible.
Additionally, minor tweaks were made to the text order and formatting. The order of the two sections was swapped in the title and paragraph, in order to match the order of the corresponding menu items. The spacing around headings and paragraphs was tweaked to remove extraneous whitespace.
Props littler.chicken, desrosj, ianbelanger, melchoyce.
Fixes#43961.
git-svn-id: https://develop.svn.wordpress.org/trunk@43210 602fd350-edb4-49c9-b593-d223f7449a82
The new features are very important for some users, because of their GDPR obligations. They're also spread across multiple top-level menus, making them less discoverable. An admin pointer will help to ensure that users are aware of the new tools and how to find them.
Props desrosj, andreamiddleton, allendav, xkon.
Fixes#43942.
git-svn-id: https://develop.svn.wordpress.org/trunk@43158 602fd350-edb4-49c9-b593-d223f7449a82
Although unitless zero is allowed for `<length>` CSS data type, it's invalid for `<time>` data type.
Props chetan200891, manuel_84, GaryJ.
Fixes#43195.
git-svn-id: https://develop.svn.wordpress.org/trunk@42689 602fd350-edb4-49c9-b593-d223f7449a82
As per the WordPress CSS coding standards, CSS properties with values that require quotes must use double quotes.
Also fixes some indentation and spacing.
Fixes#43220.
git-svn-id: https://develop.svn.wordpress.org/trunk@42641 602fd350-edb4-49c9-b593-d223f7449a82
Unify the theme-browsing and theme-customization experiences by introducing a comprehensive theme browser and installer directly accessible in the customizer. Replaces the customizer theme switcher with a full-screen panel for discovering/browsing and installing themes available on WordPress.org. Themes can now be installed and previewed directly in the customizer without entering the wp-admin context. Also includes an extensible framework for browsing and installing themes from other sources.
Also includes CSS auto-prefixing added via `grunt precommit:css`.
For details, see: https://make.wordpress.org/core/2016/10/03/feature-proposal-a-new-experience-for-discovering-installing-and-previewing-themes-in-the-customizer/
Previously [38813] but reverted in [39140].
Fixes#37661, #34843, #38666.
Props celloexpressions, folletto, westonruter, karmatosed, melchoyce, afercia.
git-svn-id: https://develop.svn.wordpress.org/trunk@41648 602fd350-edb4-49c9-b593-d223f7449a82
Given the new WordPress browsers support policy, the `screen-reader-text` css
class used in the admin can be updated to use modern CSS and correct syntax. See
https://github.com/wpaccessibility/a11ythemepatterns/blob/master/read-more-links/style.css
Worth noting the `clip` property is deprecated and kept for IE11 and Edge.
- uses `clip-path` for modern browsers
- keeps `clip` for old browsers and update its value to a correct syntax
- resets `clip-path` to `none` where the class is used to dynamically reveal elements
- removes an old rule that made `screen-reader-text` completely invisible in the help tabs `#screen-meta`
- standardizes the rule across CSS files
Fixes#40970.
git-svn-id: https://develop.svn.wordpress.org/trunk@41622 602fd350-edb4-49c9-b593-d223f7449a82
WordPress no longer supports many old old browsers: https://make.wordpress.org/core/2017/04/23/target-browser-coverage/
This also removes alot of no longer necessary CSS. It served us well, but we are never getting back together with IE8,9,10.
So, in the (paraphrased) words of Taylor Swift:
I remember when we dropped support the first time
Saying, "This is it, I've had enough, " 'cause like
We hadn't seen many users in a month
When you said you needed flexbox. (What?)
Then you postMessage again and say
"IE8, I miss you and I swear I'm gonna change, trust me."
Remember how that lasted for a day?
I say, "I hate the box model, " we break up, you call me, "I love css-grids."
Ooh, we called it off again last night
But ooh, this time I'm telling you, I'm telling you
We are never ever ever supporting IE 8,9,10,
We are never ever ever supporting IE 8,9,10,
You go talk to EDGE, talk to my FIREFOX, talk to CHROME
But we are never ever ever ever getting back together
Like, ever...
Fixes#37651.
Props stunnedbeast, netweb, jorbin.
git-svn-id: https://develop.svn.wordpress.org/trunk@41062 602fd350-edb4-49c9-b593-d223f7449a82
Links used as UI controls that behave like buttons, should be buttons.
- changes the widgets "toggle", "Delete", and "Close" links to buttons
- uses `aria-expanded` to announce the state of the toggle buttons
- increases a bit the clickable area of the toggle
- ensures the "circular focus" doesn't get cut-off in some browsers by centering the toggle arrows
- uses a `<span>` element with an `aria-hidden` attribute to hide CSS generated font icons from assistive technologies
- standardizes on `.toggle-indicator:before` rather than `:after`
- changes two `#f00` reds in `#dc3232`, see #35622Fixes#31476.
git-svn-id: https://develop.svn.wordpress.org/trunk@40480 602fd350-edb4-49c9-b593-d223f7449a82
Previously, the crop button in the media modal after uploading header images or similar was hidden and the task could not be completed.
Props karinedo, sagarprajapati, Cybr, mayurk.
Fixes#40152.
git-svn-id: https://develop.svn.wordpress.org/trunk@40428 602fd350-edb4-49c9-b593-d223f7449a82
The Toolbar search field, when the Toolbar is displayed on the frontend, might
inherit CSS properties from the active Theme stylesheet. For example, this
happened with Twenty Seventeen that sets `display: block;` on all the input
fields. Thus, there's the need to reset some CSS properties to avoid inheritance.
Props @sagarprajapati.
Fixes#40313.
git-svn-id: https://develop.svn.wordpress.org/trunk@40418 602fd350-edb4-49c9-b593-d223f7449a82
For better accessibility, expandable panels should be placed immediately after
the control that expands them. This change moves the Media Library inline
uploader up, right after the "Add New" button, also introducing consistency with
the Plugin and Theme uploaders.
Adds a proper ARIA role on the button and an `aria-expanded` attribute to give
better feedback to assistive technologies users about the uploader's expanded state.
Improves the focus handling when closing the uploader, improves the focus style
and color contrast ratio of the uploader "close" button.
Props mantismamita, karmatosed, adamsilverstein, afercia.
Fixes#37188.
git-svn-id: https://develop.svn.wordpress.org/trunk@40359 602fd350-edb4-49c9-b593-d223f7449a82
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.
git-svn-id: https://develop.svn.wordpress.org/trunk@40358 602fd350-edb4-49c9-b593-d223f7449a82
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.
git-svn-id: https://develop.svn.wordpress.org/trunk@40052 602fd350-edb4-49c9-b593-d223f7449a82
These styles should only be applied by theme stylesheets as needed.
Props sirbrillig.
Reverts parts of [39202] and [39233].
See #38651.
Fixes#39349.
git-svn-id: https://develop.svn.wordpress.org/trunk@39685 602fd350-edb4-49c9-b593-d223f7449a82
They were commented out in `admin-bar.css` since 3 years, see [26770].
Props kafleg, ketuchetan.
Fixes#39137.
git-svn-id: https://develop.svn.wordpress.org/trunk@39533 602fd350-edb4-49c9-b593-d223f7449a82
When sections of the media modal are hidden out of view, their controls may be
still focusable and actionable. This completely hides these sections to avoid
unnecessary tab stops and potential confusion for assistive technology users.
Props SergeyBiryukov, afercia.
Fixes#30599.
git-svn-id: https://develop.svn.wordpress.org/trunk@39529 602fd350-edb4-49c9-b593-d223f7449a82
Ensure that icon inside edit shortcut is centered when theme defines default `line-height` for `button` elements.
Fixes#38787.
git-svn-id: https://develop.svn.wordpress.org/trunk@39242 602fd350-edb4-49c9-b593-d223f7449a82
Textarea will fill vertical height of Custom CSS section for browsers that support `calc()` and when plugins don't add other controls to the section. Also run CSS autoprefixer.
Props michaelarestad, westonruter.
See #35395.
Fixes#38755.
git-svn-id: https://develop.svn.wordpress.org/trunk@39229 602fd350-edb4-49c9-b593-d223f7449a82
* Use `postMessage` transport for header image settings by default when video headers are supported, and thus `the_custom_header_markup()` will necessarily be used (and thus a selective refresh partial will be available).
* Ensure that `the_custom_header_markup()` always outputs a container element in the customizer preview even if the header is empty.
* Ensure that edit shortcut appearing for custom header does not get positioned off-screen.
Props bradyvercher, westonruter.
See #38639.
Fixes#38737.
git-svn-id: https://develop.svn.wordpress.org/trunk@39227 602fd350-edb4-49c9-b593-d223f7449a82
Removes the `.customize-partial-edit-shortcut-left-margin` class which was not effective on some themes, created a worse experience for other themes, and which did not recalculate when the preview was reflowed or resized. Now some small-width media queries are added to handle common cases while more dramatic issues can be handled by the theme. Also renames `Partial.positionEditShortcut()`to `Partial.addEditShortcutToPlacement()` which is a more accurate description of its function.
Props sirbrillig, sstoqnov.
See #38651, #27403.
git-svn-id: https://develop.svn.wordpress.org/trunk@39202 602fd350-edb4-49c9-b593-d223f7449a82
Currently, the "Collapse menu" item is not focusable and keyboard users can't collapse/expand the admin menu. This aims to fix it so that screen readers no longer announce it as a clickable but it remains unfocusable and thus unusable. So it's now a button.
Quoting joedolson at WordCamp Chicago 2014:
"If it's supposed to act like a button, it should be a button."
Also includes a grunt:precommit run that picked up some postcss changes to src/wp-includes/css/customize-preview.css
Fixes#29958.
Props ajercia, ipm-frommen for an iterative patch, valendesigns for an iterative patch, GaryJ for feedback, joedolson for feedback, helen for feedback
git-svn-id: https://develop.svn.wordpress.org/trunk@39141 602fd350-edb4-49c9-b593-d223f7449a82
