Issue #3293909 by ben.hamelin, mherchel, chrisfromredfin, sime, johnpicozzi,...

Issue #3293909 by ben.hamelin, mherchel, chrisfromredfin, sime, johnpicozzi, jewelclark, artinruins, MrMason: Security and maintained icons need to communicate correct information

css/pb.css

@@ -486,6 +486,11 @@
   display: block;
   font-size: 30px; /* Used to set size of icon, which is 1em. */
 }
+.pb-project__status-icon-btn {
+  padding: 0;
+  border: none;
+  background: none;
+}
 .pb-project__active-installs-text,
 .pb-project__install-count {
   font-size: 13px;

sveltejs/src/Project/ProjectIcon.svelte

@@ -10,23 +10,28 @@
   const typeToImg = {
     status: {
       path: 'blue-security-shield-icon',
-      alt: Drupal.t('Security Advisory Coverage'),
+      alt: Drupal.t('Security Note'),
+      title: Drupal.t('This module is covered by the Drupal Security Team.'),
     },
     usage: {
       path: 'project-usage-icon',
       alt: Drupal.t('Project Usage'),
+      title: Drupal.t('Shows the number of sites that use this module.'),
     },
     compatible: {
       path: 'compatible-icon',
       alt: Drupal.t('Compatible'),
+      title: Drupal.t('This module is compatible with your version of Drupal.'),
     },
   };
 </script>
 
-<img
-  src="{FULL_MODULE_PATH}/images/{typeToImg[type].path}{DARK_COLOR_SCHEME
-    ? '--dark-color-scheme'
-    : ''}.svg"
-  class={`pb-icon pb-icon--${variant} pb-icon--${type} ${classes}`}
-  alt={typeToImg[type].path.alt}
-/>
+<button class="pb-project__status-icon-btn" title={typeToImg[type].title}>
+  <img
+    src="{FULL_MODULE_PATH}/images/{typeToImg[type].path}{DARK_COLOR_SCHEME
+      ? '--dark-color-scheme'
+      : ''}.svg"
+    class={`pb-icon pb-icon--${variant} pb-icon--${type} ${classes}`}
+    alt={typeToImg[type].alt}
+  />
+</button>

tests/src/FunctionalJavascript/ProjectBrowserInstallerUiTest.php

