From b2a231ca7ed4bc8016a9500c6f535c73863e1d49 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Mon, 4 Dec 2017 15:38:01 +0100
Subject: [PATCH 1/4] Try editor heading

This adds a page heading for screen readers. If this mitigates #503, then we'd want to make sure that the correct post type is output, and the text is translatable.
---
 gutenberg.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/gutenberg.php b/gutenberg.php
index 2687a0ed599d4..321cd3ee2976e 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -30,6 +30,7 @@ function the_gutenberg_project() {
 	?>
 	<div class="nvda-temp-fix screen-reader-text">&nbsp;</div>
 	<div class="gutenberg">
+		<h1 class="screen-reader-text">Edit Post</h1>
 		<div id="editor" class="gutenberg__editor"></div>
 	</div>
 	<?php

From 5ddee928142e009543435e73f737d5c6ea119775 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Wed, 6 Dec 2017 11:44:27 +0100
Subject: [PATCH 2/4] Change the post title component to use a div

---
 editor/components/post-title/index.js   |  4 ++--
 editor/components/post-title/style.scss | 10 +++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/editor/components/post-title/index.js b/editor/components/post-title/index.js
index cd93582ec9a9a..6eeea58614e4b 100644
--- a/editor/components/post-title/index.js
+++ b/editor/components/post-title/index.js
@@ -110,7 +110,7 @@ class PostTitle extends Component {
 				tabIndex={ -1 /* Necessary for Firefox to include relatedTarget in blur event */ }
 			>
 				{ isSelected && <PostPermalink /> }
-				<h1>
+				<div>
 					<Textarea
 						ref={ this.bindTextarea }
 						className="editor-post-title__input"
@@ -121,7 +121,7 @@ class PostTitle extends Component {
 						onKeyDown={ this.onKeyDown }
 						onKeyPress={ this.onUnselect }
 					/>
-				</h1>
+				</div>
 			</div>
 		);
 	}
diff --git a/editor/components/post-title/style.scss b/editor/components/post-title/style.scss
index 8f30f451c2907..a26fbc853fd23 100644
--- a/editor/components/post-title/style.scss
+++ b/editor/components/post-title/style.scss
@@ -2,7 +2,7 @@
 	position: relative;
 	padding: 5px 0;
 
-	h1 {
+	div {
 		border: 1px solid transparent;
 		font-size: $editor-font-size;
 		transition: 0.2s outline;
@@ -11,12 +11,12 @@
 		padding: $block-padding;
 	}
 
-	&:hover h1 {
+	&:hover div {
 		border: 1px solid $light-gray-500;
 		transition: 0.2s outline;
 	}
 
-	&.is-selected h1 {
+	&.is-selected div {
 		border: 1px solid $light-gray-500;
 		transition: 0.2s outline;
 	}
@@ -34,6 +34,9 @@ textarea.editor-post-title__input {
 	padding: 5px 0;
 	margin: 0;
 
+	// inherited from h1
+	font-weight: 600;
+
 	&:focus {
 		outline: none;
 		box-shadow: none;
@@ -41,6 +44,7 @@ textarea.editor-post-title__input {
 }
 
 .editor-post-title .editor-post-permalink {
+	font-size: $default-font-size;
 	position: absolute;
 	top: -34px;
 	left: 0;

From 198fd350f2fb4efe7f20ee297c83487b1cfca089 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Thu, 7 Dec 2017 09:40:33 +0100
Subject: [PATCH 3/4] Change sidebar h3s to h2s

This better matches the page hierarchy.
---
 components/panel/body.js    | 4 ++--
 components/panel/style.scss | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/panel/body.js b/components/panel/body.js
index 39d05e6b29673..09dbb3f7224d4 100644
--- a/components/panel/body.js
+++ b/components/panel/body.js
@@ -45,7 +45,7 @@ class PanelBody extends Component {
 		return (
 			<div className={ classes }>
 				{ !! title && (
-					<h3 className="components-panel__body-title">
+					<h2 className="components-panel__body-title">
 						<Button
 							className="components-panel__body-toggle"
 							onClick={ this.toggle }
@@ -54,7 +54,7 @@ class PanelBody extends Component {
 							<Dashicon icon={ icon } />
 							{ title }
 						</Button>
-					</h3>
+					</h2>
 				) }
 				{ isOpened && children }
 			</div>
diff --git a/components/panel/style.scss b/components/panel/style.scss
index 1a0472f9660b4..362492141dfe0 100644
--- a/components/panel/style.scss
+++ b/components/panel/style.scss
@@ -58,6 +58,7 @@
 	display: block;
 	padding: 0;
 	font-size: inherit;
+	margin-top: 0;
 	margin-bottom: 0;
 }
 .components-panel__body.is-opened > .components-panel__body-title {

From ec88dc9c4aacca4488c1411a7ee444b137134188 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Fri, 8 Dec 2017 13:44:09 +0100
Subject: [PATCH 4/4] Bump sidebar headings.

---
 blocks/library/cover-image/index.js                           | 2 +-
 blocks/library/gallery/block.js                               | 2 +-
 blocks/library/heading/index.js                               | 2 +-
 blocks/library/image/block.js                                 | 2 +-
 editor/components/post-taxonomies/flat-term-selector.js       | 3 +--
 .../components/post-taxonomies/hierarchical-term-selector.js  | 2 +-
 editor/components/post-taxonomies/style.scss                  | 4 ++--
 editor/edit-post/sidebar/style.scss                           | 1 +
 8 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/blocks/library/cover-image/index.js b/blocks/library/cover-image/index.js
index 7404a4cb5333c..9ca8ce34d4ee9 100644
--- a/blocks/library/cover-image/index.js
+++ b/blocks/library/cover-image/index.js
@@ -104,7 +104,7 @@ registerBlockType( 'core/cover-image', {
 				<BlockDescription>
 					<p>{ __( 'Cover Image is a bold image block with an optional title.' ) }</p>
 				</BlockDescription>
-				<h3>{ __( 'Cover Image Settings' ) }</h3>
+				<h2>{ __( 'Cover Image Settings' ) }</h2>
 				<ToggleControl
 					label={ __( 'Fixed Background' ) }
 					checked={ !! hasParallax }
diff --git a/blocks/library/gallery/block.js b/blocks/library/gallery/block.js
index 84e2543b4817d..3c4a78c5e6798 100644
--- a/blocks/library/gallery/block.js
+++ b/blocks/library/gallery/block.js
@@ -200,7 +200,7 @@ class GalleryBlock extends Component {
 			focus && (
 				<InspectorControls key="inspector">
 					{blockDescription}
-					<h3>{ __( 'Gallery Settings' ) }</h3>
+					<h2>{ __( 'Gallery Settings' ) }</h2>
 					{ images.length > 1 && <RangeControl
 						label={ __( 'Columns' ) }
 						value={ columns }
diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js
index 972638871d592..0386b1337e7c9 100644
--- a/blocks/library/heading/index.js
+++ b/blocks/library/heading/index.js
@@ -121,7 +121,7 @@ registerBlockType( 'core/heading', {
 					<BlockDescription>
 						<p>{ __( 'Search engines use the headings to index the structure and content of your web pages.' ) }</p>
 					</BlockDescription>
-					<h3>{ __( 'Heading Settings' ) }</h3>
+					<h2>{ __( 'Heading Settings' ) }</h2>
 					<p>{ __( 'Size' ) }</p>
 					<Toolbar
 						controls={
diff --git a/blocks/library/image/block.js b/blocks/library/image/block.js
index 8c15bb6408550..8f994c6dbaabb 100644
--- a/blocks/library/image/block.js
+++ b/blocks/library/image/block.js
@@ -206,7 +206,7 @@ class ImageBlock extends Component {
 			focus && (
 				<InspectorControls key="inspector">
 					{ blockDescription }
-					<h3>{ __( 'Image Settings' ) }</h3>
+					<h2>{ __( 'Image Settings' ) }</h2>
 					<TextControl label={ __( 'Textual Alternative' ) } value={ alt } onChange={ this.updateAlt } help={ __( 'Describe the purpose of the image. Leave empty if the image is not a key part of the content.' ) } />
 					{ ! isEmpty( availableSizes ) && (
 						<SelectControl
diff --git a/editor/components/post-taxonomies/flat-term-selector.js b/editor/components/post-taxonomies/flat-term-selector.js
index 72df24181b021..a06a611e2331a 100644
--- a/editor/components/post-taxonomies/flat-term-selector.js
+++ b/editor/components/post-taxonomies/flat-term-selector.js
@@ -156,7 +156,7 @@ class FlatTermSelector extends Component {
 
 		return (
 			<div className="editor-post-taxonomies__flat-terms-selector">
-				<h4 className="editor-post-taxonomies__flat-terms-selector-title">{ label }</h4>
+				<h3 className="editor-post-taxonomies__flat-terms-selector-title">{ label }</h3>
 				<FormTokenField
 					value={ selectedTerms }
 					displayTransform={ unescapeString }
@@ -191,4 +191,3 @@ export default connect(
 		};
 	}
 )( FlatTermSelector );
-
diff --git a/editor/components/post-taxonomies/hierarchical-term-selector.js b/editor/components/post-taxonomies/hierarchical-term-selector.js
index 88334d8db10f4..942d70b3ae423 100644
--- a/editor/components/post-taxonomies/hierarchical-term-selector.js
+++ b/editor/components/post-taxonomies/hierarchical-term-selector.js
@@ -215,7 +215,7 @@ class HierarchicalTermSelector extends Component {
 		/* eslint-disable jsx-a11y/no-onchange */
 		return (
 			<div className="editor-post-taxonomies__hierarchical-terms-selector">
-				<h4 className="editor-post-taxonomies__hierarchical-terms-selector-title">{ label }</h4>
+				<h3 className="editor-post-taxonomies__hierarchical-terms-selector-title">{ label }</h3>
 				{ this.renderTerms( availableTermsTree ) }
 				{ ! loading &&
 					<button
diff --git a/editor/components/post-taxonomies/style.scss b/editor/components/post-taxonomies/style.scss
index aa9ebd62e1029..e56d8078db146 100644
--- a/editor/components/post-taxonomies/style.scss
+++ b/editor/components/post-taxonomies/style.scss
@@ -3,8 +3,8 @@
 	margin-top: $panel-padding;
 }
 
-.editor-post-taxonomies__flat-terms-selector-title,
-.editor-post-taxonomies__hierarchical-terms-selector-title {
+.editor-sidebar .editor-post-taxonomies__flat-terms-selector-title,
+.editor-sidebar .editor-post-taxonomies__hierarchical-terms-selector-title {
 	display: block;
 	margin-bottom: 10px;
 }
diff --git a/editor/edit-post/sidebar/style.scss b/editor/edit-post/sidebar/style.scss
index ff6e98254cb3e..1b70bb1e543cb 100644
--- a/editor/edit-post/sidebar/style.scss
+++ b/editor/edit-post/sidebar/style.scss
@@ -60,6 +60,7 @@
 		margin-top: 0;
 	}
 
+	h2,
 	h3 {
 		font-size: $default-font-size;
 		color: $dark-gray-500;