Fix: heading structure in admin screens

.gitignore

@@ -38,3 +38,5 @@ tmp
 .codex
 # Local environment overrides (license keys, secrets)
 /.env
+.superpowers/
+docs/superpowers/

src/css/import/_migrate.scss

@@ -1,6 +1,6 @@
 
 .importer-selector-card {
-	h3 {
+	h2 {
 		margin: 0 0 1em;
 	}
 

src/css/import/_upload.scss

@@ -5,7 +5,7 @@ $type-colors: (
 );
 
 .import-upload-card {
-	h3 {
+	h2 {
 		margin: 0 0 1em;
 	}
 
@@ -105,7 +105,7 @@ $type-colors: (
 .selected-files {
 	margin-block-end: 20px;
 
-	h4 {
+	h3 {
 		margin: 0 0 12px;
 		font-size: 14px;
 		font-weight: 600;
@@ -162,7 +162,7 @@ $type-colors: (
 }
 
 .duplicate-action-selector-card {
-	h3 {
+	h2 {
 		margin: 0 0 1em;
 	}
 
@@ -199,7 +199,7 @@ $type-colors: (
 		flex: 1;
 	}
 
-	h4 {
+	h2 {
 		margin: 0 0 8px;
 		font-size: 16px;
 		font-weight: 600
@@ -220,10 +220,10 @@ $type-colors: (
 		}
 	}
 
-	p.import-result-warnings {
+	.import-result-warnings {
 		margin-block-start: 12px;
 
-		h4 {
+		h3 {
 			margin: 0 0 8px;
 			font-size: 14px;
 			color: #d63638;
@@ -280,7 +280,7 @@ $type-colors: (
 		align-items: center;
 		margin-block-end: 10px;
 
-		h4 {
+		h2 {
 			margin: 0;
 		}
 

src/css/welcome.scss

@@ -7,7 +7,7 @@
 $breakpoint: 1060px;
 
 .code-snippets-welcome {
-	h2 {
+	h1 {
 		font-size: 32px;
 		font-weight: 510;
 		line-height: 1.25;
@@ -38,7 +38,7 @@ $breakpoint: 1060px;
 		padding-block-end: 20px;
 	}
 
-	h3 {
+	h2 {
 		font-size: 18px;
 		margin: 0;
 	}

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

@@ -10,9 +10,9 @@ export const TagsEditor: React.FC = () => {
 
 	return options?.enabled
 		? <div className="snippet-tags-container">
-			<h3>
+			<h2>
 				<label htmlFor="components-form-token-input-0">{__('Snippet Tags', 'code-snippets')}</label>
-			</h3>
+			</h2>
 
 			<FormTokenField
 				label={__('Snippet Tags', 'code-snippets')}

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

@@ -28,7 +28,7 @@ export const PageHeading: React.FC = () => {
 
 	return (
 		<>
-			<h2>
+			<h1>
 				{snippet.id
 					? <>
 						{`${getPageHeading(snippet)} `}
@@ -58,7 +58,7 @@ export const PageHeading: React.FC = () => {
 						<a key={label} href={url} className="page-title-action">{label}</a>{' '}
 					</>
 				)}
-			</h2>
+			</h1>
 
 			<hr className="wp-header-end" />
 		</>

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

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

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">
-		<h3>{__('Duplicate snippets', 'code-snippets')}</h3>
+		<h2>{__('Duplicate snippets', 'code-snippets')}</h2>
 
 		<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">
-			<h3>{__('Choose files', 'code-snippets')}</h3>
+			<h2>{__('Choose files', 'code-snippets')}</h2>
 			<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,13 +47,13 @@ export interface SelectedFilesListProps {
 
 export const SelectedFilesList: React.FC<SelectedFilesListProps> = ({ files, onRemoveFile }) =>
 	<div className="selected-files">
-		<h4>
+		<h3>
 			{sprintf(
 				// translators: %d: number of selected files.
 				__('Selected files: (%d)', 'code-snippets'),
 				files.length
 			)}
-		</h4>
+		</h3>
 
 		<div className="selected-files-list">
 			{files.map(file =>

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

@@ -27,15 +27,15 @@ export const ImportResultDisplay: React.FC<ImportResultDisplayProps> = ({ succes
 			</div>
 
 			<div>
-				<h4>
+				<h2>
 					{'upload' === step && (success
 						? __('File upload successful', 'code-snippets')
 						: __('File upload error', 'code-snippets'))}
 
 					{'select' === step && (success
 						? __('Import successful', 'code-snippets')
 						: __('Import error', 'code-snippets'))}
-				</h4>
+				</h2>
 
 				<p className="import-result-message">{message}</p>
 
@@ -52,7 +52,7 @@ export const ImportResultDisplay: React.FC<ImportResultDisplayProps> = ({ succes
 
 				{warnings && 0 < warnings.length && (
 					<div className="import-result-warnings">
-						<h4>{__('Warnings:', 'code-snippets')}</h4>
+						<h3>{__('Warnings:', 'code-snippets')}</h3>
 						<ul>
 							{warnings.map(warning => <li key={warning}>{warning}</li>)}
 						</ul>

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

@@ -67,11 +67,11 @@ const SelectSnippetsForm: React.FC<SelectSnippetsFormProps> = ({ availableSnippe
 		<>
 			<div className="tablenav top">
 				<div>
-					<h4>{sprintf(
+					<h2>{sprintf(
 						// translators: %d: number of available snippets.
 						__('Available snippets (%d)', 'code-snippets'),
 						availableSnippets.length
-					)}</h4>
+					)}</h2>
 					<p>{__('Select the snippets you would like to import.', 'code-snippets')}</p>
 				</div>
 				<div className="table-actions">

src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx

@@ -213,8 +213,8 @@ const SearchResults: React.FC<SearchResultsViewProps> = ({ snippetView, setSnipp
 	return searchResults.snippets.length
 		? <>
 			{searchResults.isFeatured
-				? <h3 className="cloud-featured-heading">{__('Featured Snippets', 'code-snippets')}</h3>
-				: <h3 className="cloud-snippets-heading">{__('Search Results', 'code-snippets')}</h3>}
+				? <h2 className="cloud-featured-heading">{__('Featured Snippets', 'code-snippets')}</h2>
+				: <h2 className="cloud-snippets-heading">{__('Search Results', 'code-snippets')}</h2>}
 			<SearchResultsTable snippetView={snippetView} setSnippetView={setSnippetView} />
 		</>
 		: null

src/js/components/WelcomeMenu/Changelog.tsx

@@ -57,7 +57,7 @@ const ChangelogSection: React.FC<ChangelogSectionProps> = ({ section, entries })
 export const Changelog = () =>
 	<div className="code-snippets-changelog">
 		<div className="code-snippets-header-wrapper">
-			<h3>{__('Latest changes', 'code-snippets')}</h3>
+			<h2>{__('Latest changes', 'code-snippets')}</h2>
 			<a
 				href="https://wordpress.org/plugins/code-snippets/changelog"
 				className="button button-primary button-large"

src/js/components/WelcomeMenu/WelcomeMenu.tsx

@@ -12,7 +12,7 @@ const HeroImage = () => {
 	return (
 		<div className="code-snippets-hero">
 			<div className="code-snippets-header-wrapper">
-				<h3>{DATA?.hero.name}</h3>
+				<h2>{DATA?.hero.name}</h2>
 				<a
 					className="button button-primary button-large"
 					href={DATA?.hero.follow_url}
@@ -101,7 +101,7 @@ export const WelcomeMenu = () =>
 	<>
 		<Toolbar />
 		<div className="code-snippets-welcome">
-			<h2>{__('Resources and Updates', 'code-snippets')}</h2>
+			<h1>{__('Resources and Updates', 'code-snippets')}</h1>
 
 			<hr className="wp-header-end" />
 

src/php/Admin/Menus/Settings_Menu.php

@@ -292,7 +292,7 @@ protected function render_settings_sections() {
 
 			if ( $section['title'] ) {
 				printf(
-					'<h3 id="%s-settings" class="settings-section-title">%s</h3>' . "\n",
+					'<h2 id="%s-settings" class="settings-section-title">%s</h2>' . "\n",
 					esc_attr( $section['id'] ),
 					esc_html( $section['title'] )
 				);