Admin Touch UX

Fixes WordPress admin menu and UI for touch devices (tablets, foldables, touch laptops).

The Problem

WordPress admin hover-based submenus don't work on touch devices at desktop viewport widths (>782px). Users on iPads, Surface tablets, Galaxy Folds, and touch-enabled laptops can't reliably access admin sidebar submenus because:

• Hover doesn't exist on touch — flyout submenus never appear
• First tap navigates instead of opening the submenu
• No way to dismiss — submenus that do appear can't be closed by tapping outside
• Touch targets are too small — row actions, pagination, and metabox controls fail WCAG 2.1 SC 2.5.5 (minimum 44x44px)

This affects millions of WordPress users on tablets and hybrid devices. Related Trac tickets span over a decade: #22382, #27980, #41822, #50820.

The Fix

This plugin (proof-of-concept for a core patch) detects touch capability and applies targeted fixes with zero impact on mouse/keyboard users.

JavaScript (admin-touch-ux.js)

• Tap-to-open submenus — first tap opens the submenu, second tap navigates
• Tap-outside-to-close — touching anywhere outside the menu dismisses open submenus
• Admin bar support — same tap-to-open/tap-to-close for #wpadminbar dropdowns
• Viewport-aware positioning — submenus that would overflow the viewport are shifted upward

CSS (admin-touch-ux.css)

• WCAG 2.1 SC 2.5.5 compliance — all interactive targets enlarged to minimum 44x44px
• Row actions always visible — no hover required to reveal Edit/Trash/View links
• Scoped to .admin-touch-ux — CSS only applies when JS detects touch

Installation

1. Upload the admin-touch-ux folder to wp-content/plugins/
2. Activate in Plugins > Installed Plugins
3. No configuration needed — touch devices are detected automatically

Device Testing

Device	Browser	Status
iPad Air (iPadOS 18)	Safari	Tested
Galaxy Tab S9	Chrome	Tested
Surface Pro	Edge	Tested
Galaxy Z Fold	Chrome	Tested
Desktop (mouse)	All	No impact

Path to WordPress Core

This plugin is a standalone proof-of-concept. The proposed core changes would target:

• wp-admin/js/common.js — touch event handling for admin menu
• wp-admin/css/common.css — WCAG-compliant touch targets

Design Decisions

• Progressive enhancement — touch detection adds a CSS class; all rules are scoped
• No new dependencies — uses existing jQuery (already loaded in WP admin)
• Respects WP responsive breakpoint — only activates above 782px
• Backwards compatible — mouse/keyboard users see zero changes

License

GPLv2 or later. See LICENSE.