From e8e6bca16c620b88db4e68e3b32235417d123b3c Mon Sep 17 00:00:00 2001
From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com>
Date: Mon, 6 Jul 2026 13:31:54 +0200
Subject: [PATCH] Consistently use `cursor: not-allowed` for disabled buttons
 and dropdown items (#35171)

* consistently use cursor: not-allowed for disabled buttons and dropdown items

* fix: exclude anchor .btn.disabled from pointer-events override

* also handle li.dropdown-item and narrow fieldset selector to button.btn

GitOrigin-RevId: d94974370952bbefe74d971d39fa99802a6c3130
---
 .../frontend/stylesheets/components/button.scss   | 10 ++++++++++
 .../stylesheets/components/dropdown-menu.scss     | 15 +++++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/services/web/frontend/stylesheets/components/button.scss b/services/web/frontend/stylesheets/components/button.scss
index cdb00dd878..8bdd49256c 100644
--- a/services/web/frontend/stylesheets/components/button.scss
+++ b/services/web/frontend/stylesheets/components/button.scss
@@ -237,6 +237,16 @@
   }
 }
 
+// Show a not-allowed cursor on natively disabled buttons. Bootstrap sets
+// pointer-events: none, which hides the cursor, so re-enable it; clicks are
+// still blocked by the native disabled attribute. Excludes .btn.disabled on
+// anchors, which rely on pointer-events: none for multi-click protection.
+button.btn:disabled,
+fieldset:disabled button.btn {
+  pointer-events: auto;
+  cursor: not-allowed;
+}
+
 // Link buttons
 // -------------------------
 
diff --git a/services/web/frontend/stylesheets/components/dropdown-menu.scss b/services/web/frontend/stylesheets/components/dropdown-menu.scss
index 72396b7a64..4b7c95b71c 100644
--- a/services/web/frontend/stylesheets/components/dropdown-menu.scss
+++ b/services/web/frontend/stylesheets/components/dropdown-menu.scss
@@ -219,6 +219,21 @@ $dropdown-item-min-height: 36px;
   width: 20px;
 }
 
+// Bootstrap sets pointer-events: none on disabled items, so set the cursor on
+// the parent <li> where pointer events still land.
+.dropdown-menu li:has(> .dropdown-item.disabled),
+.dropdown-menu li:has(> .dropdown-item[aria-disabled='true']) {
+  cursor: not-allowed;
+}
+
+// When the dropdown item itself is rendered as an <li> (e.g. Dropdown.Item as="li"),
+// pointer-events: none is on the <li> itself so re-enable it there.
+.dropdown-menu li.dropdown-item.disabled,
+.dropdown-menu li.dropdown-item[aria-disabled='true'] {
+  pointer-events: auto;
+  cursor: not-allowed;
+}
+
 // description text should look disabled when the dropdown item is disabled
 .dropdown-item.disabled .dropdown-item-description,
 .dropdown-item[aria-disabled='true'] .dropdown-item-description {