fix(frontend): focus search input on initial load (#472)

* fix(frontend): update search input * fix(frontend): remove placeholder fix #462 * fix: tests
SocialGouv · Jan 29, 2019 · d001b4e · d001b4e
1 parent 2cc50b9
commit d001b4e
Show file tree

Hide file tree

Showing 11 changed files with 369 additions and 306 deletions.
diff --git a/packages/code-du-travail-css/docs/css/components/_buttons.css b/packages/code-du-travail-css/docs/css/components/_buttons.css
@@ -31,7 +31,7 @@
 
   /* Specific to <a> elements. */
   text-decoration: none;
-
+  transition: background 250ms ease;
   &:active {
     position: relative;
     top: 1px;
@@ -46,8 +46,13 @@
   }
 
   &:focus {
+    outline: none;
+  }
+  &:focus:not(:focus-visible) {
+    border: 1px solid var(--color-focus);
+  }
+  &:focus:not(:-moz-focusring) {
     border: 1px solid var(--color-focus);
-    box-shadow: 0 0 2px 2px var(--color-focus-shadow);
   }
 
   &.btn__primary {

diff --git a/packages/code-du-travail-css/docs/css/components/_search.css b/packages/code-du-travail-css/docs/css/components/_search.css
@@ -10,30 +10,26 @@
   height: 5rem;
   & button {
     margin-left: 5px;
+    width: 4rem;
   }
 }
 
 .search__fields {
   flex: 1 1 auto;
   display: flex;
-  border: 1px solid var(--color-element-border);
-  border-radius: var(--border-radius-base);
-  &:focus {
-    border: 1px solid var(--color-focus);
-    box-shadow: 0 0 2px 2px var(--color-focus-shadow);
-  }
 }
 .search__facets {
-  flex: 1 1 10%;
+  position: absolute;
   display: flex;
   align-items: center;
-  margin: 0.8rem;
+  margin: 0.575rem;
   border: none;
-  max-width: 200px;
+  max-width: 10rem;
   border-radius: var(--border-radius-base);
   background-color: var(--color-lighter-grey);
 }
 .facet-icon {
+  position: absolute;
   width: 1.25rem;
   height: 1.25rem;
   margin: 0 calc(var(--spacing-small) / 2);
@@ -43,51 +39,35 @@
   font-size: var(--font-size-small);
   border: 1px solid transparent;
   background-color: transparent;
-  background-position: top 0.75rem right 0.75em;
+  background-position: top 1rem right 0.75em;
   width: auto;
-  padding: 0.2em 2em 0.2em 0.2em;
-  flex: 1 1 auto;
+  padding: 0.6em 2.1em 0.6em 2em;
   font-style: italic;
-  &:focus {
-    border: none;
-    box-shadow: none;
-  }
-  &:-moz-focusring {
-    border: 1px solid var(--color-focus);
-    box-shadow: 0 0 2px 2px var(--color-focus-shadow);
-  }
-  &:focus-visible {
-    border: 1px solid var(--color-focus);
-    box-shadow: 0 0 2px 2px var(--color-focus-shadow);
-  }
-  &:focus:not(:focus-visible) {
-    outline: none;
-    box-shadow: 0 0 2px 2px var(--color-focus-shadow);
-  }
 }
 
-input[type="search"].search__input {
-  flex: 1 0 90%;
+.search__input[type="search"] {
   appearance: none;
-  border: none;
+  border: 1px solid var(--color-element-border);
+  border-radius: var(--border-radius-base);
   font-size: inherit;
   font-family: inherit;
   line-height: inherit;
   color: inherit;
-
   background: var(--color-white);
 
   height: 100%;
   margin: 0;
   max-width: 100%;
   width: 100%;
   padding: 0;
-  padding-left: var(--spacing-small);
-  line-height: 3.625rem;
-  &:focus {
-    border: none;
-    box-shadow: 0 0 2px 2px var(--color-focus-shadow);
-  }
+  padding-right: 0.5rem;
+  padding-left: 11.5rem;
+  line-height: calc(3.625rem - 1px);
+  transition: border 250ms ease;
+}
+.search__input[type="search"]:focus {
+  outline: none;
+  border-color: var(--color-blue-light);
 }
 
 .search__loading {

diff --git a/packages/code-du-travail-css/docs/css/elements/_forms.css b/packages/code-du-travail-css/docs/css/elements/_forms.css
@@ -125,21 +125,15 @@ select {
   padding-right: 45px;
   border-radius: 3px;
   width: auto;
-}
-
-select:focus {
-  border-color: var(--color-blue);
-  transition: border-color 0.2s ease-out;
-  box-shadow: 0 0 0.15em 0.15em var(--color-focus-shadow);
+  transition: border-color 250ms ease;
 }
 
 select:disabled {
   background-color: var(--color-dark-background);
 }
 
-select:focus:not(:focus-visible) {
-  outline: none;
-}
-select:focus:not(:-moz-focusring) {
+select:focus {
   outline: none;
+  border-color: var(--color-blue-light);
+  box-shadow: 0 0 0.15rem 0.15rem var(--color-focus-shadow);
 }
diff --git a/packages/code-du-travail-css/docs/css/global/_conf.css b/packages/code-du-travail-css/docs/css/global/_conf.css
@@ -139,8 +139,8 @@ https://fontlibrary.org/fr/font/source-sans-pro
 --------------------------------------------------------------------------- */
 
 :focus {
-  border: 1px solid var(--color-focus);
-  box-shadow: 0 0 2px 2px var(--color-focus-shadow);
+  outline: 1px solid var(--color-outline);
+  box-shadow: 0 0 0.15rem 0.15rem var(--color-focus-shadow);
 }
 
 /* WebKit gets its native focus styles. */

diff --git a/packages/code-du-travail-frontend/pages/_document.js b/packages/code-du-travail-frontend/pages/_document.js
@@ -25,7 +25,6 @@ export default class MyDocument extends Document {
           />
           <link rel="shortcut icon" href="/static/favicon.ico" />
           {this.props.styleTags}
-          <link rel="shortcut icon" href="/static/favicon.ico" />
           <link
             rel="stylesheet"
             type="text/css"