From d8602198b3cbbbd279a05b6498845ec4cefe042b Mon Sep 17 00:00:00 2001 From: Barry McGee Date: Mon, 19 Aug 2019 21:06:55 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8Enhance=20accessibility=20(#91)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add lang=“en” attribute to HTML element Adding this will improve the interpretation of your template by users in different locales. * Add doctype to top of index.html * Add alt attribute to product line items in summary * A web page should one have one banner landmark The role="banner" ARIA landmark should only appear once on an element that is unique to the HTML document even though the HMTL5 specification allows multiple instances of an equivalent header landmark value. It is appropriate in most web designs to have only one banner landmark whether it is specified using ARIA or HTML5. https://dequeuniversity.com/rules/axe/3.3/landmark-no-duplicate-banner * Page must have one main landmark * Mark up sidebar as an aside https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside --- public/index.html | 16 +++++++++------- public/javascripts/store.js | 2 +- public/stylesheets/store.css | 18 +++++++++--------- 3 files changed, 19 insertions(+), 17 deletions(-) diff --git a/public/index.html b/public/index.html index 6b423b5c..f124d787 100644 --- a/public/index.html +++ b/public/index.html @@ -1,4 +1,6 @@ + + Stripe Payments Demo @@ -14,8 +16,8 @@ -
-
+
+
Stripe Payments Demo View on GitHub
@@ -203,11 +205,11 @@

Oops, payment failed.

- -
-
+ +
+
@@ -243,7 +245,7 @@

Order Summary

- + diff --git a/public/javascripts/store.js b/public/javascripts/store.js index 6ce60c76..6f6f6a78 100644 --- a/public/javascripts/store.js +++ b/public/javascripts/store.js @@ -174,7 +174,7 @@ class Store { let lineItem = document.createElement('div'); lineItem.classList.add('line-item'); lineItem.innerHTML = ` - + ${product.name}

${product.name}

${Object.values(sku.attributes).join(' ')}

diff --git a/public/stylesheets/store.css b/public/stylesheets/store.css index e3264b89..dc522252 100644 --- a/public/stylesheets/store.css +++ b/public/stylesheets/store.css @@ -39,7 +39,7 @@ body { /* Header */ -header { +.header { display: flex; flex-direction: row; justify-content: space-between; @@ -49,8 +49,8 @@ header { border-bottom: 1px solid #f3f3ff; } -header a.shop, -header a.github { +.header a.shop, +.header a.github { margin: 30px; font-size: 13px; font-weight: 500; @@ -60,12 +60,12 @@ header a.github { text-decoration: none; } -header a.github { +.header a.github { padding-left: 20px; background: url(/images/github.svg) left center no-repeat; } -header a:hover { +.header a:hover { text-decoration: underline; } @@ -558,7 +558,7 @@ button:active { right: 0; } -#summary header { +#summary .header { background: #fff; } @@ -825,12 +825,12 @@ button:active { } @media only screen and (max-width: 500px) { - header { + .header { height: 60px; background-size: 40px 40px; } - header a.shop, - header a.github { + .header a.shop, + .header a.github { display: none; } #payment-request {