Allow post boxes and metaboxes to be reordered by using the keyboard

Before WordPress 5.5, it was possible to rearrange widgets on the Dashboard and metaboxes on post editing pages (with GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ disabled) using only a pointing device, such as the mouse. This was causing accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) issues, since it was not possible to perform the same actions with the keyboard. It was also challenging to perform these actions on touch screens.

WordPress 5.5 solves this by adding new controls and functionalities to allow reordering the boxes with the keyboard. There are also improvements to facilitate reordering of boxes on touch screens.

In addition to this, sound messages are sent to the live region of the administration ARIA to inform screen reader users of the result of the rearrangement action.

For pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party developers

If you develop plugins that modify the “headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.” of the post boxes, you will need to make sure you adjust your code accordingly.

Here is an example:

In WooCommerce “Edit order” pages, some WooCommerce CSSCSS Cascading Style Sheets. hide the header and the handlediv button of some metaboxes using display: none. No feature is broken and the metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. is sortable as expected because it lives in an element with the CSS class meta-box-sortables.

Plugins can customize the basic metaboxes in this way, but they should also be prepared to adjust their customizations if necessary.

Related ticketticket Created for both bug reports and feature development on the bug tracker. on TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress.: #39074.

Props to @afercia for technical review and @audrasjb for proofread.

#5-5, #accessibility, #dev-notes