diff --git a/packages/ia-wayback-search/src/ia-wayback-search.js b/packages/ia-wayback-search/src/ia-wayback-search.js index 2287c690c..75c9c7ced 100644 --- a/packages/ia-wayback-search/src/ia-wayback-search.js +++ b/packages/ia-wayback-search/src/ia-wayback-search.js @@ -58,18 +58,18 @@ class WaybackSearch extends LitElement { > on the Internet.

-
+
${logo} -
- + ${searchIcon}
-
+ `; } 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. `; 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` - + `; diff --git a/packages/ia-wayback-search/src/styles/wayback-search.js b/packages/ia-wayback-search/src/styles/wayback-search.js index f0d647e13..32ad15acd 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; @@ -49,17 +34,22 @@ 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-radius: 2rem; - background: #eee; + border: 1px solid #000; + border-radius: 7px; + background: #fff; } - 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; }