Skip to content

Commit db01472

Browse files
Update Button v20 CHANGELOG.md (#1920)
* Update CHANGELOG.md * Update CHANGELOG.md * with changeset --------- Co-authored-by: brooke <[email protected]>
1 parent 6238a68 commit db01472

File tree

2 files changed

+27
-1
lines changed

2 files changed

+27
-1
lines changed

.changeset/smooth-cobras-mix.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@leafygreen-ui/button': patch
3+
---
4+
5+
Retroactively updates changeset notes around reason to update Button from using `disabled` to `aria-disabled` under the hood. See details at version 20.0.0

packages/button/CHANGELOG.md

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,28 @@
192192

193193
### Major Changes
194194

195-
- 1cff328a3: No longer sets `pointer-events: "none"` when Button components are disabled.
195+
- 1cff328a3: Disabled buttons no longer render the `disabled` attribute, but rely on `aria-disabled`. They also no longer set `pointer-events: "none"` in their styles. `onClick` events are explicitly prevented within the component to maintain functionality.
196+
197+
This change was made to ensure that:
198+
199+
1. Disabled buttons are still focusable to users when navigating via the `Tab` key, and
200+
2. Disabled buttons are valid triggers for a `Tooltip`.
201+
202+
For more on `aria-disabled` see the [documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)
203+
204+
#### Migration guide
205+
206+
Functionally, migration from v19 to v20 should be seamless, however there may be unit/integration/e2e tests that relied on this behavior.
207+
208+
##### Jest/RTL
209+
210+
Generally, only this repo should need to test that the button has a specific attribute. If possible, we recommend changing unit tests to check that some event was or was not called.
211+
212+
However there are cases where this still needs to be tested. To change this, replace any `expect(button).toBeDisabled()` with an explicit check for `expect(button).toHaveAttribute("aria-disabled", "true")`.
213+
214+
##### Cypress
215+
216+
Similarly to unit tests, you should generally test functionality, not implementation details. However, to test this in Cypress replace any `cy.get(button).should('be.disabled');` checks with `cy.get(button).invoke('attr', 'aria-disabled').should('eq', 'true');`
196217

197218
### Patch Changes
198219

0 commit comments

Comments
 (0)