Issue #3315859 by utkarsh_33, phenaproxima, narendrar, mtullo, rkoller,...

Issue #3315859 by utkarsh_33, phenaproxima, narendrar, mtullo, rkoller, antonina pavlenko, chrisfromredfin, ressa: Communicate the status/state of a project in the button accesibly

css/pb.css

@@ -420,10 +420,6 @@
   line-height: 0.75;
 }
 
-.pb-actions__icon {
-  color: #228572;
-}
-
 /* <Project/Categories> */
 .pb-project-categories__list {
   display: inline-block;
@@ -716,8 +712,12 @@
 
 /* <Project/ProjectStatusIndicator> */
 .project_status-indicator {
-  text-decoration: none;
-  font-weight: bold;
+  display: flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  cursor: not-allowed;
+  border: none;
+  background: none;
 }
 
 /* <Search/FilterApplied> */
@@ -1038,3 +1038,11 @@
     border: 1px solid;
   }
 }
+
+.project_status-indicator__label {
+  margin-bottom: 5px;
+  margin-left: 5px;
+  color: var(--color-gray-800);
+  font-size: 16px;
+  font-weight: 700;
+}

images/installed-check-icon.svg

+<svg fill="#55565B" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m6.464 13.676c-.194.194-.513.194-.707 0l-4.96-4.955c-.194-.193-.194-.513 0-.707l1.405-1.407c.194-.195.512-.195.707 0l2.849 2.848c.194.193.513.193.707 0l6.629-6.626c.195-.194.514-.194.707 0l1.404 1.404c.193.194.193.513 0 .707z"/></svg>

sveltejs/src/Project/ActionButton.svelte

@@ -10,6 +10,7 @@
     updated,
     activeTab,
   } from '../stores';
+  import ProjectIcon from './ProjectIcon.svelte';
   import LoadingEllipsis from './LoadingEllipsis.svelte';
   import { processQueue } from '../QueueProcessor';
 
@@ -62,7 +63,7 @@
     <ProjectStatusIndicator {project} statusText={Drupal.t('Not compatible')} />
   {:else if project.status === 'active'}
     <ProjectStatusIndicator {project} statusText={Drupal.t('Installed')}>
-      <span class="pb-actions__icon" aria-hidden="true">&#10003&#x20</span>
+      <ProjectIcon type="installed" />
     </ProjectStatusIndicator>
   {:else}
     <span>

sveltejs/src/Project/ProjectIcon.svelte

@@ -30,15 +30,32 @@
       alt: Drupal.t('Well maintained'),
       title: Drupal.t('This module is actively maintained by maintainers.'),
     },
+    installed: {
+      path: 'installed-check-icon',
+      alt: Drupal.t('Installed'),
+      title: Drupal.t('This module is installed.'),
+    },
   };
 </script>
 
-<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>
+{#if type === 'installed'}
+  <span class="pb-project__status-icon-span" 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
+    />
+  </span>
+{:else}
+  <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>
+{/if}

sveltejs/src/Project/ProjectStatusIndicator.svelte

@@ -5,12 +5,12 @@
   const { Drupal } = window;
 </script>
 
-<span class="project_status-indicator">
+<button class="project_status-indicator" aria-disabled="true">
   <slot />
-  <span class="visually-hidden"
-    >{Drupal.t('@module is', {
+  <span class="visually-hidden">
+    {Drupal.t('@module is', {
       '@module': `${project.title}`,
-    })}</span
-  >
-  {statusText}
-</span>
+    })}
+  </span>
+  <span class="project_status-indicator__label">{statusText}</span>
+</button>

tests/src/FunctionalJavascript/ProjectBrowserInstallerUiTest.php

@@ -82,8 +82,8 @@ class ProjectBrowserInstallerUiTest extends WebDriverTestBase {
     $this->assertSame('Install Cream cheese on a bagel', $download_button->getText());
     $download_button->click();
     $installed_action = $assert_session->waitForElementVisible('css', "$cream_cheese_module_selector .project_status-indicator", 30000);
-    $this->assertTrue($assert_session->waitForText('✓ Cream cheese on a bagel is Installed'));
-    $this->assertSame('✓ Cream cheese on a bagel is Installed', $installed_action->getText());
+    $this->assertTrue($assert_session->waitForText('Cream cheese on a bagel is Installed'));
+    $this->assertSame('Cream cheese on a bagel is Installed', $installed_action->getText());
 
     // The activator in project_browser_test should have logged a message.
     // @see \Drupal\project_browser_test\TestActivator
@@ -236,8 +236,9 @@ class ProjectBrowserInstallerUiTest extends WebDriverTestBase {
     $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');
-    $this->assertSame('✓ Cream cheese on a bagel is Installed', $installed_action->getText());
+    $assert_session->waitForText('Cream cheese on a bagel is Installed');
+    $this->assertSame('Cream cheese on a bagel is Installed', $installed_action->getText());
+
   }
 
   /**
@@ -273,8 +274,8 @@ class ProjectBrowserInstallerUiTest extends WebDriverTestBase {
     $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');
-    $this->assertSame('✓ Cream cheese on a bagel is Installed', $installed_action->getText());
+    $assert_session->waitForText('Cream cheese on a bagel is Installed');
+    $this->assertSame('Cream cheese on a bagel is Installed', $installed_action->getText());
   }
 
   /**
@@ -318,7 +319,7 @@ class ProjectBrowserInstallerUiTest extends WebDriverTestBase {
     $installed_action = $assert_session->waitForElementVisible('css', "$cream_cheese_module_selector .project_status-indicator", 30000);
     $this->assertNotEmpty($installed_action);
     $installed_action = $installed_action->waitFor(30, function ($button) {
-      return $button->getText() === '✓ Cream cheese on a bagel is Installed';
+      return $button->getText() === 'Cream cheese on a bagel is Installed';
     });
     $this->assertTrue($installed_action);
   }
@@ -392,13 +393,13 @@ class ProjectBrowserInstallerUiTest extends WebDriverTestBase {
 
     $installed_action = $assert_session->waitForElementVisible('css', "$cream_cheese_module_selector .project_status-indicator", 30000);
     $installed_action = $installed_action->waitFor(30, function ($button) {
-      return $button->getText() === '✓ Cream cheese on a bagel is Installed';
+      return $button->getText() === 'Cream cheese on a bagel is Installed';
     });
     $this->assertTrue($installed_action);
 
     $installed_action = $assert_session->waitForElementVisible('css', "$kangaroo_module_selector .project_status-indicator", 30000);
     $installed_action = $installed_action->waitFor(30, function ($button) {
-      return $button->getText() === '✓ Kangaroo is Installed';
+      return $button->getText() === 'Kangaroo is Installed';
     });
     $this->assertTrue($installed_action);