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
This commit is contained in:
Rebeka Dekany
2026-09-17 11:18:02 +00:00
committed by Copybot
parent 70a9069015
commit e8e6bca16c
2 changed files with 25 additions and 0 deletions
@@ -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
// -------------------------
@@ -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 {