Toolbar: Add access+w keyboard shortcut to toggle toolbar on frontend

src/js/_enqueues/lib/admin-bar.js

@@ -23,6 +23,7 @@
 			skipLink,
 			mobileEvent,
 			adminBarSearchInput,
+			isMac = /Mac|iPhone|iPad|iPod/.test( navigator.platform ),
 			i;
 
 		if ( ! adminBar || ! ( 'querySelectorAll' in adminBar ) ) {
@@ -108,8 +109,82 @@
 		if ( adminBarLogout ) {
 			adminBarLogout.addEventListener( 'click', emptySessionStorage );
 		}
+
+		// Toggle toolbar visibility with access+w keyboard shortcut (frontend only).
+		if ( ! document.body.classList.contains( 'wp-admin' ) ) {
+			document.addEventListener( 'keydown', function( event ) {
+				var isAccessModifier;
+
+				if ( event.which !== 87 ) { // 'W' key.
+					return;
+				}
+
+				if ( isMac ) {
+					isAccessModifier = event.ctrlKey && event.altKey && ! event.metaKey && ! event.shiftKey;
+				} else {
+					isAccessModifier = event.altKey && event.shiftKey && ! event.ctrlKey && ! event.metaKey;
+				}
+
+				if ( ! isAccessModifier ) {
+					return;
+				}
+
+				event.preventDefault();
+				toggleToolbar( adminBar );
+			} );
+		}
 	} );
 
+	/**
+	 * Toggle the toolbar visibility.
+	 *
+	 * Slides the toolbar out of view and adjusts page spacing by toggling
+	 * the `wp-toolbar-hidden` class on the document element.
+	 *
+	 * @since TBD
+	 *
+	 * @param {HTMLElement} adminBar The admin bar element.
+	 */
+	function toggleToolbar( adminBar ) {
+		var isHidden = document.documentElement.classList.toggle( 'wp-toolbar-hidden' );
+
+		adminBar.setAttribute( 'aria-hidden', isHidden ? 'true' : 'false' );
+		announceToolbarState( isHidden );
+	}
+
+	/**
+	 * Announce toolbar visibility state to screen readers.
+	 *
+	 * @since TBD
+	 *
+	 * @param {boolean} isHidden Whether the toolbar is hidden.
+	 */
+	function announceToolbarState( isHidden ) {
+		var message = isHidden ? window.wpAdminBarL10n.toolbarHidden : window.wpAdminBarL10n.toolbarVisible,
+			el;
+
+		if ( ! message ) {
+			return;
+		}
+
+		el = document.getElementById( 'wp-toolbar-announce' );
+
+		if ( ! el ) {
+			el = document.createElement( 'div' );
+			el.id = 'wp-toolbar-announce';
+			el.className = 'screen-reader-text';
+			el.setAttribute( 'role', 'status' );
+			el.setAttribute( 'aria-live', 'polite' );
+			document.body.appendChild( el );
+		}
+
+		// Clear then set to ensure screen readers re-announce.
+		el.textContent = '';
+		setTimeout( function() {
+			el.textContent = message;
+		}, 100 );
+	}
+
 	/**
 	 * Remove hover class for top level menu item when escape is pressed.
 	 *

src/wp-includes/class-wp-admin-bar.php

@@ -72,6 +72,15 @@ public function initialize() {
 		wp_enqueue_script( 'admin-bar' );
 		wp_enqueue_style( 'admin-bar' );
 
+		wp_localize_script(
+			'admin-bar',
+			'wpAdminBarL10n',
+			array(
+				'toolbarHidden'  => __( 'Toolbar hidden.' ),
+				'toolbarVisible' => __( 'Toolbar visible.' ),
+			)
+		);
+
 		/**
 		 * Fires after WP_Admin_Bar is initialized.
 		 *

src/wp-includes/css/admin-bar.css

@@ -99,6 +99,24 @@ html:lang(he-il) .rtl #wpadminbar * {
 	background: #1d2327;
 	/* Only visible in Windows High Contrast mode */
 	outline: 1px solid transparent;
+	transition: transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
+}
+
+/**
+ * Toolbar toggle hidden state.
+ *
+ * Toggled via access+w keyboard shortcut on the frontend.
+ * Sets the admin bar height variable to 0 so all dependent spacing
+ * (scroll-padding, bump margin) adjusts automatically.
+ */
+html.wp-toolbar-hidden {
+	--wp-admin--admin-bar--height: 0px;
+	margin-top: 0 !important;
+}
+
+html.wp-toolbar-hidden #wpadminbar {
+	transform: translateY(-100%);
+	visibility: hidden;
 }
 
 #wpadminbar .ab-sub-wrapper,