Merge pull request #192 from BeAPI/feature/menu-fast-access

asadowski10 · web-flow · commit c5c6310ac446 · 2021-11-30T18:04:08.000+01:00
Feature/menu fast access
diff --git a/footer.php b/footer.php
@@ -1,3 +1,5 @@
+		</main>
+		<footer id="footer" class="footer" role="contentinfo" aria-label="Pied de page"></footer>
 <?php wp_footer(); ?>
 	</body>
 </html>
diff --git a/header.php b/header.php
@@ -19,5 +19,17 @@
 	<?php wp_head(); ?>
 </head>
 <body <?php body_class(); ?>>
+	<ul class="skip-links skip-links--hidden" aria-label="Liens d'évitement">
+		<li>
+			<a href="#content">Contenu principal</a>
+		</li>
+		<li>
+			<a href="#footer">Pied de page</a>
+		</li>
+	</ul>
+
+	<header id="header" class="header" role="banner" aria-label="Entête de page"></header>
+
+	<main id="content" role="main" tabindex="-1" aria-label="Zone de contenus">
 <?php
 	wp_body_open();
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "beapi-frontend-framework",
   "version": "5.0.0",
-  "author": "BeAPI",
+  "author": "Be API",
   "repository": {
     "type": "git",
     "url": "https://github.com/BeAPI/beapi-frontend-framework"
diff --git a/src/scss/patterns/_footer.scss b/src/scss/patterns/_footer.scss
@@ -5,6 +5,5 @@
 .footer {
     $el: &;
 
-    padding-bottom: $base-spacing;
     text-align: center;
 }
diff --git a/src/scss/patterns/_header.scss b/src/scss/patterns/_header.scss
@@ -3,9 +3,12 @@
  */
 
 .header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
     padding-top: $base-spacing;
     padding-bottom: $base-spacing;
-    background-color: $primary-color;
 
     &__logo-link {
         display: block;
diff --git a/src/scss/patterns/_skip-links.scss b/src/scss/patterns/_skip-links.scss
@@ -0,0 +1,20 @@
+.skip-links {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    display: flex;
+    padding: .5rem 1rem;
+    color: $secondary-color;
+    background-color: $primary-color;
+    transition: transform .3s ease-in-out;
+    transform: translate3d(0, -100%, 0);
+
+    &:focus-within {
+        transform: translate3d(0, 0, 0);
+    }
+
+    li:not(:last-of-type) {
+        margin-right: 1rem;
+    }
+}
diff --git a/src/scss/style.scss b/src/scss/style.scss
@@ -33,6 +33,7 @@ $entry-file-name: "style";
 @import "patterns/menu";
 @import "patterns/hero";
 @import "patterns/searchform";
+@import "patterns/skip-links";
 
 // Wordpress
 

-Original file line number
+Diff line change
@@ @@ -1,3 +1,5 @@ @@
 +		</main>
 +		<footer id="footer" class="footer" role="contentinfo" aria-label="Pied de page"></footer>
 <?php wp_footer(); ?>
 	</body>
 </html>
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "beapi-frontend-framework",`
`3`	`3`	`"version": "5.0.0",`
`4`		`- "author": "BeAPI",`
	`4`	`+ "author": "Be API",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`
`7`	`7`	`"url": "https://github.com/BeAPI/beapi-frontend-framework"`
Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,5 @@`
`5`	`5`	`.footer {`
`6`	`6`	`$el: &;`
`7`	`7`
`8`		`- padding-bottom: $base-spacing;`
`9`	`8`	`text-align: center;`
`10`	`9`	`}`