fix: fix html validation errors and accessibility alerts in preparati…

…on for 2.5.0 release (#466)
inclusive-design · Mar 25, 2021 · 6dd78ce · 6dd78ce
1 parent bfeee38
commit 6dd78ce
Show file tree

Hide file tree

Showing 8 changed files with 10 additions and 75 deletions.
diff --git a/src/_includes/components/filter.njk b/src/_includes/components/filter.njk
@@ -1,6 +1,6 @@
 <div class="filter">
 	<div class="filter-header">
-		<h2 class="h3">{{ filterTitle}}</h2>
+		<h2 class="h3">{{ filterTitle }}</h2>
 		<button type="button" class="filter-expand-button" aria-expanded="false" aria-label="expand">
 			<svg class="arrowdown" aria-label="hidden"><use xlink:href="#arrowdown" /></svg>
 			<svg class="arrowup" aria-label="hidden"><use xlink:href="#arrowup" /></svg>

diff --git a/src/_includes/components/footer-nav.njk b/src/_includes/components/footer-nav.njk
diff --git a/src/_includes/components/footer.njk b/src/_includes/components/footer.njk
@@ -1,10 +1,7 @@
 <footer>
 	<div class="footer-content">
-		<!-- TODO: Switched order of social-media component with footer-nav component for purpose of proper tab indexing order.
-		 This needs to be switched back once footer-nav component is properly implemented. -->
 		{% include 'components/social-media.njk' %}
 		{% include 'components/contact-info.njk' %}
-		{% include 'components/footer-nav.njk' %}
 		{% include 'components/funders.njk' %}
 	</div>
 	<p class="netlify-notice">Hosted with <a rel="external nofollower noopener" href="https://netlify.com">Netlify</a></p>

diff --git a/src/_includes/components/tile-item.njk b/src/_includes/components/tile-item.njk
@@ -14,9 +14,9 @@
 		</div>
 		<div class="tile-image">
 			{% if previewImageUrl %}
-				<img src="{{ previewImageUrl | safe }}" {% if previewImageAltText %}alt="{{ previewImageAltText}}"{% else %}role="presentation"{% endif %}>
+				<img src="{{ previewImageUrl | safe }}" {% if previewImageAltText %}alt="{{ previewImageAltText}}"{% else %}role="presentation" alt=""{% endif %}>
 			{% elif defaultPreviewImageUrl %}
-				<img src="{{ defaultPreviewImageUrl }}" role="presentation">
+				<img src="{{ defaultPreviewImageUrl }}" role="presentation" alt="">
 			{% else %}
 				<svg class="logo placeholder-img">
 					<use xlink:href="#placeholder" />

diff --git a/src/scss/components/_news-and-views.scss b/src/scss/components/_news-and-views.scss
@@ -170,15 +170,11 @@
 
 	.search-result {
 		color: $green-dark;
-		font-size: rem(24);
-		font-weight: $font-weight-bold;
 		margin-top: rem(-32);
 	}
 
-	.applied-tags-title,
-	.search-term-title {
+	.search-for-title {
 		color: $green-dark;
-		font-weight: $font-weight-bold;
 	}
 
 	.tags {

diff --git a/src/scss/layout/_footer.scss b/src/scss/layout/_footer.scss
@@ -113,10 +113,6 @@ footer {
 			}
 		}
 
-		.footer-nav {
-			display: none;
-		}
-
 		.social-media {
 			align-self: center;
 			padding-bottom: rem(32);
@@ -186,49 +182,6 @@ footer {
 			grid-template-columns: 3.8fr 1.2fr;
 			padding: rem(32) rem(48);
 
-			.footer-nav {
-				display: block;
-
-				a {
-					color: $green-light;
-					font-weight: $font-weight-semibold;
-					padding: rem(8) rem(10);
-				}
-
-				ul {
-					display: grid;
-					grid-template-columns: repeat(4, auto);
-
-					li {
-						margin-bottom: rem(36);
-						text-decoration: underline;
-					}
-
-					li:nth-child(1),
-					li:nth-child(2) {
-						grid-column: 1/2;
-					}
-
-					li:nth-child(3) {
-						grid-column: 2/3;
-					}
-
-					li:nth-child(4) {
-						grid-column: 3/4;
-					}
-
-					li:nth-child(5),
-					li:nth-child(6),
-					li:nth-child(7) {
-						grid-column: 4/5;
-					}
-
-					li:nth-last-child(-n+5):not(:last-child) {
-						margin-top: rem(-64);
-					}
-				}
-			}
-
 			.funders {
 				align-self: end;
 				grid-column: 2/3;

diff --git a/src/views.njk b/src/views.njk
@@ -99,17 +99,17 @@ pagination:
 			</div>
 		</form>
 
-		<p role="status" class="search-result" v-if="searchResult">{{ '{{ searchResult }}' }}</p>
+		<h3 role="status" class="search-result" v-if="searchResult">{{ '{{ searchResult }}' }}</h3>
 
 		<div class="applied-tags" v-if="selectedTags.length > 0">
-			<p class="applied-tags-title">Applied Tags:</p>
+			<h4 class="search-for-title">Applied Tags:</p>
 			<div class="tags">
 				<a v-for="tag in selectedTags" :href="'/tags/' + tag.slug + '/'">{{ '{{ tag.name }}' }}</a>
 			</div>
 		</div>
 
 		<div class="search-term-container" v-if="searchTerm">
-			<p class="search-term-title">Search Term:</p>
+			<h4 class="search-for-title">Search Term:</h4>
 			<p class="search-term">“{{ '{{ searchTerm }}' }}”</p>
 		</div>
 

diff --git a/src/workshop-comments.njk b/src/workshop-comments.njk
@@ -25,13 +25,13 @@ permalink: "initiatives/{{ workshopItem.id }}/"
 			</div>
 
 			<div class="form-field">
-				<span>*</span><label for="name"><h4>Name</h4></label><span class="required-name">Required</span>
+				<span>*</span><h4><label for="name">Name</label></h4><span class="required-name">Required</span>
 				<input id="name" type="text" name="name" placeholder="" aria-label="Enter your name">
 			</div>
 
 			<div class="form-field">
-				<span>*</span><label for="comment"><h4>Post a comment or question</h4></label><span class="required-comment">Required</span>
-				<textarea id="comment" type="text" name="comment" placeholder="" aria-label="Enter your comment"></textarea>
+				<span>*</span><h4><label for="comment">Post a comment or question</label></h4><span class="required-comment">Required</span>
+				<textarea id="comment" name="comment" placeholder="" aria-label="Enter your comment"></textarea>
 				<input type="hidden" name="workshopId" id="workshopId" value="{{ workshopItem.id }}">
 				<button id="post-comment" type="submit">Post a comment</button>
 			</div>