From 347b0bf108a01df032ef76eef9d9cb05f4c1a146 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Wed, 28 Oct 2015 23:07:08 +0000
Subject: [PATCH] Media: Improve the headings hierarchy in the Media Views for
 better accessibility.

Fixes #34273.

git-svn-id: https://develop.svn.wordpress.org/trunk@35427 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/media.css           | 12 +++++++---
 src/wp-admin/includes/image-edit.php |  8 +++----
 src/wp-includes/css/media-views.css  | 25 ++++++++++++++-------
 src/wp-includes/media-template.php   | 33 ++++++++++++++--------------
 4 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css
index c83fafc53b..48937571fa 100644
--- a/src/wp-admin/css/media.css
+++ b/src/wp-admin/css/media.css
@@ -500,7 +500,8 @@ border color while dragging a file over the uploader drop area */
 	color: #c00;
 }
 
-.upload-php .mode-grid .media-sidebar .media-uploader-status.errors h3 {
+.upload-php .mode-grid .media-sidebar .media-uploader-status.errors h3, /* Back-compat for pre-4.4 */
+.upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 {
 	display: none;
 }
 
@@ -1017,11 +1018,16 @@ border color while dragging a file over the uploader drop area */
 	margin: 0 8px 0 0;
 }
 
-#poststuff .imgedit-group-top h3 {
+#poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
+#poststuff .imgedit-group-top h2 {
+	margin: 0;
 	padding: 0;
+	font-size: 14px;
+	line-height: 1.4;
 }
 
