Accessibility fixes for #276

* Remove role main from main elements

* Follow _s lead, change widget titles to h2

* Extend h3 class on widget titles by default, but use !optional, since the class is currently blank

* Remove the cancel reply link from the leave reply heading

* Add hidden h2 to mark the comment section, update child headings accordingly

* Compiled styles

* Add script to fix main nav submenus

* Add base styles for the caret-down icon

* Compiled files

* Fix contrast on comment meta text

* Darken $color-blue ever so slightly for contrast

* Compiled styles

404.php

@@ -11,7 +11,7 @@
 
 	<div class="wrap">
 		<div class="primary content-area">
-			<main id="main" class="site-main" role="main">
+			<main id="main" class="site-main">
 
 				<section class="error-404 not-found">
 					<header class="page-header">

archive.php

@@ -11,7 +11,7 @@
 
 	<div class="wrap">
 		<div class="primary content-area">
-			<main id="main" class="site-main" role="main">
+			<main id="main" class="site-main">
 
 			<?php
 			if ( have_posts() ) : ?>

assets/sass/modules/_comments.scss

@@ -137,7 +137,7 @@
 		margin-top: rem(5);
 
 		a {
-			color: $color-silver-chalice;
+			color: $color-tundora;
 			text-decoration: none;
 		} // a
 

assets/sass/modules/_icons.scss

@@ -133,3 +133,17 @@
 		transform: rotate(-225deg);
 	}
 } // .down-arrow
+
+
+//-----------------------------------------
+// Caret down
+//-----------------------------------------
+.caret-down {
+	@include size(rem(10) rem(20));
+
+	background: url('assets/images/svg-icons/caret-down.svg') no-repeat transparent;
+	background-size: 100%;
+	margin-left: rem(5);
+	display: inline-block;
+	vertical-align: middle;
+} // .angle-down

assets/sass/utilities/variables/_colors.scss

@@ -14,7 +14,7 @@
 // COLORS
 
 // Primary palette
-$color-blue: #21759b;
+$color-blue: #20739A;
 $color-light-yellow: #fff9c0;
 $color-black: #000;
 $color-white: #fff;
@@ -23,6 +23,7 @@ $color-white: #fff;
 $color-gray: #808080;
 $color-cod-gray: #111;
 $color-mineshaft: #333;
+$color-tundora: #454545;
 $color-dove-gray: #666;
 $color-gray-alt: #929292;
 $color-silver-chalice: #aaa;

assets/sass/widgets/_widgets.scss

@@ -9,6 +9,11 @@
 	select {
 		max-width: 100%;
 	} // select
+
+	// Extend the h3 style for the widget titles.
+	.widget-title {
+		@extend .h3 !optional;
+	} // .widget-title
 } // .widget
 
 // Search widget.

assets/scripts/concat/navigation-primary.js

@@ -0,0 +1,51 @@
+/**
+ * File: navigation-primary.js
+ *
+ * Helpers for the primary navigation.
+ */
+window.wdsPrimaryNavigation = {};
+( function( window, $, app ) {
+
+	// Constructor.
+	app.init = function() {
+		app.cache();
+
+		if ( app.meetsRequirements() ) {
+			app.bindEvents();
+		}
+	};
+
+	// Cache all the things.
+	app.cache = function() {
+		app.$c = {
+			window: $( window ),
+			subMenuContainer: $( '.main-navigation .sub-menu' ),
+			subMenuParentItem: $( '.main-navigation li.menu-item-has-children' )
+		};
+	};
+
+	// Combine all events.
+	app.bindEvents = function() {
+		app.$c.window.on( 'load', app.addDownArrow );
+		app.$c.subMenuParentItem.find( 'a' ).on( 'focusin focusout', app.toggleFocus );
+	};
+
+	// Do we meet the requirements?
+	app.meetsRequirements = function() {
+		return app.$c.subMenuContainer.length;
+	};
+
+	// Add the down arrow to submenu parents.
+	app.addDownArrow = function() {
+		app.$c.subMenuParentItem.find( '> a' ).append( '<span class="caret-down" aria-hidden="true"></span>' );
+	};
+
+	// Toggle the focus class on the link parent.
+	app.toggleFocus = function() {
+		$( this ).parents( 'li.menu-item-has-children' ).toggleClass( 'focus' );
+	};
+
+	// Engage!
+	$( app.init );
+
+})( window, jQuery, window.wdsPrimaryNavigation );

