Skip to content

Commit

Permalink
Update Button v20 CHANGELOG.md (#1920)
Browse files Browse the repository at this point in the history
* Update CHANGELOG.md

* Update CHANGELOG.md

* with changeset

---------

Co-authored-by: brooke <[email protected]>
  • Loading branch information
TheSonOfThomp and bruugey authored Aug 11, 2023
1 parent 6238a68 commit db01472
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 1 deletion.
5 changes: 5 additions & 0 deletions .changeset/smooth-cobras-mix.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@leafygreen-ui/button': patch
---

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
23 changes: 22 additions & 1 deletion packages/button/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,28 @@

### Major Changes

- 1cff328a3: No longer sets `pointer-events: "none"` when Button components are disabled.
- 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.

This change was made to ensure that:

1. Disabled buttons are still focusable to users when navigating via the `Tab` key, and
2. Disabled buttons are valid triggers for a `Tooltip`.

For more on `aria-disabled` see the [documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)

#### Migration guide

Functionally, migration from v19 to v20 should be seamless, however there may be unit/integration/e2e tests that relied on this behavior.

##### Jest/RTL

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.

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")`.

##### Cypress

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');`

### Patch Changes

Expand Down

0 comments on commit db01472

Please sign in to comment.