-.imgedit-group-top h3 a {
+.imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
+.imgedit-group-top h2 a {
 	text-decoration: none;
 }
 
diff --git a/src/wp-admin/includes/image-edit.php b/src/wp-admin/includes/image-edit.php
index e1f9f7ef8c..3977c4335f 100644
--- a/src/wp-admin/includes/image-edit.php
+++ b/src/wp-admin/includes/image-edit.php
@@ -46,7 +46,7 @@ function wp_image_editor($post_id, $msg = false) {
 	<div class="imgedit-settings">
 	<div class="imgedit-group">
 	<div class="imgedit-group-top">
-		<h3><?php _e( 'Scale Image' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3>
+		<h2><?php _e( 'Scale Image' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
 		<div class="imgedit-help">
 		<p><?php _e('You can proportionally scale the original image. For best results, scaling should be done before you crop, flip, or rotate. Images can only be scaled down, not up.'); ?></p>
 		</div>
@@ -65,7 +65,7 @@ function wp_image_editor($post_id, $msg = false) {
 
 	<div class="imgedit-group">
 	<div class="imgedit-group-top">
-		<h3><a onclick="imageEdit.toggleHelp(this);return false;" href="#"><?php _e('Restore Original Image'); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></a></h3>
+		<h2><a onclick="imageEdit.toggleHelp(this);return false;" href="#"><?php _e('Restore Original Image'); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></a></h2>
 		<div class="imgedit-help">
 		<p><?php _e('Discard any changes and restore the original image.');
 
@@ -84,7 +84,7 @@ function wp_image_editor($post_id, $msg = false) {
 
 	<div class="imgedit-group">
 	<div class="imgedit-group-top">
-		<h3><?php _e('Image Crop'); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3>
+		<h2><?php _e( 'Image Crop' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
 
 		<div class="imgedit-help">
 		<p><?php _e('To crop the image, click on it and drag to make your selection.'); ?></p>
@@ -122,7 +122,7 @@ function wp_image_editor($post_id, $msg = false) {
 
 	<div class="imgedit-group imgedit-applyto">
 	<div class="imgedit-group-top">
-		<h3><?php _e('Thumbnail Settings'); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3>
+		<h2><?php _e( 'Thumbnail Settings' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
 		<p class="imgedit-help"><?php _e('You can edit the image while preserving the thumbnail. For example, you may wish to have a square thumbnail that displays just a section of the image.'); ?></p>
 	</div>
 
diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 7247a93172..1807f3478c 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -298,8 +298,10 @@
 	width: 100%;
 }
 
-.media-sidebar h3,
-.image-details h3 {
+.media-sidebar h3, /* Back-compat for pre-4.4 */
+.image-details h3, /* Back-compat for pre-4.4 */
+.media-sidebar h2,
+.image-details h2 {
 	position: relative;
 	font-weight: bold;
 	text-transform: uppercase;
@@ -1175,7 +1177,8 @@
 	max-width: 400px;
 }
 
-.uploader-inline .media-uploader-status h3 {
+.uploader-inline .media-uploader-status h3, /* Back-compat for pre-4.4 */
+.uploader-inline .media-uploader-status h2 {
 	display: none;
 }
 
@@ -1266,7 +1269,8 @@
 	border: 1px dashed #fff;
 }
 
-.uploader-window h3 {
+.uploader-window h3, /* Back-compat for pre-4.4 */
+.uploader-window h1 {
 	margin: -0.5em 0 0;
 	position: absolute;
 	top: 50%;
@@ -1321,7 +1325,8 @@
 	margin: 0 0 4em;
 }
 
-.uploader-inline h3 {
+.uploader-inline h3, /* Back-compat for pre-4.4 */
+.uploader-inline h2 {
 	font-size: 20px;
 	line-height: 28px;
 	font-weight: 400;
@@ -1740,7 +1745,8 @@
 	padding: 0;
 }
 
-.media-modal .imgedit-group-top h3 {
+.media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */
+.media-modal .imgedit-group-top h2 {
 	text-transform: uppercase;
 	font-size: 12px;
 	color: #666;
@@ -1748,7 +1754,8 @@
 	margin-top: 24px;
 }
 
-.media-modal .imgedit-group-top h3 a {
+.media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
+.media-modal .imgedit-group-top h2 a {
 	text-decoration: none;
 	color: #666;
 }
@@ -1878,10 +1885,12 @@
 	left: 0;
 }
 
-.image-details .column-settings h3 {
+.image-details .column-settings h3, /* Back-compat for pre-4.4 */
+.image-details .column-settings h2 {
 	margin: 20px;
 	padding-top: 20px;
 	border-top: 1px solid #ddd;
+	color: #23282d;
 }
 
 .image-details .column-image {
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index c195d7419f..d57b3991a4 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -171,7 +171,7 @@ function wp_print_media_templates() {
 
 	<script type="text/html" id="tmpl-uploader-window">
 		<div class="uploader-window-content">
-			<h3><?php _e( 'Drop files to upload' ); ?></h3>
+			<h1><?php _e( 'Drop files to upload' ); ?></h1>
 		</div>
 	</script>
 
@@ -188,19 +188,19 @@ function wp_print_media_templates() {
 		<# } #>
 		<div class="uploader-inline-content {{ messageClass }}">
 		<# if ( data.message ) { #>
-			<h3 class="upload-message">{{ data.message }}</h3>
+			<h2 class="upload-message">{{ data.message }}</h2>
 		<# } #>
-		<?php if ( ! _device_can_upload() ) : ?>
-			<h3 class="upload-instructions"><?php printf( __('The web browser on your device cannot be used to upload files. You may be able to use the <a href="%s">native app for your device</a> instead.'), 'https://apps.wordpress.org/' ); ?></h3>
-		<?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
-			<h3 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h3>
+
+			<h2 class="upload-instructions"><?php printf( __( 'The web browser on your device cannot be used to upload files. You may be able to use the <a href="%s">native app for your device</a> instead.' ), 'https://apps.wordpress.org/' ); ?></h2>
+		<?php if ( is_multisite() && ! is_upload_space_available() ) : ?>
+			<h2 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h2>
 			<?php
 			/** This action is documented in wp-admin/includes/media.php */
 			do_action( 'upload_ui_over_quota' ); ?>
 
 		<?php else : ?>
 			<div class="upload-ui">
-				<h3 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h3>
+				<h2 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h2>
 				<p class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
 				<button type="button" class="browser button button-hero"><?php _e( 'Select Files' ); ?></button>
 			</div>
@@ -257,7 +257,7 @@ function wp_print_media_templates() {
 	</script>
 
 	<script type="text/html" id="tmpl-uploader-status">
-		<h3><?php _e( 'Uploading' ); ?></h3>
+		<h2><?php _e( 'Uploading' ); ?></h2>
 		<button type="button" class="button-link upload-dismiss-errors"><span class="screen-reader-text"><?php _e( 'Dismiss Errors' ); ?></span></button>
 
 		<div class="media-progress-bar"><div></div></div>
@@ -490,14 +490,13 @@ function wp_print_media_templates() {
 	</script>
 
 	<script type="text/html" id="tmpl-attachment-details">
-		<h3>
-			<?php _e('Attachment Details'); ?>
-
+		<h2>
+			<?php _e( 'Attachment Details' ); ?>
 			<span class="settings-save-status">
 				<span class="spinner"></span>
 				<span class="saved"><?php esc_html_e('Saved.'); ?></span>
 			</span>
-		</h3>
+		</h2>
 		<div class="attachment-info">
 			<div class="thumbnail thumbnail-{{ data.type }}">
 				<# if ( data.uploading ) { #>
@@ -599,7 +598,7 @@ function wp_print_media_templates() {
 	</script>
 
 	<script type="text/html" id="tmpl-attachment-display-settings">
-		<h3><?php _e('Attachment Display Settings'); ?></h3>
+		<h2><?php _e( 'Attachment Display Settings' ); ?></h2>
 
 		<# if ( 'image' === data.type ) { #>
 			<label class="setting">
@@ -706,7 +705,7 @@ function wp_print_media_templates() {
 	</script>
 
 	<script type="text/html" id="tmpl-gallery-settings">
-		<h3><?php _e('Gallery Settings'); ?></h3>
+		<h2><?php _e( 'Gallery Settings' ); ?></h2>
 
 		<label class="setting">
 			<span><?php _e('Link To'); ?></span>
@@ -776,7 +775,7 @@ function wp_print_media_templates() {
 	</script>
 
 	<script type="text/html" id="tmpl-playlist-settings">
-		<h3><?php _e( 'Playlist Settings' ); ?></h3>
+		<h2><?php _e( 'Playlist Settings' ); ?></h2>
 
 		<# var emptyModel = _.isEmpty( data.model ),
 			isVideo = 'video' === data.controller.get('library').props.get('type'); #>
@@ -903,7 +902,7 @@ function wp_print_media_templates() {
 						<input type="text" data-setting="alt" value="{{ data.model.alt }}" />
 					</label>
 
-					<h3><?php _e( 'Display Settings' ); ?></h3>
+					<h2><?php _e( 'Display Settings' ); ?></h2>
 					<div class="setting align">
 						<span><?php _e('Align'); ?></span>
 						<div class="button-group button-large" data-setting="align">
@@ -985,7 +984,7 @@ function wp_print_media_templates() {
 						<input type="text" class="link-to-custom" data-setting="linkUrl" />
 					</div>
 					<div class="advanced-section">
-						<h3><button type="button" class="button-link advanced-toggle"><?php _e( 'Advanced Options' ); ?></button></h3>
+						<h2><button type="button" class="button-link advanced-toggle"><?php _e( 'Advanced Options' ); ?></button></h2>
 						<div class="advanced-settings hidden">
 							<div class="advanced-image">
 								<label class="setting title-text">