For a number of years, the "Available Widgets" section has been off-limits for
keyboard users. Now it can be used also with the keyboard. This change introduces
also some improvements for assistive technologies.
- makes the widget toggles focusable and adds an `aria-expanded` attribute to indicate their state
- improves the toggles labelling to clarify context (add/edit)
- changes the controls to choose a sidebar from list items to buttons
- adds an `aria-label` attribute to the buttons to clarify their purpose
- adds an `aria-pressed` attribute to the buttons to indicate which one is selected
- improves color contrast of the selected button
- uses a `wp.a11y.speak()` message to announce to screen reader users when a widget has been added to a sidebar
- moves focus back to the toggle button when closing a widget
See #40677.
Built from https://develop.svn.wordpress.org/trunk@42794
git-svn-id: http://core.svn.wordpress.org/trunk@42624 1a063a9b-81f0-0310-95a4-ce76da25c4cd
For a number of years, the link to the Widgets screen "Accessibility mode" lived
in the Screen Options panel, hidden by default. Many users, including assistive
technologies users, weren't able to find it or even aware it existed. By bringing
the link in the main screen, visible by default, this change makes the
"Accessibility mode" easily discoverable for everyone.
Props chetan200891, antonioeatgoat.
Fixes#42778.
Built from https://develop.svn.wordpress.org/trunk@42790
git-svn-id: http://core.svn.wordpress.org/trunk@42620 1a063a9b-81f0-0310-95a4-ce76da25c4cd
- uses button elements for the toggles
- uses `aria-expanded` on the toggles to communicate to assistive technologies the panels expanded/collapsed state
- adds the "circular focus" style to the toggles to give users a clear indication of the currently focused element
- standardizes CSS class names to `.toggle-indicator` and `.handlediv` as these names are already used across the admin for similar controls
Props monikarao, xavortm, mihai2u, Kopepasah.
Fixes#37013.
Built from https://develop.svn.wordpress.org/trunk@41621
git-svn-id: http://core.svn.wordpress.org/trunk@41456 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Galleries are managed in the widget in the same way they are managed in the post editor, both using the media manager.
* Gallery widget is merged from the Core Media Widgets v0.2.0 feature plugin and it extends `WP_Widget_Media` in the same way as is done for image, audio, and video widgets.
* Model syncing logic is updated to support booleans and arrays (of integers).
* Placeholder areas in media widgets are now clickable shortcuts for selecting media.
* Image widget placeholder is updated to match gallery widget where clicking preview is shortcut for editing media.
Props westonruter, joemcgill, timmydcrawford, m1tk00, obenland, melchoyce.
See #32417.
Fixes#41914.
Built from https://develop.svn.wordpress.org/trunk@41590
git-svn-id: http://core.svn.wordpress.org/trunk@41423 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Code editor is integrated into the Theme/Plugin Editor, Additional CSS in Customizer, and Custom HTML widget. Code editor is not yet integrated into the post editor, and it may not be until accessibility concerns are addressed.
* The CodeMirror component in the Custom HTML widget is integrated in a similar way to TinyMCE being integrated into the Text widget, adopting the same approach for integrating dynamic JavaScript-initialized fields.
* Linting is performed for JS, CSS, HTML, and JSON via JSHint, CSSLint, HTMLHint, and JSONLint respectively. Linting is not yet supported for PHP.
* When user lacks `unfiltered_html` the capability, the Custom HTML widget will report any Kses-invalid elements and attributes as errors via a custom Kses rule for HTMLHint.
* When linting errors are detected, the user will be prevented from saving the code until the errors are fixed, reducing instances of broken websites.
* The placeholder value is removed from Custom CSS in favor of a fleshed-out section description which now auto-expands when the CSS field is empty. See #39892.
* The CodeMirror library is included as `wp.CodeMirror` to prevent conflicts with any existing `CodeMirror` global.
* An `wp.codeEditor.initialize()` API in JS is provided to convert a `textarea` into CodeMirror, with a `wp_enqueue_code_editor()` function in PHP to manage enqueueing the assets and settings needed to edit a given type of code.
* A user preference is added to manage whether or not "syntax highlighting" is enabled. The feature is opt-out, being enabled by default.
* Allowed file extensions in the theme and plugin editors have been updated to include formats which CodeMirror has modes for: `conf`, `css`, `diff`, `patch`, `html`, `htm`, `http`, `js`, `json`, `jsx`, `less`, `md`, `php`, `phtml`, `php3`, `php4`, `php5`, `php7`, `phps`, `scss`, `sass`, `sh`, `bash`, `sql`, `svg`, `xml`, `yml`, `yaml`, `txt`.
Props westonruter, georgestephanis, obenland, melchoyce, pixolin, mizejewski, michelleweber, afercia, grahamarmfield, samikeijonen, rianrietveld, iseulde.
See #38707.
Fixes#12423, #39892.
Built from https://develop.svn.wordpress.org/trunk@41376
git-svn-id: http://core.svn.wordpress.org/trunk@41209 1a063a9b-81f0-0310-95a4-ce76da25c4cd
* Mark a widget as dirty when a field input triggers a `change` or `input` event; clear dirty state when widget is successfully saved.
* Disable Save button and re-label "Saved" when widget not dirty.
* Show AYS dialog when leaving widgets admin screen with unsaved changes.
* When widgets are dirty, expand all unsaved widgets at AYS check and focus on first one.
* Change "Close" link to "Done"; hide link when widget is dirty and reveal when saved.
* The "Done" link persistently appears in the Customizer even after making a change (when the widget is dirty) because changes are autosaved into the changeset.
* Prevent saving widget when form fails `checkValidity`.
* Fix frequency of triggering of `change` event on the rich Text widget's `textarea` limited now to when there are actual changes.
* Add a class of `widget-dirty` to widget containers when the widget has unsaved changes.
Props westonruter, timmydcrawford, melchoyce.
Fixes#41610, #23120.
Built from https://develop.svn.wordpress.org/trunk@41352
git-svn-id: http://core.svn.wordpress.org/trunk@41185 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.
Props drewapicture, samuelsidler, netweb, valendesigns, kpdesign, nacin, jorbin
Fixes#30666
Built from https://develop.svn.wordpress.org/trunk@41271
git-svn-id: http://core.svn.wordpress.org/trunk@41111 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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.
Built from https://develop.svn.wordpress.org/trunk@41062
git-svn-id: http://core.svn.wordpress.org/trunk@40912 1a063a9b-81f0-0310-95a4-ce76da25c4cd
The Text widget in legacy mode omits TinyMCE and retains old behavior for matching pre-existing Text widgets. Usage pointers added to default visual mode appear when attempting to paste HTML code into the Visual tab and when clicking on the Text tab, informing users of the new Custom HTML widget.
Props westonruter, melchoyce, gitlost for testing, obenland for testing, dougal for testing, afercia for testing.
See #35243.
Fixes#40951.
Built from https://develop.svn.wordpress.org/trunk@41050
git-svn-id: http://core.svn.wordpress.org/trunk@40900 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
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.
Built from https://develop.svn.wordpress.org/trunk@40480
git-svn-id: http://core.svn.wordpress.org/trunk@40356 1a063a9b-81f0-0310-95a4-ce76da25c4cd
