fix disabled screen reader bug; closes #658

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 `<sl-format-bytes>` has changed to `byte | bit` instead of `bytes | bits`
 - Fixed a bug that caused `<sl-progress-ring>` to render the wrong size when `--track-width` was increased [#656](https://github.com/shoelace-style/shoelace/issues/656)
+- Fixed a bug that allowed `<sl-details>` 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 `<sl-dialog>` and `<sl-drawer>` by making the title an `<h2>` and adding a label to the close button
 - Refactored `<sl-format-byte>` to use `Intl.NumberFormat` so it supports localization

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') {