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

@@ -301,7 +301,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: {
@@ -664,8 +664,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,118 @@ $( function( $ ) {
 
 }( jQuery, window ));
 
+/**
+ * Manages overflow indicators and keyboard access for list tables.
+ *
+ * @since 7.2.0
+ */
+jQuery( () => {
+	const content = document.getElementById( 'wpbody-content' );
+	if (
+		! content ||
+		! content.querySelector( '.wp-list-table-scroll' )
+	) {
+		return;
+	}
+
+	/** @type {Map<HTMLTableElement, { wrapper: HTMLElement, cleanup: function(): void }>} */
+	const tables = new Map();
+
+	/**
+	 * 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' );
+
+		/**
+		 * Updates the overflow indicators and the wrapper's place in the Tab order.
+		 *
+		 * @since 7.2.0
+		 *
+		 * @return {void}
+		 */
+		function update() {
+			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,
+
+			/**
+			 * Releases overflow tracking and restores the wrapper's original Tab order.
+			 *
+			 * @since 7.2.0
+			 *
+			 * @return {void}
+			 */
+			cleanup: () => {
+				observer.disconnect();
+				wrapper.removeEventListener( 'scroll', update );
+				wrapper.classList.remove( 'has-scroll-overflow-start', 'has-scroll-overflow-end' );
+				if ( tabIndex === null ) {
+					wrapper.removeAttribute( 'tabindex' );
+				} else {
+					wrapper.setAttribute( 'tabindex', tabIndex );
+				}
+			},
+		} );
+	}
+
+	/**
+	 * Initializes added tables and releases observers for removed tables.
+	 *
+	 * @since 7.2.0
+	 *
+	 * @return {void}
+	 */
+	function refreshTables() {
+		tables.forEach( ( 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( ( table ) => {
+				if ( ! tables.has( table ) ) {
+					observeTableOverflow( table );
+				}
+			} );
+	}
+
+	refreshTables();
+
+	// Plugins live search replaces the table and its wrapper.
+	const observer = new window.MutationObserver( refreshTables );
+	observer.observe( content, { childList: true, subtree: true } );
+} );
+
 /**
  * Freeze animated plugin icons when reduced motion is enabled.
  *

src/wp-admin/css/list-tables.css

@@ -1789,9 +1789,223 @@ div.action-links,
 	width: 80px;
 }
 
+.wp-list-table-scroll:focus-visible {
+	outline: 2px solid var(--wp-admin-theme-color);
+	outline-offset: 0;
+}
+
 /* =Media Queries
 -------------------------------------------------------------- */
 
+@media screen and (min-width: 783px) {
+
+	/* Keep the table within a horizontally scrollable viewport. */
+	.wp-list-table-scroll {
+		display: grid;
+		container-type: inline-size;
+		clear: both;
+		overflow-x: auto;
+		overflow-y: hidden;
+		overscroll-behavior-x: none;
+		border: 1px solid #c3c4c7;
+		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
+	}
+
+	/* Wrap preformatted text, including inline preformatting, while preserving whitespace. */
+	.wp-list-table-scroll > .wp-list-table pre {
+		white-space: pre-wrap !important;
+		overflow-wrap: anywhere;
+	}
+
+	/* Keep inline editing forms within the visible table container. */
+	.wp-list-table-scroll .inline-edit-wrapper,
+	.wp-list-table-scroll #replyrow.inline-edit-row fieldset.comment-reply {
+		position: sticky;
+		inset-inline-start: 0;
+		z-index: 2;
+		box-sizing: border-box;
+		width: 100cqi;
+	}
+
+	/* Account for the comment editing cell's 2px padding on each side. */
+	.wp-list-table-scroll #replyrow.inline-edit-row fieldset.comment-reply {
+		inset-inline-start: 2px;
+		float: none;
+		width: calc(100cqi - 4px);
+	}
+
+	.wp-list-table-scroll > .widefat {
+		grid-area: 1 / 1;
+		border: 0;
+		box-shadow: none;
+	}
+
+	/* Keep sort indicators beside their labels when columns shrink. */
+	.wp-list-table-scroll > .wp-list-table th.sortable a,
+	.wp-list-table-scroll > .wp-list-table th.sorted a {
+		display: flex;
+		align-items: center;
+	}
+
+	/* Keep the sort icons' layout boxes from extending past the last column. */
+	.wp-list-table-scroll .sorting-indicators {
+		overflow: clip;
+	}
+
+	/* Keep sorting links' focus indicators inside the scrolling viewport. */
+	.wp-list-table-scroll th.sortable a:focus,
+	.wp-list-table-scroll th.sorted a:focus {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
+		outline-offset: -2px;
+	}
+
+	.wp-list-table-scroll > .fixed {
+		table-layout: auto;
+	}
+
+	/* Preserve the checkbox column's spacing under automatic table layout. */
+	.wp-list-table-scroll > .fixed .check-column {
+		min-width: 2.2em;
+	}
+
+	:where(.wp-list-table-scroll) > .fixed .column-author,
+	:where(.wp-list-table-scroll) > .fixed .column-categories,
+	:where(.wp-list-table-scroll) > .fixed .column-tags,
+	:where(.wp-list-table-scroll) > .fixed .column-date,
+	:where(.wp-list-table-scroll) > .fixed .column-response,
+	:where(.wp-list-table-scroll) > .fixed .column-role,
+	:where(.wp-list-table-scroll) > .fixed .column-slug,
+	:where(.wp-list-table-scroll) > .fixed .column-locations {
+		width: auto;
+	}
+
+	/* Long words, URLs, and filenames must not set the table's intrinsic width. */
+	.wp-list-table-scroll > .fixed .column-primary,
+	.wp-list-table-scroll > .fixed .column-primary *,
+	.wp-list-table-scroll > .fixed .column-author,
+	.wp-list-table-scroll > .fixed .column-author *,
+	.wp-list-table-scroll > .fixed .column-categories,
+	.wp-list-table-scroll > .fixed .column-categories *,
+	.wp-list-table-scroll > .fixed .column-tags,
+	.wp-list-table-scroll > .fixed .column-tags *,
+	.wp-list-table-scroll > .fixed .column-response,
+	.wp-list-table-scroll > .fixed .column-response *,
+	.wp-list-table-scroll > .fixed .column-role,
+	.wp-list-table-scroll > .fixed .column-role *,
+	.wp-list-table-scroll > .fixed .column-slug,
+	.wp-list-table-scroll > .fixed .column-slug *,
+	.wp-list-table-scroll > .fixed .column-locations,
+	.wp-list-table-scroll > .fixed .column-locations * {
+		overflow-wrap: anywhere;
+	}
+
+	.wp-list-table-scroll > .fixed th.column-author,
+	.wp-list-table-scroll > .fixed th.column-categories,
+	.wp-list-table-scroll > .fixed th.column-tags,
+	.wp-list-table-scroll > .fixed th.column-response,
+	.wp-list-table-scroll > .fixed th.column-role,
+	.wp-list-table-scroll > .fixed th.column-slug,
+	.wp-list-table-scroll > .fixed th.column-locations {
+		min-width: 10em;
+	}
+
+	.wp-list-table-scroll > .fixed th.column-comments {
+		min-width: 5.5em;
+	}
+
+	.wp-list-table-scroll > .fixed th.column-date {
+		min-width: 12em;
+	}
+
+	.wp-list-table-scroll > .fixed th.column-primary {
+		min-width: 20em;
+	}
+
+	/* Match the edge fades to Core's row backgrounds. */
+	.wp-list-table-scroll > .wp-list-table > :is(thead, tbody, tfoot) > tr {
+		--list-table-row-background: #fff;
+		position: relative;
+	}
+
+	.wp-list-table-scroll > .striped > tbody > :nth-child(odd),
+	.wp-list-table-scroll > .wp-list-table > tbody > .alternate,
+	.wp-list-table-scroll > .wp-list-table > tbody > .undo {
+		--list-table-row-background: #f6f7f7;
+	}
+
+	.wp-list-table-scroll > .plugins > tbody > tr {
+		--list-table-row-background: #fff;
+	}
+
+	.wp-list-table-scroll > .plugins > tbody > .active {
+		--list-table-row-background: color-mix(in srgb, var(--wp-admin-theme-color) 8%, #fff);
+	}
+
+	.wp-list-table-scroll > .plugins > tbody > .paused {
+		--list-table-row-background: #f6f7f7;
+	}
+
+	.wp-list-table-scroll > .wp-list-table > tbody > :is(.unapproved, .site-spammed, .site-mature) {
+		--list-table-row-background: #fcf9e8;
+	}
+
+	.wp-list-table-scroll > .wp-list-table > tbody > :is(.site-deleted, .site-archived) {
+		--list-table-row-background: #fcf0f1;
+	}
+
+	/* Core applies the 8% keyboard-selection tint to both the row and its cells. */
+	.wp-list-table-scroll > .wp-list-table > tbody > .vim-current {
+		--list-table-row-background: color-mix(in srgb, var(--wp-admin-theme-color) 15.36%, #fff);
+	}
+
+	/* Zero-width sticky cells paint the fades inward without adding column width. */
+	.wp-list-table-scroll > .wp-list-table > :is(thead, tbody, tfoot) > tr::before,
+	.wp-list-table-scroll > .wp-list-table > :is(thead, tbody, tfoot) > tr::after {
+		content: "";
+		display: table-cell;
+		position: sticky;
+		z-index: 1;
+		width: 0;
+		padding: 0;
+
+		/* WebKit needs a nonzero, nontransparent border to paint the sticky cell's border image. */
+		border: 0 solid var(--list-table-row-background);
+		border-top-width: 1px;
+		pointer-events: none;
+		opacity: 0;
+	}
+
+	.wp-list-table-scroll > .wp-list-table > :is(thead, tbody, tfoot) > tr::before {
+		inset-inline-start: 0;
+
+		/* rtl:ignore */
+		border-image: linear-gradient(to right, var(--list-table-row-background), transparent) 0 100% / 0 32px 0 0 / 0 32px 0 0 stretch;
+	}
+
+	.wp-list-table-scroll > .wp-list-table > :is(thead, tbody, tfoot) > tr::after {
+		inset-inline-end: 0;
+
+		/* rtl:ignore */
+		border-image: linear-gradient(to left, var(--list-table-row-background), transparent) 0 0 0 100% / 0 0 0 32px / 0 0 0 32px stretch;
+	}
+
+	.wp-list-table-scroll.has-scroll-overflow-start > .wp-list-table > :is(thead, tbody, tfoot) > tr::before,
+	.wp-list-table-scroll.has-scroll-overflow-end > .wp-list-table > :is(thead, tbody, tfoot) > tr::after {
+		opacity: 1;
+	}
+
+	/* Keep the same table grid in editing rows, without covering their forms. */
+	.wp-list-table-scroll > .wp-list-table > tbody > :is(.inline-edit-row, .inline-editor, #replyrow)::before,
+	.wp-list-table-scroll > .wp-list-table > tbody > :is(.inline-edit-row, .inline-editor, #replyrow)::after {
+		visibility: hidden;
+	}
+
+	.rtl .wp-list-table-scroll > .wp-list-table > :is(thead, tbody, tfoot) > tr::before,
+	.rtl .wp-list-table-scroll > .wp-list-table > :is(thead, tbody, tfoot) > tr::after {
+		transform: scaleX(-1);
+	}
+}
+
 @media screen and (max-width: 1100px) and (min-width: 782px), (max-width: 480px) {
 	.plugin-card .action-links {
 		position: static;