@@ -72,7 +72,7 @@ class ProjectBrowserInstallerUiTest extends WebDriverTestBase {
     $this->drupalGet('admin/modules/browse');
     $this->svelteInitHelper('text', 'Cream cheese on a bagel');
     $cream_cheese_module_selector = '#project-browser .pb-layout__main ul > li:nth-child(1)';
-    $download_button = $assert_session->waitForElementVisible('css', "$cream_cheese_module_selector button");
+    $download_button = $assert_session->waitForElementVisible('css', "$cream_cheese_module_selector button.project__action_button");
     $this->assertNotEmpty($download_button);
     $this->assertSame('Add and Install Cream cheese on a bagel', $download_button->getText());
     $download_button->click();
@@ -99,7 +99,7 @@ class ProjectBrowserInstallerUiTest extends WebDriverTestBase {
     $this->drupalGet('admin/modules/browse');
     $this->svelteInitHelper('text', 'Pinky and the Brain');
     $pinky_brain_selector = '#project-browser .pb-layout__main ul > li:nth-child(2)';
-    $action_button = $assert_session->waitForElementVisible('css', "$pinky_brain_selector button");
+    $action_button = $assert_session->waitForElementVisible('css', "$pinky_brain_selector button.project__action_button");
     $this->assertNotEmpty($action_button);
     $this->assertSame('Install Pinky and the Brain', $action_button->getText());
     $action_button->click();
@@ -115,7 +115,7 @@ class ProjectBrowserInstallerUiTest extends WebDriverTestBase {
 
     // The action button should have momentarily changed to a progress message,
     // but changes back to the original button when the error above occurs.
-    $action_button = $assert_session->waitForElementVisible('css', "$pinky_brain_selector button");
+    $action_button = $assert_session->waitForElementVisible('css', "$pinky_brain_selector button.project__action_button");
     $this->assertNotEmpty($action_button);
     $this->assertSame('Install Pinky and the Brain', $action_button->getText());
   }
@@ -164,7 +164,7 @@ class ProjectBrowserInstallerUiTest extends WebDriverTestBase {
     $this->svelteInitHelper('text', 'Pinky and the Brain');
 
     $cream_cheese_module_selector = '#project-browser .pb-layout__main ul > li:nth-child(1)';
-    $download_button = $assert_session->waitForElementVisible('css', "$cream_cheese_module_selector button");
+    $download_button = $assert_session->waitForElementVisible('css', "$cream_cheese_module_selector button.project__action_button");
     $this->assertNotEmpty($download_button);
     $this->assertSame('Add and Install Cream cheese on a bagel', $download_button->getText());
     $this->drupalGet('/admin/config/development/project_browser');
@@ -175,7 +175,7 @@ class ProjectBrowserInstallerUiTest extends WebDriverTestBase {
 
     $this->drupalGet('admin/modules/browse');
     $this->svelteInitHelper('text', 'Cream cheese on a bagel');
-    $action_button = $assert_session->waitForElementVisible('css', "$cream_cheese_module_selector button");
+    $action_button = $assert_session->waitForElementVisible('css', "$cream_cheese_module_selector button.project__action_button");
     $this->assertNotEmpty($action_button);
     $this->assertSame('View Commands for Cream cheese on a bagel', $action_button->getText());
   }
@@ -200,7 +200,7 @@ class ProjectBrowserInstallerUiTest extends WebDriverTestBase {
     // Try beginning another install while one is in progress, but not yet in
     // the applying stage.
     $cream_cheese_module_selector = '#project-browser .pb-layout__main ul > li:nth-child(1)';
-    $cream_cheese_button = $page->find('css', "$cream_cheese_module_selector button");
+    $cream_cheese_button = $page->find('css', "$cream_cheese_module_selector button.project__action_button");
     $cream_cheese_button->click();
 
     $this->assertTrue($assert_session->waitForText('An install staging area claimed by Project Browser exists but has expired. You may unlock the stage and try the install again.'));
@@ -209,7 +209,7 @@ class ProjectBrowserInstallerUiTest extends WebDriverTestBase {
     $this->clickWithWait('#ui-id-1 > p > a');
     $this->svelteInitHelper('text', 'Cream cheese on a bagel');
     // Try beginning another install after breaking lock.
-    $cream_cheese_button = $page->find('css', "$cream_cheese_module_selector button");
+    $cream_cheese_button = $page->find('css', "$cream_cheese_module_selector button.project__action_button");
     $cream_cheese_button->click();
     $installed_action = $assert_session->waitForElementVisible('css', "$cream_cheese_module_selector .project_status-indicator", 30000);
     $assert_session->waitForText('✓ Cream cheese on a bagel is Installed');
@@ -238,14 +238,14 @@ class ProjectBrowserInstallerUiTest extends WebDriverTestBase {
     // Try beginning another install while one is in progress, but not yet in
     // the applying stage.
     $cream_cheese_module_selector = '#project-browser .pb-layout__main ul > li:nth-child(1)';
-    $cream_cheese_button = $page->find('css', "$cream_cheese_module_selector button");
+    $cream_cheese_button = $page->find('css', "$cream_cheese_module_selector button.project__action_button");
     $cream_cheese_button->click();
     $this->assertTrue($assert_session->waitForText('The install staging area was locked less than 1 minutes ago. This is recent enough that a legitimate installation may be in progress. Consider waiting before unlocking the installation staging area.'));
     // Click Unlock Install Stage link.
     $this->clickWithWait('#ui-id-1 > p > a');
     $this->svelteInitHelper('text', 'Cream cheese on a bagel');
     // Try beginning another install after breaking lock.
-    $cream_cheese_button = $page->find('css', "$cream_cheese_module_selector button");
+    $cream_cheese_button = $page->find('css', "$cream_cheese_module_selector button.project__action_button");
     $cream_cheese_button->click();
     $installed_action = $assert_session->waitForElementVisible('css', "$cream_cheese_module_selector .project_status-indicator", 30000);
     $assert_session->waitForText('✓ Cream cheese on a bagel is Installed');
@@ -267,7 +267,7 @@ class ProjectBrowserInstallerUiTest extends WebDriverTestBase {
     $this->svelteInitHelper('text', 'Cream cheese on a bagel');
     $assert_session->statusMessageContains("Simulate an error message for the project browser.", 'error');
     $cream_cheese_module_selector = '#project-browser .pb-layout__main ul > li:nth-child(1)';
-    $download_button_text = $assert_session->waitForElementVisible('css', "$cream_cheese_module_selector button")
+    $download_button_text = $assert_session->waitForElementVisible('css', "$cream_cheese_module_selector button.project__action_button")
       ?->getText();
     $this->assertSame('View Commands for Cream cheese on a bagel', $download_button_text);
 
@@ -290,7 +290,7 @@ class ProjectBrowserInstallerUiTest extends WebDriverTestBase {
     $this->svelteInitHelper('text', 'Cream cheese on a bagel');
     $assert_session->statusMessageContains("Simulate a warning message for the project browser.", 'warning');
     $cream_cheese_module_selector = '#project-browser .pb-layout__main ul > li:nth-child(1)';
-    $download_button = $assert_session->waitForElementVisible('css', "$cream_cheese_module_selector button");
+    $download_button = $assert_session->waitForElementVisible('css', "$cream_cheese_module_selector button.project__action_button");
     $this->assertNotEmpty($download_button);
     $this->assertSame('Add and Install Cream cheese on a bagel', $download_button->getText());
     $download_button->click();