fix: PaMessagesPage accessibility bug (#566)

mbta · Nov 18, 2024 · ce0f912 · ce0f912
1 parent d63e48d
commit ce0f912
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/assets/css/dashboard/pa-messages-page.scss b/assets/css/dashboard/pa-messages-page.scss
@@ -92,6 +92,11 @@
 
   &__message {
     width: 586px;
+
+    a {
+      color: $text-primary;
+      text-decoration: none;
+    }
   }
 
   &__interval {
@@ -102,11 +107,6 @@
     width: 110px;
   }
 
-  &__text {
-    color: $text-primary;
-    text-decoration: none;
-  }
-
   &__start-end {
     width: 200px;
     padding-right: 0px;

diff --git a/assets/js/components/Dashboard/KebabMenu.tsx b/assets/js/components/Dashboard/KebabMenu.tsx
@@ -72,7 +72,10 @@ const KebabMenu = ({ children, tooltipText }: Props) => {
     >
       <Dropdown.Toggle
         as={CustomToggle}
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={(e) => {
+          e.stopPropagation();
+          setIsOpen(!isOpen);
+        }}
         tooltipText={tooltipText}
       />
       <Dropdown.Menu className="kebab-menu-dropdown__menu">

diff --git a/assets/js/components/Dashboard/PaMessagesPage.tsx b/assets/js/components/Dashboard/PaMessagesPage.tsx
@@ -345,7 +345,14 @@ const PaMessageRow: ComponentType<PaMessageRowProps> = ({
 
   return (
     <tr onClick={() => navigate(`/pa-messages/${paMessage.id}/edit`)}>
-      <td className="pa-message-table__message">{paMessage.visual_text}</td>
+      <td className="pa-message-table__message">
+        <a
+          href={`/pa-messages/${paMessage.id}/edit`}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {paMessage.visual_text}
+        </a>
+      </td>
       <td className="pa-message-table__interval">
         {paMessage.interval_in_minutes} min
       </td>
@@ -379,10 +386,7 @@ const PaMessageRow: ComponentType<PaMessageRowProps> = ({
               </div>
             </div>
           </td>
-          <td
-            onClick={(e) => e.stopPropagation()}
-            className="pa-message-table__kebab"
-          >
+          <td className="pa-message-table__kebab">
             <KebabMenu>
               <Dropdown.Item
                 className="kebab-menu-dropdown__item"