buddypress.php

@@ -14,7 +14,7 @@
 
 	<div class="wrap">
 		<div class="primary content-area">
-			<main id="main" class="site-main" role="main">
+			<main id="main" class="site-main">
 
 				<?php while ( have_posts() ) :
 					the_post(); ?>

comments.php

@@ -21,11 +21,12 @@
 ?>
 
 <div id="comments" class="comments-area">
+	<h2 class="screen-reader-text"><?php esc_html_e( 'Comment section', '_s' ); ?></h2>
 
 	<?php
 	// You can start editing here -- including this comment!
 	if ( have_comments() ) : ?>
-		<h2 class="comments-title">
+		<h3 class="comments-title">
 			<?php
 				printf( // WPCS: XSS OK.
 					/* translators: the number of comments */
@@ -34,11 +35,11 @@
 					'<span>' . get_the_title() . '</span>'
 				);
 			?>
-		</h2>
+		</h3>
 
 		<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // Are there comments to navigate through? ?>
 		<nav id="comment-nav-above" class="navigation comment-navigation" role="navigation">
-			<h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', '_s' ); ?></h2>
+			<h3 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', '_s' ); ?></h3>
 			<div class="nav-links">
 
 				<div class="nav-previous"><?php previous_comments_link( esc_html__( 'Older Comments', '_s' ) ); ?></div>

functions.php

@@ -117,8 +117,8 @@ function _s_widgets_init() {
 			'description'   => /* translators: the sidebar name */ sprintf( esc_html__( 'Widget area for %s', '_s' ), $sidebar_name ),
 			'before_widget' => '<aside class="widget %2$s">',
 			'after_widget'  => '</aside>',
-			'before_title'  => '<h3 class="widget-title">',
-			'after_title'   => '</h3>',
+			'before_title'  => '<h2 class="widget-title">',
+			'after_title'   => '</h2>',
 		) );
 	}
 

inc/hooks.php

@@ -105,3 +105,8 @@ function _s_custom_mime_types( $mimes ) {
 	return $mimes;
 }
 add_filter( 'upload_mimes', '_s_custom_mime_types' );
+
+/**
+ * Disable the "Cancel reply" link. It doesn't seem to work anyway, and it only makes the "Leave Reply" heading confusing.
+ */
+add_filter( 'cancel_comment_reply_link', '__return_false' );

index.php

@@ -16,7 +16,7 @@
 
 	<div class="wrap">
 		<div class="primary content-area">
-			<main id="main" class="site-main" role="main">
+			<main id="main" class="site-main">
 
 			<?php
 			if ( have_posts() ) :

page.php

@@ -16,7 +16,7 @@
 
 	<div class="wrap">
 		<div class="primary content-area">
-			<main id="main" class="site-main" role="main">
+			<main id="main" class="site-main">
 
 				<?php
 				while ( have_posts() ) : the_post();

search.php

@@ -11,7 +11,7 @@
 
 	<div class="wrap">
 		<section class="primary content-area">
-			<main id="main" class="site-main" role="main">
+			<main id="main" class="site-main">
 
 			<?php
 			if ( have_posts() ) : ?>

single.php

@@ -11,7 +11,7 @@
 
 	<div class="wrap">
 		<div class="primary content-area">
-			<main id="main" class="site-main" role="main">
+			<main id="main" class="site-main">
 
 			<?php
 			while ( have_posts() ) : the_post();