Fix: consistent heading structure across all admin screens

src/css/common/_toolbar.scss

@@ -1,7 +1,7 @@
 @use 'upsell';
 
 $toolbar-block-size: 150px;
-$wpbody-block-indent: 20px;
+$wpbody-block-indent: 22px;
 
 #wpbody {
 	padding-block-start: $toolbar-block-size;
@@ -62,7 +62,7 @@ $wpbody-block-indent: 20px;
 }
 
 .code-snippets-toolbar-lower {
-	border: 1px solid #c3c4c7;
+	border-block: 1px solid #c3c4c7;
 
 	ul {
 		display: flex;

src/css/import.scss

@@ -1,3 +1,4 @@
+@use 'common/toolbar';
 @use 'import/page';
 @use 'import/card';
 @use 'import/upload';

src/css/import/_card.scss

@@ -28,6 +28,7 @@
 	border: 1px solid #e0e0e0;
 	margin-block-end: 10px;
 	inline-size: 100%;
+	box-sizing: border-box;
 
 	&.status-display {
 		display: flex;

src/css/import/_migrate.scss

@@ -1,6 +1,6 @@
 
 .importer-selector-card {
-	h2 {
+	h3 {
 		margin: 0 0 1em;
 	}
 
@@ -19,7 +19,7 @@
 }
 
 .import-options-card {
-	h2 {
+	h3 {
 		margin: 0 0 1em;
 	}
 
@@ -80,7 +80,7 @@
 		background-color: #d63638;
 	}
 
-	h3 {
+	h4 {
 		margin: 0 0 8px;
 		font-size: 16px;
 		font-weight: 600;
@@ -114,7 +114,7 @@
 		margin-block-end: 16px;
 	}
 
-	h3 {
+	h4 {
 		margin: 0 0 8px;
 		font-size: 18px;
 		color: #333;
@@ -129,7 +129,7 @@
 		align-items: center;
 		margin-block-end: 10px;
 
-		h2 {
+		h3 {
 			margin: 0;
 		}
 
@@ -143,7 +143,3 @@
 		inline-size: 50px;
 	}
 }
-
-.migrate-form-container {
-	max-inline-size: 800px;
-}

src/css/import/_page.scss

@@ -1,16 +1,19 @@
-.import-snippets-menu {
-	.narrow {
-		max-inline-size: 800px;
-	}
+.wrap > h2:first-of-type {
+	font-size: 1.5rem;
+	font-weight: 400;
+	line-height: 1.3;
+	margin-block: 50px 1rem;
+	padding: 0;
+}
 
-	.nav-tab-wrapper {
-		margin-block-end: 20px;
-	}
+.nav-tab-wrapper {
+	margin-block-end: 20px;
 }
 
 .import-snippets-section {
 	padding-block-start: 0;
 	display: none;
+	max-inline-size: 800px;
 
 	&.active-section {
 		display: block;

src/css/import/_upload.scss

@@ -4,12 +4,8 @@ $type-colors: (
 	html: #ef6a36
 );
 
-.upload-form-container {
-	max-inline-size: 800px;
-}
-
 .import-upload-card {
-	h2 {
+	h3 {
 		margin: 0 0 1em;
 	}
 
@@ -86,7 +82,7 @@ $type-colors: (
 .selected-files {
 	margin-block-end: 20px;
 
-	h3 {
+	h4 {
 		margin: 0 0 12px;
 		font-size: 14px;
 		font-weight: 600;
@@ -138,7 +134,7 @@ $type-colors: (
 }
 
 .duplicate-action-selector-card {
-	h2 {
+	h3 {
 		margin: 0 0 1em;
 	}
 
@@ -175,7 +171,7 @@ $type-colors: (
 		flex: 1;
 	}
 
-	h3 {
+	h4 {
 		margin: 0 0 8px;
 		font-size: 16px;
 		font-weight: 600
@@ -256,7 +252,7 @@ $type-colors: (
 		align-items: center;
 		margin-block-end: 10px;
 
-		h3 {
+		h4 {
 			margin: 0;
 		}
 

src/css/welcome.scss

@@ -8,7 +8,7 @@ $breakpoint: 1060px;
 .code-snippets-welcome {
 	h2 {
 		font-size: 1.5rem;
-		font-weight: 500;
+		font-weight: 400;
 		line-height: 1.3;
 		padding: 0;
 		margin-block: 50px 1rem;

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

@@ -147,7 +147,7 @@ const EditFormWrap: React.FC = () => {
 	const [isUpgradeDialogOpen, setIsUpgradeDialogOpen] = useState(false)
 
 	return (
-		<div className="wrap">
+		<>
 			<PageHeading />
 			<Notices placement="above-form" />
 
@@ -172,7 +172,7 @@ const EditFormWrap: React.FC = () => {
 			</EditForm>
 
 			<UpsellDialog isOpen={isUpgradeDialogOpen} setIsOpen={setIsUpgradeDialogOpen} />
-		</div>
+		</>
 	)
 }
 

src/js/components/ImportMenu/ImportMenu.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 import { __ } from '@wordpress/i18n'
 import { WithRestAPIContext } from '../../hooks/useRestAPI'
 import { fetchQueryParam, updateQueryParam } from '../../utils/urls'
+import { Toolbar } from '../common/Toolbar'
 import { UploadForm } from './UploadForm/UploadForm'
 import { MigrateForm } from './MigrateForm/MigrateForm'
 import type { ReactNode } from 'react'
@@ -33,10 +34,11 @@ export const ImportMenu: React.FC = () => {
 	const [activeTab, setActiveTab] = useState<TabType>(getDefaultTab)
 
 	return (
-		<div className="import-snippets-menu wrap">
-			<h1>{__('Import Snippets', 'code-snippets')}</h1>
+		<>
+			<Toolbar />
+			<>
+				<h2>{__('Import Snippets', 'code-snippets')}</h2>
 
-			<div className="narrow">
 				<nav
 					className="nav-tab-wrapper"
 					aria-label={__('Import sources', 'code-snippets')}
@@ -61,7 +63,7 @@ export const ImportMenu: React.FC = () => {
 							{TAB_CONTENT[tab]}
 						</div>)}
 				</WithRestAPIContext>
-			</div>
-		</div>
+			</>
+		</>
 	)
 }

src/js/components/ImportMenu/MigrateForm/ImportOptions.tsx

@@ -8,7 +8,7 @@ export const ImportOptions: React.FC = () => {
 
 	return (
 		<ImportCard className="import-options-card">
-			<h2>{__('Import options', 'code-snippets')}</h2>
+			<h3>{__('Import options', 'code-snippets')}</h3>
 			<label>
 				<input
 					type="checkbox"

src/js/components/ImportMenu/MigrateForm/ImporterSelector.tsx

@@ -13,7 +13,7 @@ export interface ImporterSelectorProps {
 export const ImporterSelector: React.FC<ImporterSelectorProps> = ({ value, onChange, options, isLoading }) =>
 	<ImportCard variant="controls" className="importer-selector-card">
 		<label htmlFor="importer-select">
-			<h2>{__('Select plugin', 'code-snippets')}</h2>
+			<h3>{__('Select plugin', 'code-snippets')}</h3>
 		</label>
 
 		<select

src/js/components/ImportMenu/MigrateForm/MigrateForm.tsx

@@ -17,9 +17,9 @@ interface StatusDisplayProps {
 
 const StatusDisplay: React.FC<StatusDisplayProps> = ({ type, title, children }) =>
 	<ImportCard variant="controls" className="import-section-status">
-		<div className={type}><span>{'error' === type ? '✕' : '✓'}</span></div>
+		<div className={type} aria-hidden="true"><span>{'error' === type ? '✕' : '✓'}</span></div>
 		<div>
-			<h3>{title}</h3>
+			<h4>{title}</h4>
 			<p>{children}</p>
 		</div>
 	</ImportCard>
@@ -54,8 +54,8 @@ const StatusMessages: React.FC = () => {
 					0 === snippetSelection.availableItems.length && 0 === importedIds.length && (
 				<ImportCard className="no-snippets-card">
 					<div className="card-inner">
-						<div className="card-icon">📭</div>
-						<h3>{__('No snippets found', 'code-snippets')}</h3>
+						<div className="card-icon" aria-hidden="true">📭</div>
+						<h4>{__('No snippets found', 'code-snippets')}</h4>
 						<p>{__('No snippets were found for the selected plugin. Make sure the plugin is installed and has snippets configured.', 'code-snippets')}</p>
 					</div>
 				</ImportCard>)}
@@ -81,7 +81,7 @@ const MigrateFormInner: React.FC = () => {
 	}
 
 	return (
-		<div className="migrate-form-container">
+		<>
 			<p>{__('If you are using another snippets plugin, you can import those existing snippets to your Code Snippets library.', 'code-snippets')}</p>
 
 			<ImporterSelector
@@ -103,15 +103,13 @@ const MigrateFormInner: React.FC = () => {
 						isImporting={isWorking === MigrationStep.MigrateSnippets}
 					/>
 				</>)}
-		</div>
+		</>
 	)
 }
 
 export const MigrateForm: React.FC = () =>
 	<WithMigrationOptions>
 		<WithMigrationData>
-			<div className="wrap">
-				<MigrateFormInner />
-			</div>
+			<MigrateFormInner />
 		</WithMigrationData>
 	</WithMigrationOptions>

src/js/components/ImportMenu/MigrateForm/SimpleSnippetTable.tsx

@@ -45,11 +45,11 @@ export const SimpleSnippetTable: React.FC<SimpleSnippetTableProps> = props => {
 		<ImportCard className="migrate-snippets-table-card snippets-table-card">
 			<div>
 				<header>
-					<h2>{sprintf(
+					<h3>{sprintf(
 						// translators: %d: number of available snippets.
 						__('Available snippets (%d)', 'code-snippets'),
 						availableItems.length
-					)}</h2>
+					)}</h3>
 					<p>{__('We found the following snippets:', 'code-snippets')}</p>
 				</header>
 

src/js/components/ImportMenu/UploadForm/SelectFiles/DragDropUploadArea.tsx

@@ -46,7 +46,7 @@ export const DragDropUploadArea: React.FC<DragDropUploadAreaProps> = ({ fileInpu
 					handleFiles(event.dataTransfer.files)
 				}}
 			>
-				<div className="drop-zone-icon">📁</div>
+				<div className="drop-zone-icon" aria-hidden="true">📁</div>
 				<p>{__('Drag and drop files here, or click to browse', 'code-snippets')}</p>
 				<p>{__('Supports JSON and XML files', 'code-snippets')}</p>
 			</div>

src/js/components/ImportMenu/UploadForm/SelectFiles/DuplicateActionSelector.tsx

@@ -19,7 +19,7 @@ export interface DuplicateActionSelectorProps {
 
 export const DuplicateActionSelector: React.FC<DuplicateActionSelectorProps> = ({ value, onChange }) =>
 	<ImportCard className="duplicate-action-selector-card">
-		<h2>{__('Duplicate snippets', 'code-snippets')}</h2>
+		<h3>{__('Duplicate snippets', 'code-snippets')}</h3>
 
 		<p className="description">
 			{__('What should happen if an existing snippet is found with an identical name to an imported snippet?', 'code-snippets')}

src/js/components/ImportMenu/UploadForm/SelectFiles/SelectFiles.tsx

@@ -57,7 +57,7 @@ export const SelectFiles: React.FC<SelectFilesProps> = ({
 
 	return (
 		<ImportCard className="import-upload-card">
-			<h2>{__('Choose files', 'code-snippets')}</h2>
+			<h3>{__('Choose files', 'code-snippets')}</h3>
 			<p className="description">
 				{__('Choose one or more Code Snippets (.xml or .json) files to parse and preview.', 'code-snippets')}
 			</p>

src/js/components/ImportMenu/UploadForm/SelectFiles/SelectedFilesList.tsx

@@ -47,19 +47,19 @@ export interface SelectedFilesListProps {
 
 export const SelectedFilesList: React.FC<SelectedFilesListProps> = ({ files, onRemoveFile }) =>
 	<div className="selected-files">
-		<h3>
+		<h4>
 			{sprintf(
 				// translators: %d: number of selected files.
 				__('Selected files: (%d)', 'code-snippets'),
 				files.length
 			)}
-		</h3>
+		</h4>
 
 		<div className="selected-files-list">
 			{files.map(file =>
 				<div key={file.id}>
 					<div className="selected-file-details">
-						<span className="file-icon">📄</span>
+						<span className="file-icon" aria-hidden="true">📄</span>
 						<div>
 							<div><strong>{file.name}</strong></div>
 							<div className="file-size">{formatFileSize(file.file.size)}</div>
@@ -68,13 +68,19 @@ export const SelectedFilesList: React.FC<SelectedFilesListProps> = ({ files, onR
 
 					<button
 						type="button"
-						title={__('Remove file', 'code-snippets')}
+						aria-label={
+							sprintf(
+								// translators: %s: file name.
+								__('Remove file %s', 'code-snippets'),
+								file.name
+							)
+						}
 						onClick={event => {
 							event.stopPropagation()
 							onRemoveFile(file)
 						}}
 					>
-						✕
+						<span aria-hidden="true">✕</span>
 					</button>
 				</div>
 			)}

src/js/components/ImportMenu/UploadForm/SelectSnippets/ImportResultDisplay.tsx

@@ -22,20 +22,20 @@ export interface ImportResultDisplayProps {
 export const ImportResultDisplay: React.FC<ImportResultDisplayProps> = ({ success, message, warnings, step }) =>
 	<ImportCard className="import-result-display-card">
 		<div className={`import-result import-result-${success ? 'success' : 'failure'}`}>
-			<div className="import-result-icon">
+			<div className="import-result-icon" aria-hidden="true">
 				<span>{success ? '✓' : '✕'}</span>
 			</div>
 
 			<div>
-				<h3>
+				<h4>
 					{'upload' === step && (success
 						? __('File upload successful', 'code-snippets')
 						: __('File upload error', 'code-snippets'))}
 
 					{'select' === step && (success
 						? __('Import successful', 'code-snippets')
 						: __('Import error', 'code-snippets'))}
-				</h3>
+				</h4>
 
 				<p className="import-result-message">{message}</p>