MAGETWO-32196: Visual style for 'skip to content' attribute

Author: Natalia Momotenko

app/design/frontend/Magento/blank/Magento_Theme/web/css/source/module.less

@@ -82,7 +82,19 @@ body {
 }
 
 .action.skip {
-    &:extend(.abs-visually-hidden all);
+    &:not(:focus) {
+        &:extend(.abs-visually-hidden all);
+    }
+    &:focus {
+        position: absolute;
+        box-sizing: border-box;
+        width: 100%;
+        left: 0;
+        top: 0;
+        text-align: center;
+        .css(background, @color-gray94);
+        .css(padding, @indent-s-base);
+    }
 }
 
 //

app/design/frontend/Magento/luma/Magento_Theme/web/css/source/module.less

@@ -153,7 +153,20 @@
         }
     }
 
-    .action.skip:extend(.abs-visually-hidden all) {
+    .action.skip {
+        &:not(:focus) {
+            &:extend(.abs-visually-hidden all);
+        }
+        &:focus {
+            position: absolute;
+            box-sizing: border-box;
+            width: 100%;
+            left: 0;
+            top: 0;
+            text-align: center;
+            .css(background, @color-gray94);
+            .css(padding, @indent-s-base);
+        }
     }
 
     //