Merge branch 'feature/focus'

Author: Cocola

src/scss/base/_seo.scss

@@ -1,10 +1,15 @@
 [data-seo-container] {
     position: relative;
 
-    @include hover {
+    &:hover,
+    &:focus-within {
         cursor: pointer;
     }
 
+    &:focus-within {
+        outline: 1px solid currentColor;
+    }
+
     [data-seo-target] {
         &:before {
             @include pseudo__content;

src/scss/patterns/_menu.scss

@@ -44,7 +44,8 @@
 		@include clearfix;
 
 		&>#{$menu-item} {
-			@include hover {
+			&:hover,
+			&:focus-within {
 				ul {
 					display: block;
 				}

src/templates/partials/footer.php

@@ -4,19 +4,19 @@
 					<p>Follow us:</p>
 					<a class="button button--circle" href="https://www.facebook.com/beapi.agency/?ref=bookmarks">
 						<span class="visuallyhidden">On Facebook</span>
-						<svg class="icon icon-facebook" aria-hidden="true" role="img">
+						<svg class="icon icon-facebook" focusable="false" aria-hidden="true" role="img">
 							<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-facebook"></use>
 						</svg>
 					</a>
 					<a class="button button--circle" href="https://twitter.com/be_api">
 						<span class="visuallyhidden">On Twitter</span>
-						<svg class="icon icon-twitter" aria-hidden="true" role="img">
+						<svg class="icon icon-twitter" focusable="false" aria-hidden="true" role="img">
 							<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-twitter"></use>
 						</svg>
 					</a>
 					<a class="button button--circle" href="https://www.instagram.com/agencebeapi/">
 						<span class="visuallyhidden">On Instagram</span>
-						<svg class="icon icon-instagram" aria-hidden="true" role="img">
+						<svg class="icon icon-instagram" focusable="false" aria-hidden="true" role="img">
 							<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-instagram"></use>
 						</svg>
 					</a>

src/templates/partials/header.php

@@ -61,13 +61,13 @@
 			</ul>
 			<div id="js-menu-trigger" class="menu-trigger">
 				<button type="button" id="js-menu-open" class="menu-trigger__open button button--primary">
-					<svg class="icon icon-menu" aria-hidden="true" role="img">
+					<svg class="icon icon-menu" focusable="false" aria-hidden="true" role="img">
 						<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-menu"></use>
 					</svg>
 					Menu
 				</button>
 				<button type="button" id="js-menu-close" class="menu-trigger__close button button--primary">
-					<svg class="icon icon-close" aria-hidden="true" role="img">
+					<svg class="icon icon-close" focusable="false" aria-hidden="true" role="img">
 						<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-close"></use>
 					</svg>
 					Fermer
@@ -78,7 +78,7 @@
 					<div class="header__logo">
 						<a href="01-home.php" class="header__logo-link">
 							<!-- <?php //echo get_the_post_thumbnail( 0, 'logo-beapi', array( 'data-location' => 'header-logo', 'class' => 'header__img', 'alt' => 'Logo' ) ); ?>  -->
-							<svg class="header__icon icon" aria-hidden="true" role="img">
+							<svg class="header__icon icon"  focusable="false" aria-hidden="true" role="img">
 								<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-logo-beapi"></use>
 							</svg>
 							<?php if ( $bodyClass == 'home' ) :?>
@@ -93,7 +93,8 @@
 							<li class="menu-item current-menu-item menu-item-has-children">
 								<a href="01-home.php">Home</a>
 								<ul class="sub-menu">
-									<li class="menu-item"><a href="#">Sub menu item</a></li>
+									<li class="menu-item"><a href="00-buttons.php">StyleGuide - Buttons</a></li>
+									<li class="menu-item"><a href="00-cards.php">StyleGuide - Cards</a></li>
 								</ul>
 							</li>
 							<li class="menu-item"><a href="02-page-default.php">Page default</a></li>

src/templates/partials/searchform.php

@@ -7,7 +7,7 @@
 			<input type="search" class="searchform__field" name="s" id="search" placeholder="Entrez un mot clé" aria-required="true" required="required">
 			<button type="submit" class="searchform__submit" name="submit" id="searchsubmit">
 				<span class="visuallyhidden">Lancer la recherche</span>
-				<svg class="icon icon-search" aria-hidden="true" role="img">
+				<svg class="icon icon-search" focusable="false" aria-hidden="true" role="img">
 					<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use>
 				</svg>
 			</button>