fix: toolbar overflow and accessibility findings on the admin screens

src/css/common/list-table/_responsive.scss

@@ -125,9 +125,12 @@
 		display: none;
 	}
 
+	// The pagination and view toggle cannot shrink, so the group must not be
+	// asked to: letting it shrink pushed the toggle out of the toolbar (and
+	// off the page edge in RTL) between the tablet collapse and about 1400px.
 	.tablenav-end-group {
-		flex: 0 1 auto;
-		min-inline-size: 0;
+		flex: 0 0 auto;
+		min-inline-size: fit-content;
 	}
 
 	// The item count is the first thing to give way when space runs short.
@@ -145,7 +148,7 @@
 // "Select all" at the start, the pagination + view-toggle group pinned to the
 // end. A forced full-width break keeps the split deterministic regardless of
 // content width.
-@media (782px < width <= 1210px) {
+@media (782px < width <= 1400px) {
 	.snippets-list-view .tablenav.top {
 		flex-wrap: wrap;
 		row-gap: 8px;

src/css/edit/_sidebar.scss

@@ -179,6 +179,12 @@
 
 	.components-form-token-field {
 		inline-size: 100%;
+
+		// The component's own grey is 4.05:1 on the sidebar surface; the muted
+		// text token clears the 4.5:1 floor.
+		.components-form-token-field__help {
+			color: var(--cs-color-text-muted);
+		}
 	}
 
 	.generate-button {

src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx

@@ -104,6 +104,10 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({ isExpanded, setIsExpande
 			if (textareaRef.current && !editorInstance && window.wp.codeEditor) {
 				editorInstance = window.wp.codeEditor.initialize(textareaRef.current)
 
+				// CodeMirror hides the labelled textarea and types into an unlabelled one
+				// of its own, so the name has to be put on that input directly.
+				editorInstance.codemirror.getInputField().setAttribute('aria-label', __('Snippet code', 'code-snippets'))
+
 				editorInstance.codemirror.on('changes', (instance, changes) =>
 					handleEditorChanges(instance, changes, setSnippet, setCurrentNotice))
 			}

src/js/services/settings/editor-preview.ts

@@ -1,3 +1,4 @@
+import { __ } from '@wordpress/i18n'
 import '../../entries/editor'
 
 const parseSelect = (select: HTMLSelectElement) => select.options[select.selectedIndex].value
@@ -10,6 +11,10 @@ const initialiseCodeMirror = () => {
 
 	if (textarea && codeEditor) {
 		window.code_snippets_editor_preview = codeEditor.initialize(textarea)
+
+		// CodeMirror's own input is unlabelled; name it so the preview reads as what it is.
+		window.code_snippets_editor_preview.codemirror.getInputField().setAttribute('aria-label', __('Code editor preview', 'code-snippets'))
+
 		return window.code_snippets_editor_preview.codemirror
 	}
 

src/php/Settings/settings.php

@@ -136,6 +136,15 @@ function do_settings_fields_with_headings( string $page, string $section ): void
 
 		echo '<tr' . $class . '>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped above.
 
+		// A field with no title, such as a notice rendered by a callback, spans
+		// the row rather than leaving an empty header cell for a screen reader.
+		if ( '' === (string) $field['title'] ) {
+			echo '<td colspan="2">';
+			call_user_func( $field['callback'], $field['args'] );
+			echo '</td></tr>';
+			continue;
+		}
+
 		if ( ! empty( $field['args']['label_for'] ) ) {
 			printf(
 				'<th scope="row"><label for="%s">%s</label></th>',

tests/e2e/list-toolbar-fit.spec.ts

@@ -0,0 +1,34 @@
+import { expect, test } from '@playwright/test'
+
+const SNIPPETS_URL = '/wp-admin/admin.php?page=snippets'
+
+// The toolbar's end group (pagination plus the view toggle) cannot shrink, so at
+// widths where the row does not fit it must wrap rather than spill off the page.
+test.describe('Snippets toolbar fit', () => {
+	for (const width of [1280, 1360, 1600]) {
+		test(`nothing spills out of the toolbar at ${width}px`, async ({ page }) => {
+			await page.setViewportSize({ width, height: 900 })
+			await page.goto(SNIPPETS_URL)
+			await page.waitForSelector('.snippet-view-toggle')
+
+			const fit = await page.evaluate(() => {
+				const nav = document.querySelector('.snippets-list-view .tablenav.top')
+				const toggle = document.querySelector('.snippet-view-toggle')
+				if (!nav || !toggle) {
+					return { missing: true }
+				}
+				const n = nav.getBoundingClientRect()
+				const t = toggle.getBoundingClientRect()
+				return {
+					missing: false,
+					pageOverflow: document.documentElement.scrollWidth - document.documentElement.clientWidth,
+					toggleInsideNav: t.left >= n.left - 1 && t.right <= n.right + 1
+				}
+			})
+
+			expect(fit.missing).toBe(false)
+			expect(fit.pageOverflow).toBeLessThanOrEqual(0)
+			expect(fit.toggleInsideNav).toBe(true)
+		})
+	}
+})

tests/unit/Settings/Settings_Layout_Test.php

@@ -102,6 +102,7 @@ public function test_group_headings_render_once_and_escaped(): void {
 			]
 		);
 		add_settings_field( 'third', 'Third', '__return_null', Settings_Menu::SETTINGS_PAGE, 'layout-test', [ 'group_heading' => 'Group two' ] );
+		add_settings_field( 'notice', '', static fn() => print( 'Notice text' ), Settings_Menu::SETTINGS_PAGE, 'layout-test' );
 
 		ob_start();
 		do_settings_fields_with_headings( Settings_Menu::SETTINGS_PAGE, 'layout-test' );
@@ -112,6 +113,8 @@ public function test_group_headings_render_once_and_escaped(): void {
 		$this->assertStringContainsString( 'Group two', $html );
 		$this->assertStringContainsString( '<label for="field-second">Second</label>', $html );
 		$this->assertStringContainsString( '<th scope="row">First</th>', $html );
+		$this->assertStringContainsString( '<td colspan="2">Notice text</td>', $html, 'a field with no title spans the row' );
+		$this->assertStringNotContainsString( '<th scope="row"></th>', $html, 'no empty header cell is left behind' );
 	}
 
 	/**