From 0065e38e9f77b81139257efe84d63374075bd13b Mon Sep 17 00:00:00 2001 From: krisztin Date: Wed, 15 May 2024 23:03:06 +0100 Subject: [PATCH 1/5] Refactor icon-search svg's a11y attributes To comply with WCAG 2.2 Success Criterion 1.1.1 Non-text Content, specifically decoration, as icon-search.js does not serve any functional purpose it needs to have the attribute aria-hidden="true" so it can be ignored by assistive technology and focusable="false" (for IE backwards compatibility). --- packages/ia-wayback-search/src/icon-search.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/ia-wayback-search/src/icon-search.js b/packages/ia-wayback-search/src/icon-search.js index 1219cb5fb..cf01f72a4 100644 --- a/packages/ia-wayback-search/src/icon-search.js +++ b/packages/ia-wayback-search/src/icon-search.js @@ -5,11 +5,10 @@ export default html` height="40" viewBox="0 0 40 40" width="40" + aria-hidden="true" + focusable="false" xmlns="http://www.w3.org/2000/svg" - aria-labelledby="searchTitleID searchDescID" > - Search icon - An illustration of a magnifying glass. `; From 4f6bbc9b8ebb1ae95d843b9111bbcc59c4a428e3 Mon Sep 17 00:00:00 2001 From: krisztin Date: Thu, 16 May 2024 20:03:13 +0100 Subject: [PATCH 2/5] Refactor logo/homepage link for a11y To comply with WCAG 2.2 Success Criterion 1.1.1 Non-text Content, specifically decoration the svg logo itself needs an aria-hidden="true" attribute (focusable=false is added for IE compatibility) so that it can be ignored by assistive technology as it adds no useful context. The only thing necessary is an aria-label on the anchor tag. --- packages/ia-wayback-search/src/ia-wayback-search.js | 1 + packages/ia-wayback-search/src/logo.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/ia-wayback-search/src/ia-wayback-search.js b/packages/ia-wayback-search/src/ia-wayback-search.js index 2287c690c..72c066885 100644 --- a/packages/ia-wayback-search/src/ia-wayback-search.js +++ b/packages/ia-wayback-search/src/ia-wayback-search.js @@ -63,6 +63,7 @@ class WaybackSearch extends LitElement { @click=${this.emitWaybackMachineLogoLinkClicked} data-event-click-tracking="TopNav|WaybackMachineLogoLink" href="https://web.archive.org" + aria-label="Wayback Machine homepage" >${logo}
diff --git a/packages/ia-wayback-search/src/logo.js b/packages/ia-wayback-search/src/logo.js index ef410f3d2..33b6ae471 100644 --- a/packages/ia-wayback-search/src/logo.js +++ b/packages/ia-wayback-search/src/logo.js @@ -1,5 +1,5 @@ import { html } from 'https://offshoot.prod.archive.org/lit.js'; export default html` - + `; From a116386d936946c5e2437d9d818be0d1406eb06d Mon Sep 17 00:00:00 2001 From: krisztin Date: Thu, 16 May 2024 20:11:39 +0100 Subject: [PATCH 3/5] Refactor search for accessibility There were a few accessibility issues with the search field: - Fieldset was used unnecessarily/improperly. - The search label was on display:none which would make it invisible for screen readers as well. --- .../src/ia-wayback-search.js | 7 ++-- .../src/styles/wayback-search.js | 38 ++++++------------- 2 files changed, 15 insertions(+), 30 deletions(-) diff --git a/packages/ia-wayback-search/src/ia-wayback-search.js b/packages/ia-wayback-search/src/ia-wayback-search.js index 72c066885..75c9c7ced 100644 --- a/packages/ia-wayback-search/src/ia-wayback-search.js +++ b/packages/ia-wayback-search/src/ia-wayback-search.js @@ -58,19 +58,18 @@ class WaybackSearch extends LitElement { > on the Internet.

-
+
${logo} -
- + ${searchIcon}
-
+
`; } diff --git a/packages/ia-wayback-search/src/styles/wayback-search.js b/packages/ia-wayback-search/src/styles/wayback-search.js index f0d647e13..8dd835562 100644 --- a/packages/ia-wayback-search/src/styles/wayback-search.js +++ b/packages/ia-wayback-search/src/styles/wayback-search.js @@ -20,21 +20,6 @@ export default css` color: var(--activeColor); } - fieldset { - padding: 0.7rem 2rem; - margin: 1.5rem 0; - box-sizing: border-box; - text-align: center; - border: none; - border-radius: 7px; - background-color: #fcf5e6; - box-shadow: 3px 3px 0 0 #c3ad97; - } - - label { - display: none; - } - img { width: 100%; max-width: 215px; @@ -56,10 +41,15 @@ export default css` background: #eee; } - input:focus { - border-color: #66afe9; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); - outline: none; + .search-background { + padding: 0.7rem 2rem; + margin: 1.5rem 0; + box-sizing: border-box; + text-align: center; + border: none; + border-radius: 7px; + background-color: #fcf5e6; + box-shadow: 3px 3px 0 0 #c3ad97; } .search-field { @@ -79,10 +69,6 @@ export default css` fill: var(--iconFill); } - input:focus + svg { - display: none; - } - @media (min-width: 890px) { form { margin: 0 auto; @@ -98,19 +84,19 @@ export default css` margin: 0; } - fieldset { + .search-background { margin: 0 auto; font-size: 0; } - fieldset a, + .search-background a, .search-field { display: inline-block; width: 50%; vertical-align: middle; } - fieldset a { + .search-background a { text-align: center; } From f21b6353e133e8fab8ab5bf6c9e07faca54f69ac Mon Sep 17 00:00:00 2001 From: krisztin Date: Thu, 16 May 2024 20:45:29 +0100 Subject: [PATCH 4/5] Refactor search input contrast 1. Text colour was #858585 on #eee background which has a 3.18:1 contrast ratio failing WCAG AA for normal text. Sufficient contrast needed to be achieved. New contrast ratio is 21:1 passing both AA and AAA requirements. 2. Contrast between the input's background (used to be #eee, now #fff) and the parent elements background (#FCF5E6) is insufficient (only 1.08:1), making the input a very difficult target for clicking for the visually impaired. --- packages/ia-wayback-search/src/styles/wayback-search.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/ia-wayback-search/src/styles/wayback-search.js b/packages/ia-wayback-search/src/styles/wayback-search.js index 8dd835562..f44a1067e 100644 --- a/packages/ia-wayback-search/src/styles/wayback-search.js +++ b/packages/ia-wayback-search/src/styles/wayback-search.js @@ -34,11 +34,11 @@ export default css` height: 3rem; padding: 0.5rem 1rem 0.5rem 2.5rem; font: normal 1.2rem/1.5 var(--themeFontFamily); - color: #858585; + color: #000; box-sizing: border-box; - border: 1px solid var(--grey80); + border: 1px solid #000; border-radius: 2rem; - background: #eee; + background: #fff; } .search-background { From fe2494c30605e536dbe7736e17fc1d0995d7d62b Mon Sep 17 00:00:00 2001 From: krisztin Date: Thu, 16 May 2024 20:48:18 +0100 Subject: [PATCH 5/5] Make border-radius values consistent By matching the border-radius of the input and parent element we can achieve a more visually harmonious design. --- packages/ia-wayback-search/src/styles/wayback-search.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ia-wayback-search/src/styles/wayback-search.js b/packages/ia-wayback-search/src/styles/wayback-search.js index f44a1067e..32ad15acd 100644 --- a/packages/ia-wayback-search/src/styles/wayback-search.js +++ b/packages/ia-wayback-search/src/styles/wayback-search.js @@ -37,7 +37,7 @@ export default css` color: #000; box-sizing: border-box; border: 1px solid #000; - border-radius: 2rem; + border-radius: 7px; background: #fff; }