List Tables: Keep columns readable with horizontal scrolling.

.gitignore

@@ -15,6 +15,7 @@ wp-tests-config.php
 /tests/phpunit/data/plugins/wordpress-importer
 /tests/phpunit/data/.trac-ticket-cache*
 /tests/qunit/compiled.html
+/tests/qunit/common-compiled.html
 /tests/performance/**/*.test.results.json
 /src/.wp-tests-version
 /node_modules

Gruntfile.js

@@ -300,7 +300,7 @@ module.exports = function(grunt) {
 				cwd: WORKING_DIR,
 				src: []
 			},
-			qunit: ['tests/qunit/compiled.html'],
+			qunit: [ 'tests/qunit/compiled.html', 'tests/qunit/common-compiled.html' ],
 
 			// This is only meant to run within a numbered branch after branching has occurred.
 			workflows: {
@@ -663,8 +663,10 @@ module.exports = function(grunt) {
 				files: {}
 			},
 			qunit: {
-				src: 'tests/qunit/index.html',
-				dest: 'tests/qunit/compiled.html',
+				files: {
+					'tests/qunit/compiled.html': 'tests/qunit/index.html',
+					'tests/qunit/common-compiled.html': 'tests/qunit/common.html',
+				},
 				options: {
 					processContent: function( src ) {
 						return src.replace( /(\".+?\/)build(\/.+?)(?:.min)?(.js\")/g , function( match, $1, $2, $3 ) {

src/js/_enqueues/admin/common.js

@@ -2236,6 +2236,183 @@ $( function( $ ) {
 
 }( jQuery, window ));
 
+/**
+ * Manages overflow indicators and keyboard access for list tables.
+ *
+ * @since 7.2.0
+ */
+jQuery( function() {
+	const content = document.getElementById( 'wpbody-content' );
+	if (
+		! content ||
+		! content.querySelector( '.wp-list-table-scroll' )
+	) {
+		return;
+	}
+
+	/** @type {Map<HTMLTableElement, { wrapper: HTMLElement, update: function(): void, cleanup: function(): void }>} */
+	const tables = new Map();
+
+	/**
+	 * Restores an element's original Tab order after overflow tracking ends.
+	 *
+	 * @since 7.2.0
+	 *
+	 * @param {HTMLElement} element  The previously observed element.
+	 * @param {?string}     tabIndex Its original tabindex attribute.
+	 *
+	 * @return {void}
+	 */
+	function restoreTabIndex( element, tabIndex ) {
+		if ( tabIndex === null ) {
+			element.removeAttribute( 'tabindex' );
+		} else {
+			element.setAttribute( 'tabindex', tabIndex );
+		}
+	}
+
+	/**
+	 * Tracks a table's scroll position and dimensions.
+	 *
+	 * @since 7.2.0
+	 *
+	 * @param {HTMLTableElement} table The table inside a scroll wrapper.
+	 *
+	 * @return {void}
+	 */
+	function observeTableOverflow( table ) {
+		const wrapper = table.parentElement;
+		const tabIndex = wrapper.getAttribute( 'tabindex' );
+		const contentAreas = new Set();
+
+		/**
+		 * Updates the overflow indicators and the wrapper's place in the Tab order.
+		 *
+		 * @since 7.2.0
+		 *
+		 * @return {void}
+		 */
+		function update() {
+			contentAreas.forEach( function( area ) {
+				if ( area.closest( '.wp-list-table' ) !== table || ! table.contains( area ) ) {
+					observer.unobserve( area );
+					area.replaceWith( ...area.childNodes );
+					contentAreas.delete( area );
+				}
+			} );
+
+			table.querySelectorAll( ':scope > tbody > tr > td, :scope > tbody > tr > th' ).forEach( function( cell ) {
+				if ( cell.colSpan > 1 || cell.closest( '.inline-edit-row, .inline-editor, #replyrow' ) ) {
+					return;
+				}
+				Array.from( cell.children ).forEach( function( block ) {
+					if (
+						! block.matches( 'p, pre, div, blockquote, ul, ol, dl, figure, table' ) ||
+						block.matches( '.row-actions, .hidden, .comment-author, .wp-list-table-content-scroll, [hidden]' ) ||
+						window.getComputedStyle( block ).display === 'none'
+					) {
+						return;
+					}
+					const area = document.createElement( 'div' );
+					area.className = 'wp-list-table-content-scroll';
+					block.before( area );
+					area.append( block );
+					contentAreas.add( area );
+					observer.observe( area );
+				} );
+			} );
+
+			contentAreas.forEach( function( area ) {
+				const areaStyle = window.getComputedStyle( area );
+				const scrollable = area.scrollWidth > area.clientWidth &&
+					( areaStyle.overflowX === 'auto' || areaStyle.overflowX === 'scroll' );
+				area.tabIndex = scrollable ? 0 : -1;
+				if ( scrollable ) {
+					area.setAttribute( 'role', 'region' );
+					area.setAttribute( 'aria-label', wp.i18n.__( 'Scrollable content' ) );
+				} else {
+					area.removeAttribute( 'role' );
+					area.removeAttribute( 'aria-label' );
+				}
+			} );
+
+			const style = window.getComputedStyle( wrapper );
+			const isRTL = style.direction === 'rtl';
+			const scrollLeft = isRTL ? -wrapper.scrollLeft : wrapper.scrollLeft;
+			const maxScroll = Math.max( 0, wrapper.scrollWidth - wrapper.clientWidth );
+			const position = Math.min( maxScroll, Math.max( 0, scrollLeft ) );
+
+			// Skip non-scrolling wrappers without moving focus if the wrapper is already focused.
+			wrapper.tabIndex = maxScroll > 0 &&
+				( style.overflowX === 'auto' || style.overflowX === 'scroll' ) ? 0 : -1;
+
+			// Allow for fractional scroll positions at either end of the table.
+			wrapper.classList.toggle( 'has-scroll-overflow-start', position > 1 );
+			wrapper.classList.toggle( 'has-scroll-overflow-end', maxScroll - position > 1 );
+		}
+
+		const observer = new window.ResizeObserver( update );
+		observer.observe( wrapper );
+		observer.observe( table );
+		wrapper.addEventListener( 'scroll', update, { passive: true } );
+		update();
+
+		tables.set( table, {
+			wrapper: wrapper,
+			update: update,
+
+			/**
+			 * Releases overflow tracking and restores the wrapper's original Tab order.
+			 *
+			 * @since 7.2.0
+			 *
+			 * @return {void}
+			 */
+			cleanup: function() {
+				observer.disconnect();
+				wrapper.removeEventListener( 'scroll', update );
+				wrapper.classList.remove( 'has-scroll-overflow-start', 'has-scroll-overflow-end' );
+				restoreTabIndex( wrapper, tabIndex );
+				contentAreas.forEach( function( area ) {
+					area.replaceWith( ...area.childNodes );
+				} );
+				contentAreas.clear();
+			},
+		} );
+	}
+
+	/**
+	 * Initializes added tables and releases observers for removed tables.
+	 *
+	 * @since 7.2.0
+	 *
+	 * @return {void}
+	 */
+	function refreshTables() {
+		tables.forEach( function( state, table ) {
+			if ( ! content.contains( table ) || table.parentElement !== state.wrapper ) {
+				state.cleanup();
+				tables.delete( table );
+			}
+		} );
+
+		content.querySelectorAll( '.wp-list-table-scroll > .wp-list-table' )
+			.forEach( function( table ) {
+				if ( ! tables.has( table ) ) {
+					observeTableOverflow( table );
+				} else {
+					tables.get( table ).update();
+				}
+			} );
+	}
+
+	refreshTables();
+
+	// Plugins live search replaces the table and its wrapper.
+	const observer = new window.MutationObserver( refreshTables );
+	observer.observe( content, { childList: true, characterData: true, subtree: true } );
+} );
+
 /**
  * Freeze animated plugin icons when reduced motion is enabled.
  *

src/js/_enqueues/admin/edit-comments.js

@@ -806,8 +806,8 @@ window.commentReply = {
 		});
 
 		// Add events.
-		$('#the-comment-list .column-comment > p').on( 'dblclick', function(){
-			commentReply.toggle($(this).parent());
+		$('#the-comment-list .column-comment > p, #the-comment-list .column-comment > .wp-list-table-content-scroll > p').on( 'dblclick', function(){
+			commentReply.toggle($(this).closest('.column-comment'));
 		});
 
 		$('#doaction, #post-query-submit').on( 'click', function(){
@@ -833,8 +833,8 @@ window.commentReply = {
 	 */
 	addEvents : function(r) {
 		r.each(function() {
-			$(this).find('.column-comment > p').on( 'dblclick', function(){
-				commentReply.toggle($(this).parent());
+			$(this).find('.column-comment > p, .column-comment > .wp-list-table-content-scroll > p').on( 'dblclick', function(){
+				commentReply.toggle($(this).closest('.column-comment'));
 			});
 		});
 	},