Issue #2485375 by marieke_h, Manjit.Singh, MathieuSpil, LewisNyman, geertvd: Clean up shortcut CSS inline with our CSS standards

core/modules/shortcut/css/shortcut.icons.theme.css

@@ -17,24 +17,24 @@
 /**
  * Add/remove links.
  */
-.add-or-remove-shortcuts .icon {
+.shortcut-action__icon {
   background: transparent url(../images/favstar.svg) no-repeat left top;
   width: 20px;
   height: 20px;
   display: inline-block;
   vertical-align: -2px;
 }
-[dir="rtl"] .add-or-remove-shortcuts .icon {
+[dir="rtl"] .shortcut-action__icon {
   background-image: url(../images/favstar-rtl.svg);
 }
-.add-shortcut a:hover .icon,
-.add-shortcut a:focus .icon {
+.shortcut-action--add:hover .shortcut-action__icon,
+.shortcut-action--add:focus .shortcut-action__icon {
   background-position: -20px top;
 }
-.remove-shortcut .icon {
+.shortcut-action--remove .shortcut-action__icon {
   background-position: -40px top;
 }
-.remove-shortcut a:focus .icon,
-.remove-shortcut a:hover .icon {
+.shortcut-action--remove:focus .shortcut-action__icon,
+.shortcut-action--remove:hover .shortcut-action__icon {
   background-position: -60px top;
 }

core/modules/shortcut/css/shortcut.theme.css

@@ -23,15 +23,15 @@
 /**
  * Add/remove links.
  */
-.add-or-remove-shortcuts {
+.shortcut-action {
   display: inline-block;
   margin-left: 0.3em; /* LTR */
 }
-[dir="rtl"] .add-or-remove-shortcuts {
+[dir="rtl"] .shortcut-action {
   margin-left: 0;
   margin-right: 0.3em;
 }
-.add-or-remove-shortcuts .text {
+.shortcut-action__message {
   background: #000000;
   background: rgba(0, 0, 0, 0.5);
   border-radius: 5px;
@@ -49,12 +49,12 @@
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
 }
-[dir="rtl"] .add-or-remove-shortcuts .text {
+[dir="rtl"] .shortcut-action__message {
   margin-left: 0;
   margin-right: 0.3em;
 }
-.add-or-remove-shortcuts a:hover .text,
-.add-or-remove-shortcuts a:focus .text {
+.shortcut-action:hover .shortcut-action__message,
+.shortcut-action:focus .shortcut-action__message {
   opacity: 1;
   -ms-transform: translateY(-2px);
   -webkit-transform: translateY(-2px);

core/modules/shortcut/shortcut.module

@@ -347,12 +347,16 @@ function shortcut_preprocess_page(&$variables) {
             'shortcut/drupal.shortcut',
           ),
         ),
-        '#prefix' => '<div class="add-or-remove-shortcuts ' . $link_mode . '-shortcut">',
         '#type' => 'link',
-        '#title' => SafeMarkup::format('<span class="icon"></span><span class="text">@text</span>', array('@text' => $link_text)),
+        '#title' => SafeMarkup::format('<span class="shortcut-action__icon"></span><span class="shortcut-action__message">@text</span>', array('@text' => $link_text)),
         '#url' => Url::fromRoute($route_name, $route_parameters),
         '#options' => array('query' => $query),
-        '#suffix' => '</div>',
+        '#attributes' => array(
+          'class' => array(
+            'shortcut-action',
+            'shortcut-action--' . $link_mode,
+          ),
+        ),
       );
     }
   }

core/modules/shortcut/src/Tests/ShortcutLinksTest.php

@@ -243,23 +243,23 @@ class ShortcutLinksTest extends ShortcutTestBase {
       ->save();
 
     $this->drupalGet('page-that-does-not-exist');
-    $result = $this->xpath('//div[contains(@class, "add-shortcut")]');
+    $result = $this->xpath('//a[contains(@class, "shortcut-action--add")]');
     $this->assertTrue(empty($result), 'Add to shortcuts link was not shown on a page not found.');
 
     // The user does not have access to this path.
     $this->drupalGet('admin/modules');
-    $result = $this->xpath('//div[contains(@class, "add-shortcut")]');
+    $result = $this->xpath('//a[contains(@class, "shortcut-action--add")]');
     $this->assertTrue(empty($result), 'Add to shortcuts link was not shown on a page the user does not have access to.');
 
-    // Verify that the testing mechanism works by verifying the shortcut
-    // link appears on admin/people.
-    $this->drupalGet('admin/people');
-    $result = $this->xpath('//div[contains(@class, "remove-shortcut")]');
+    // Verify that the testing mechanism works by verifying the shortcut link
+    // appears on admin/content.
+    $this->drupalGet('admin/content');
+    $result = $this->xpath('//a[contains(@class, "shortcut-action--remove")]');
     $this->assertTrue(!empty($result), 'Remove from shortcuts link was shown on a page the user does have access to.');
 
     // Verify that the shortcut link appears on routing only pages.
     $this->drupalGet('router_test/test2');
-    $result = $this->xpath('//div[contains(@class, "add-shortcut")]');
+    $result = $this->xpath('//a[contains(@class, "shortcut-action--add")]');
     $this->assertTrue(!empty($result), 'Add to shortcuts link was shown on a page the user does have access to.');
   }
 

core/themes/bartik/css/components/shortcut.css

@@ -10,6 +10,6 @@
 [dir="rtl"] .shortcut-wrapper h1#page-title {
   float: right;
 }
-div.add-or-remove-shortcuts {
+.shortcut-action {
   padding-top: 0.9em;
 }

core/themes/bartik/css/print.css

@@ -20,7 +20,7 @@ body {
 #toolbar,
 .site-footer,
 .tabs,
-.add-or-remove-shortcuts {
+.shortcut-action {
   display: none;
 }
 .one-sidebar #content,