Issue #2983568 by kjay, smaz, John Cook, andrewmacpherson, alexpott, markconroy, emma.maria, Eli-T, mairi, jogordon: Audit and improve focus styles across the Umami theme for logged out users

Author: alexpott

core/profiles/demo_umami/themes/umami/css/base.css

@@ -13,16 +13,21 @@ html {
   margin-top: 0; /* This allows us to ensure that items side-by-side line up nicely. */
 }
 
+*:focus {
+  outline-offset: 2px; /* Not supported in IE11 but greatly improves outline visibility in newer browsers. */
+  outline-color: #00836d;
+  outline-style: dotted;
+  outline-width: 1px;
+}
+
 a {
   color: #00836d;
   text-decoration: underline;
 }
 a:hover,
 a:focus {
   background-color: #e6eee0;
-  color: #444;
-  text-decoration: none;
-  outline-offset: 1px;
+  color: #cc2a00;
 }
 
 body {
@@ -55,20 +60,27 @@ blockquote a:focus {
   background-color: #fdfcf9;
 }
 
-.button {
+button,
+.button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  display: inline-block;
+  padding: 0.7rem 1.3rem;
+  border: 2px solid #00836d;
+  border-radius: 3px;
   background-color: #00836d;
-  border: 3px solid #00836d;
-  border-radius: 4px;
   color: #fff;
   cursor: pointer;
-  display: inline-block;
-  padding: 0.4em 1.5em;
   text-align: center;
   text-decoration: none;
   font-family: 'Scope One', Georgia, serif;
   font-size: 1.2rem;
   font-weight: 400;
   transition: background-color 0.5s ease;
+  min-width: inherit;
+  max-width: inherit;
+  margin: 0;
 }
 button:hover,
 button:active,
@@ -77,7 +89,6 @@ button:focus,
 .button:active,
 .button:focus {
   background-color: #e6eee0;
-  border: 3px solid #00836d;
   color: #000;
   text-decoration: none;
   transition: background-color 0.5s ease;
@@ -196,8 +207,11 @@ input {
   padding: 0.8rem 0.4rem;
 }
 input:focus {
-  border: 3px solid #00836d;
-  margin-bottom: 2px;
+  border: 2px solid #00836d;
+}
+input[type='checkbox'] {
+  min-width: inherit;
+  max-width: none;
 }
 
 textarea {
@@ -206,8 +220,7 @@ textarea {
   padding: 0.8rem 0.4rem;
 }
 textarea:focus {
-  border: 3px solid #00836d;
-  margin-bottom: 2px;
+  border: 2px solid #00836d;
 }
 
 label {

core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css

@@ -24,9 +24,9 @@
 
 .block-type-banner-block .field--name-field-content-link a {
   display: inline-block;
-  padding: 0.5em 1.5em 0.4em;
-  border: 0;
-  border-radius: 4px;
+  padding: 0.7em 1.3em;
+  border: 2px solid #d93760;
+  border-radius: 3px;
   background-color: #d93760;
   color: #fff;
   cursor: pointer;
@@ -40,10 +40,11 @@
 
 .block-type-banner-block .field--name-field-content-link a:focus,
 .block-type-banner-block .field--name-field-content-link a:hover {
-  background-color: #00836d;
-  color: #fff;
-  box-shadow: 0 0 0 2px currentColor inset;
-  outline: none;
+  background-color: #fcece7;
+  color: #000;
+  border-color: #d93760;
+  outline-offset: 2px;
+  outline-color: #fff;
 }
 
 /* 768px */

core/profiles/demo_umami/themes/umami/css/components/blocks/branding/branding.css

@@ -20,7 +20,8 @@
   max-width: 205px;
   background-color: inherit;
 }
-.site-logo:hover {
+.site-logo:hover,
+.site-logo:focus {
   background-color: inherit;
 }
 

core/profiles/demo_umami/themes/umami/css/components/blocks/footer-promo/footer-promo.css

@@ -16,30 +16,6 @@
   margin-bottom: 1.28rem;
 }
 
-.block-type-footer-promo-block .footer-promo-content a {
-  background-color: inherit;
-  color: #fff;
-  font-weight: 700;
-}
-
-.block-type-footer-promo-block .footer-promo-content a:active,
-.block-type-footer-promo-block .footer-promo-content a:focus,
-.block-type-footer-promo-block .footer-promo-content a:hover {
-  background-color: transparent;
-}
-
-.block-type-footer-promo-block .footer-promo-content a:after {
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-  content: '';
-  background: url('../../../../images/svg/pointer--white.svg') no-repeat center center;
-  vertical-align: middle;
-}
-[dir=rtl] .block-type-footer-promo-block .footer-promo-content a:after {
-  transform: rotate(180deg);
-}
-
 @media screen and (min-width: 60rem) {
   .block-type-footer-promo-block {
     flex-basis: 60%;

core/profiles/demo_umami/themes/umami/css/components/blocks/recipe-collections/recipe-collections.css

@@ -34,9 +34,10 @@
   color: #fff;
   font-weight: bold;
 }
+.block-views-blockrecipe-collections-block .views-row a:active,
 .block-views-blockrecipe-collections-block .views-row a:focus,
 .block-views-blockrecipe-collections-block .views-row a:hover {
   text-decoration: underline;
   background: transparent;
+  outline-color: #fff;
 }
-

core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css

@@ -48,7 +48,6 @@
 }
 .search-link:focus,
 .search-link:hover {
-  outline: 3px solid #00836d;
   background-color: #fff;
 }
 .search-link svg {
@@ -61,37 +60,65 @@
 .form-type-search {
   margin-top: 0;
   margin-bottom: 0;
+  border: 1px solid #dbdbdb;
+  border-top-left-radius: 3px; /* LTR */
+  border-bottom-right-radius: 3px; /* LTR */
+}
+[dir=rtl] .form-type-search {
+  border-top-left-radius: 0;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 0;
+}
+.search-form .form-type-search {
+  border: none;
 }
 
 .form-search {
-  width: 20em;
-  max-width: calc(100vw - 6.25em);
+  width: auto;
   height: auto;
-  margin: 0 -2px 0 0; /* LTR */
+  margin: 0 80px 0 0; /* LTR */
   padding: 7px 8px 7px 32px;
   color: #464646;
-  border: 1px solid #dbdbdb; /* LTR */
-  border-right: none; /* LTR */
-  border-radius: 3px;
+  border: 2px solid #fff;
   background: url(../../../../images/svg/search.svg) no-repeat 0.5em center #fff;
   font-size: 0.875rem;
   line-height: normal;
 }
 [dir=rtl] .form-search {
+  margin: 0 0 0 80px;
+}
+
+@media screen and (min-width: 48em) {
+  .form-search {
+    width: 14em;
+  }
+}
+.search-form .form-search {
+  border: 1px solid #dbdbdb;
+  border-radius: 3px;
+  width: 20em;
+  margin: 0 -2px 0 0;  /* LTR */
+  max-width: calc(100vw - 6.25em);
+}
+[dir=rtl] .search-form .form-search {
   margin: 0 0 0 -2px;
-  border-left: none;
-  border-right: 1px solid #dbdbdb;
 }
 
 .form-search:focus {
-  margin: 0 0 -2px -2px; /* LTR */
-  padding: 5px 8px 5px 32px;
-  outline: none;
+  border: 2px solid #00836d;
+  border-top-left-radius: 2px;  /* LTR */
+  border-bottom-left-radius: 2px; /* LTR */
 }
 [dir=rtl] .form-search:focus {
-  margin: 0 -2px -2px 0;
-  background-position: 0.35em;
-  border: 3px solid #00836d;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.search-form .form-search:focus {
+  border: 1px solid #00836d;
 }
 
 .form-search::placeholder {
@@ -104,38 +131,63 @@
 /* Search submit */
 .search-block-form .form-actions {
   position: relative;
-  z-index: 1;
   margin-top: 0;
   margin-bottom: 0;
+  border-top: 1px solid #dbdbdb;
+  border-bottom: 1px solid #dbdbdb;
+  border-right: 1px solid #dbdbdb; /* LTR */
+  border-top-right-radius: 3px; /* LTR */
+  border-bottom-right-radius: 3px; /* LTR */
 }
-.search-block-form .form-submit,
-.search-form .form-submit {
-  /* Take off the border radius on the left side as it bumps into the search field */
-  border-top-left-radius: 0; /* LTR */
-  border-bottom-left-radius: 0; /* LTR */
-}
-[dir=rtl] .search-block-form .form-submit,
-[dir=rtl] .search-form .form-submit {
-  /* Take off the border radius on the left side as it bumps into the search field */
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
+[dir=rtl] .search-block-form .form-actions {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+  border-right: none;
+  border-left: 1px solid #dbdbdb;
+}
+.search-block-form .form-submit,
+.search-form .form-submit {
+  padding: 0.6em 1.25em 0.4em;
+  margin: 0;
+  border: 2px solid #fff;
+  font-size: 0.875rem;
+  background-color: #fff;
+  color: #000;
+  transition: background-color 0.5s ease;
+  transition: border 0.5s ease;
+}
+
+@media screen and (min-width: 48em) {
+  .search-block-form .form-submit,
+  .search-form .form-submit {
+    border-top-left-radius: 0; /* LTR */
+    border-bottom-left-radius: 0; /* LTR */
+  }
+  [dir=rtl] .search-block-form .form-submit,
+  [dir=rtl] .search-form .form-submit {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+}
+.search-form .form-submit {
+  border: 1px solid #dbdbdb;
 }
 
 .search-block-form .form-submit:focus,
 .search-block-form .form-submit:hover,
 .search-form .form-submit:focus,
 .search-form .form-submit:hover {
   margin: 0;
-  border-top-left-radius: 4px; /* LTR */
-  border-bottom-left-radius: 4px; /* LTR */
-}
-/* Apply border radius to all corners to override LTR and RTL (normal state) changes. */
-[dir=rtl] .search-block-form .form-submit:focus,
-[dir=rtl] .search-block-form .form-submit:hover,
-[dir=rtl] .search-form .form-submit:focus,
-[dir=rtl] .search-form .form-submit:hover {
-  margin: 0;
-  border-radius: 4px;
+  background-color: #e6eee0;
+  border: 2px solid #00836d;
+  outline-offset: 2px;
+}
+
+.search-form .form-submit:focus,
+.search-form .form-submit:hover {
+  border: 1px solid #00836d;
 }

core/profiles/demo_umami/themes/umami/css/components/forms/buttons.css

@@ -5,23 +5,9 @@
 .form-actions {
   display: inline-flex;
 }
-
 .form-actions .button {
   margin-left: 1em;
 }
 .form-actions .button:first-child {
   margin-left: 0;
 }
-
-.form-submit {
-  padding: 0.6em 1.25em 0.4em;
-  margin: 0;
-  border: 1px solid #dbdbdb;
-  font-size: 0.875rem;
-  background-color: #fff;
-  color: #000;
-}
-.form-submit:hover,
-.form-submit:focus {
-  padding: calc(0.6em - 2px) calc(1.25em - 2px) calc(0.4em - 2px) calc(1.25em - 2px);
-}

core/profiles/demo_umami/themes/umami/css/components/navigation/menu-account/menu-account.css

@@ -13,7 +13,6 @@
     text-align: left;
   }
 }
-
 .menu-account {
   display: inline-flex;
   margin: 0;
@@ -29,11 +28,13 @@
   margin-right: 1em;
 }
 .menu-account__link,
-.menu-account__link:hover {
+.menu-account__link:hover,
+.menu-account__link:focus {
   text-decoration: none;
   color: inherit;
   background-color: inherit;
 }
-.menu-account__link:hover {
+.menu-account__link:hover,
+.menu-account__link:focus {
   text-decoration: underline;
 }