sacrefizz/admin-touch-ux
Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
Repository files navigation
=== Admin Touch UX === Contributors: sacrefizz Tags: admin, accessibility, touch, mobile, tablet, ux, wcag, menu Requires at least: 6.0 Tested up to: 6.9 Stable tag: 1.0.0 Requires PHP: 7.4 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Fixes WordPress admin for touch devices. Submenus open on tap, touch targets enlarged to 44px (WCAG), tap-outside-to-close. == Description == **The Problem:** WordPress admin sidebar submenus don't work reliably on tablets, foldable phones, and touch laptops. They rely on CSS `:hover` which doesn't exist on touch devices. The result: you tap a menu item and nothing happens, or you have to tap twice. WordPress core detects iOS and Android via User-Agent sniffing, but misses Surface Pro, iPads with desktop UA (iPadOS 13+), Samsung foldables, Chromebooks, and touch-enabled laptops. **The Fix:** Admin Touch UX uses the modern `hover: none` media query and `touchend` events to make the entire WP admin touch-friendly: = What it fixes = * **Sidebar flyout submenus** — open on first tap, close on tap outside * **Admin bar dropdowns** — same tap-to-open/close behavior * **Touch targets** — enlarged to 44x44px minimum per WCAG 2.1 SC 2.5.5: * List table row actions (Edit, Quick Edit, Trash) * Screen Options and Help tabs * Metabox toggle/reorder buttons * Pagination controls * Dashboard widget controls * Admin menu collapse arrow * **Row actions always visible** — no hover required to reveal Edit/Trash links * **Submenu overflow protection** — repositions submenus that would clip below the viewport = Zero impact on desktop = All fixes are gated behind touch detection. If your device has a mouse/trackpad as primary input, this plugin does absolutely nothing. No CSS overrides, no JS listeners, no performance cost. = Accessibility = This plugin improves WCAG 2.1 compliance for touch devices: * SC 2.5.5 Target Size (Enhanced) — minimum 44x44px touch targets * SC 2.1.1 Keyboard — tap interactions mirror click behavior * SC 3.2.1 On Focus — no unexpected context changes = Related WordPress Core Tickets = * [#22382](https://core.trac.wordpress.org/ticket/22382) — iOS admin top menu requires double-tap * [#29356](https://core.trac.wordpress.org/ticket/29356) — iPad Menu Tapping is Broken * [#32747](https://core.trac.wordpress.org/ticket/32747) — Admin menus overlap on small screens * [#18382](https://core.trac.wordpress.org/ticket/18382) — Convert admin menu dropdowns to flyouts == Installation == 1. Upload the `admin-touch-ux` folder to `/wp-content/plugins/` 2. Activate the plugin through the 'Plugins' menu in WordPress 3. That's it — no configuration needed. The plugin detects touch devices automatically. == Frequently Asked Questions == = Does this affect desktop users? = No. All fixes are gated behind touch detection (`ontouchstart` and `maxTouchPoints`). Desktop users with mouse/trackpad see zero changes. = Does it work with WooCommerce? = Yes. The touch target improvements apply to all WP admin list tables, including WooCommerce products, orders, and coupons. = Will it conflict with other admin plugins? = Unlikely. Admin Touch UX uses namespaced events (`.admin-touch-ux`) and a CSS class on `<html>` to scope all changes. It doesn't modify core files or override core JS. = What devices are affected? = iPads (especially iPadOS 13+ with desktop UA), Surface Pro/Go, Samsung Galaxy Tab, foldable phones (Z Fold, Pixel Fold), Chromebooks with touchscreen, and any touch-enabled laptop. = Does it work in the block editor (Gutenberg)? = This plugin fixes the admin chrome (sidebar menu, admin bar, list tables). Block editor touch issues are handled separately by the Gutenberg project. = Can I suggest improvements? = Yes! Open an issue on [GitHub](https://github.com/sacrefizz/admin-touch-ux) or post in the support forum. == Screenshots == 1. Sidebar submenu opens on first tap (no double-tap required) 2. Row actions always visible on touch devices (no hover needed) 3. Enlarged touch targets for metabox controls (44px minimum) == Changelog == = 1.0.0 = * Initial release * Touch-friendly sidebar flyout submenus (tap to open/close) * Touch-friendly admin bar dropdowns * WCAG 2.1 SC 2.5.5 touch targets (44px minimum) * Row actions always visible on touch * Submenu viewport overflow protection * Tap-outside-to-close for all flyout menus == Upgrade Notice == = 1.0.0 = First release. Activate and forget — the plugin detects touch devices automatically.