From 91d867f5bc04b7760a4d17f431f79aea3392716c Mon Sep 17 00:00:00 2001
From: Alex Pott <alex.a.pott@googlemail.com>
Date: Mon, 21 Oct 2013 10:26:54 +0100
Subject: [PATCH] Issue #1982256 by mortendk, rteijeiro, tim.plunkett,
 LewisNyman, tlattimore, yannickoo, ry5n: Clean up html.html.twig markup.

---
 core/includes/theme.inc                       | 21 ------------------
 core/modules/node/node.module                 | 10 +++++++++
 core/modules/overlay/css/overlay-child.css    |  2 +-
 core/modules/system/templates/html.html.twig  |  8 +++----
 core/themes/bartik/bartik.theme               | 16 ++++++++++++++
 core/themes/bartik/css/style.css              | 19 ++++++++--------
 .../templates/maintenance-page.html.twig      |  6 ++---
 core/themes/seven/seven.theme                 | 14 ++++++++++++
 core/themes/seven/style.css                   | 22 +++++++++----------
 9 files changed, 68 insertions(+), 50 deletions(-)

diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index e49bb76de70b..1d24dd501296 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -2511,22 +2511,6 @@ function template_preprocess_html(&$variables) {
   // Add a class that tells us whether the page is viewed by an authenticated user or not.
   $variables['attributes']['class'][] = $variables['logged_in'] ? 'logged-in' : 'not-logged-in';
 
-  // Add information about the number of sidebars.
-  if (!empty($variables['page']['sidebar_first']) && !empty($variables['page']['sidebar_second'])) {
-    $variables['attributes']['class'][] = 'two-sidebars';
-  }
-  elseif (!empty($variables['page']['sidebar_first'])) {
-    $variables['attributes']['class'][] = 'one-sidebar';
-    $variables['attributes']['class'][] = 'sidebar-first';
-  }
-  elseif (!empty($variables['page']['sidebar_second'])) {
-    $variables['attributes']['class'][] = 'one-sidebar';
-    $variables['attributes']['class'][] = 'sidebar-second';
-  }
-  else {
-    $variables['attributes']['class'][] = 'no-sidebars';
-  }
-
   // Populate the body classes.
   if ($suggestions = theme_get_suggestions(arg(), 'page', '-')) {
     foreach ($suggestions as $suggestion) {
@@ -2539,11 +2523,6 @@ function template_preprocess_html(&$variables) {
     }
   }
 
-  // If on an individual node page, add the node type to body classes.
-  if ($node = menu_get_object()) {
-    $variables['attributes']['class'][] = drupal_html_class('node-type-' . $node->getType());
-  }
-
   // Initializes attributes which are specific to the html and body elements.
   $variables['html_attributes'] = new Attribute;
 
diff --git a/core/modules/node/node.module b/core/modules/node/node.module
index 0ad789d4f48e..ed31eeaaeb23 100644
--- a/core/modules/node/node.module
+++ b/core/modules/node/node.module
@@ -577,6 +577,16 @@ function node_is_page(EntityInterface $node) {
   return (!empty($page_node) ? $page_node->id() == $node->id() : FALSE);
 }
 
+/**
+ * Implements hook_preprocess_HOOK() for HTML document templates.
+ */
+function node_preprocess_html(&$variables) {
+  // If on an individual node page, add the node type to body classes.
+  if ($node = menu_get_object()) {
+    $variables['attributes']['class'][] = drupal_html_class('node-type-' . $node->getType());
+  }
+}
+
 /**
  * Implements hook_preprocess_HOOK() for block templates.
  */
diff --git a/core/modules/overlay/css/overlay-child.css b/core/modules/overlay/css/overlay-child.css
index 8162d5b2e209..b40e3af97ddf 100644
--- a/core/modules/overlay/css/overlay-child.css
+++ b/core/modules/overlay/css/overlay-child.css
@@ -63,7 +63,7 @@ html[dir="rtl"] {
 #overlay-title:focus {
   outline: 0;
 }
-.overlay #skip-link a {
+.overlay .skip-link {
   color: #fff; /* This is white to contrast with the dark background behind it. */
 }
 
diff --git a/core/modules/system/templates/html.html.twig b/core/modules/system/templates/html.html.twig
index 6bdbe87e21ea..209b9140797f 100644
--- a/core/modules/system/templates/html.html.twig
+++ b/core/modules/system/templates/html.html.twig
@@ -35,11 +35,9 @@
     {{ scripts }}
   </head>
   <body{{ attributes }}>
-    <div id="skip-link">
-      <a href="#main-content" class="visually-hidden focusable">
-        {{ 'Skip to main content'|t }}
-      </a>
-    </div>
+    <a href="#main-content" class="visually-hidden focusable skip-link">
+      {{ 'Skip to main content'|t }}
+    </a>
     {{ page_top }}
     {{ page }}
     {{ page_bottom }}
diff --git a/core/themes/bartik/bartik.theme b/core/themes/bartik/bartik.theme
index 593923ae7a3b..4a56b7d29742 100644
--- a/core/themes/bartik/bartik.theme
+++ b/core/themes/bartik/bartik.theme
@@ -13,6 +13,22 @@
  * Adds body classes if certain regions have content.
  */
 function bartik_preprocess_html(&$variables) {
+  // Add information about the number of sidebars.
+  if (!empty($variables['page']['sidebar_first']) && !empty($variables['page']['sidebar_second'])) {
+    $variables['attributes']['class'][] = 'two-sidebars';
+  }
+  elseif (!empty($variables['page']['sidebar_first'])) {
+    $variables['attributes']['class'][] = 'one-sidebar';
+    $variables['attributes']['class'][] = 'sidebar-first';
+  }
+  elseif (!empty($variables['page']['sidebar_second'])) {
+    $variables['attributes']['class'][] = 'one-sidebar';
+    $variables['attributes']['class'][] = 'sidebar-second';
+  }
+  else {
+    $variables['attributes']['class'][] = 'no-sidebars';
+  }
+
   if (!empty($variables['page']['featured'])) {
     $variables['attributes']['class'][] = 'featured';
   }
diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
index eaa306186ed0..5dad1108c85c 100644
--- a/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -114,7 +114,7 @@ body,
 }
 #header,
 #footer-wrapper,
-#skip-link,
+.skip-link,
 ul.contextual-links,
 ul.links,
 ul.primary,
@@ -315,17 +315,18 @@ ul.tips {
 }
 
 /* ------------------ Header ------------------ */
-#skip-link {
+.skip-link,
+.skip-link.visually-hidden.focusable {
   left: 50%;
   margin-left: -5.25em;
   margin-top: 0;
-  position: absolute;
+  position: absolute !important;
   width: auto;
   z-index: 50;
 }
-#skip-link a,
-#skip-link a:link,
-#skip-link a:visited {
+.skip-link,
+.skip-link:link,
+.skip-link:visited {
   background: #444;
   background: rgba(0, 0, 0, 0.6);
   color: #fff;
@@ -336,9 +337,9 @@ ul.tips {
   text-decoration: none;
   border-radius: 0 0 10px 10px;
 }
-#skip-link a:hover,
-#skip-link a:active,
-#skip-link a:focus {
+.skip-link:hover,
+.skip-link:active,
+.skip-link:focus {
   outline: 0;
 }
 #logo {
diff --git a/core/themes/bartik/templates/maintenance-page.html.twig b/core/themes/bartik/templates/maintenance-page.html.twig
index 083c40105c50..031f073f5e85 100644
--- a/core/themes/bartik/templates/maintenance-page.html.twig
+++ b/core/themes/bartik/templates/maintenance-page.html.twig
@@ -20,9 +20,9 @@
 </head>
 <body class="{{ attributes.class }}"{{ attributes }}>
 
-  <div id="skip-link">
-    <a href="#main-content" class="visually-hidden focusable">{{ 'Skip to main content'|t }}</a>
-  </div>
+  <a href="#main-content" class="visually-hidden focusable skip-link">
+    {{ 'Skip to main content'|t }}
+  </a>
 
   <div id="page-wrapper"><div id="page">
 
diff --git a/core/themes/seven/seven.theme b/core/themes/seven/seven.theme
index 29f171137825..67ebb0f9b38e 100644
--- a/core/themes/seven/seven.theme
+++ b/core/themes/seven/seven.theme
@@ -30,6 +30,20 @@ function seven_library_info() {
   return $libraries;
 }
 
+/**
+ * Implements hook_preprocess_HOOK() for HTML document templates.
+ */
+function seven_preprocess_html(&$variables) {
+  // Add information about the number of sidebars.
+  if (!empty($variables['page']['sidebar_first'])) {
+    $variables['attributes']['class'][] = 'one-sidebar';
+    $variables['attributes']['class'][] = 'sidebar-first';
+  }
+  else {
+    $variables['attributes']['class'][] = 'no-sidebars';
+  }
+}
+
 /**
  * Implements hook_preprocess_HOOK() for page templates.
  */
diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css
index 69ef6ec5b24d..58668082a55b 100644
--- a/core/themes/seven/style.css
+++ b/core/themes/seven/style.css
@@ -158,7 +158,7 @@ pre {
 /**
  * Skip link.
  */
-#skip-link {
+.skip-link {
   margin-top: 0;
   position: absolute;
   left: 50%; /* LTR */
@@ -166,13 +166,13 @@ pre {
   width: auto;
   z-index: 50;
 }
-[dir="rtl"] #skip-link {
+[dir="rtl"] .skip-link {
   right: 50%;
   margin-right: -5.25em;
 }
-#skip-link a,
-#skip-link a:link,
-#skip-link a:visited {
+.skip-link,
+.skip-link:link,
+.skip-link:visited {
   display: inline-block;
   background: #444;
   color: #fff;
@@ -181,14 +181,14 @@ pre {
   text-decoration: none;
   border-radius: 0 0 10px 10px;
 }
-[dir="rtl"] #skip-link a,
-[dir="rtl"] #skip-link a:link,
-[dir="rtl"] #skip-link a:visited {
+[dir="rtl"] .skip-link,
+[dir="rtl"] .skip-link:link,
+[dir="rtl"] .skip-link:visited {
   padding: 1px 10px 2px 10px;
 }
-#skip-link a:hover,
-#skip-link a:focus,
-#skip-link a:active {
+.skip-link:hover,
+.skip-link:focus,
+.skip-link:active {
   outline: 0;
 }
 
-- 
GitLab