diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 32d63001..cbe5cdac 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis - 🚨 BREAKING: the `unit` property of `` has changed to `byte | bit` instead of `bytes | bits` - Fixed a bug that caused `` to render the wrong size when `--track-width` was increased [#656](https://github.com/shoelace-style/shoelace/issues/656) +- Fixed a bug that allowed `` to open and close when disabled using a screen reader [#658](https://github.com/shoelace-style/shoelace/issues/658) - Implemented stricter linting to improve consistency and reduce errors, which resulted in many small refactors throughout the codebase [#647](https://github.com/shoelace-style/shoelace/pull/647) - Improved accessibility of `` and `` by making the title an `

` and adding a label to the close button - Refactored `` to use `Intl.NumberFormat` so it supports localization diff --git a/src/components/details/details.ts b/src/components/details/details.ts index 5bec07cd..7a916074 100644 --- a/src/components/details/details.ts +++ b/src/components/details/details.ts @@ -55,7 +55,7 @@ export default class SlDetails extends LitElement { /** Shows the details. */ async show() { - if (this.open) { + if (this.open || this.disabled) { return undefined; } @@ -65,7 +65,7 @@ export default class SlDetails extends LitElement { /** Hides the details */ async hide() { - if (!this.open) { + if (!this.open || this.disabled) { return undefined; } @@ -73,17 +73,14 @@ export default class SlDetails extends LitElement { return waitForEvent(this, 'sl-after-hide'); } - toggleOpen() { - if (this.open) { - this.hide(); - } else { - this.show(); - } - } - handleSummaryClick() { if (!this.disabled) { - this.toggleOpen(); + if (this.open) { + this.hide(); + } else { + this.show(); + } + this.header.focus(); } } @@ -91,7 +88,12 @@ export default class SlDetails extends LitElement { handleSummaryKeyDown(event: KeyboardEvent) { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); - this.toggleOpen(); + + if (this.open) { + this.hide(); + } else { + this.show(); + } } if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {