diff --git a/docs/resources/contributing.md b/docs/resources/contributing.md
index 4f2acfe6..a352d894 100644
--- a/docs/resources/contributing.md
+++ b/docs/resources/contributing.md
@@ -369,7 +369,7 @@ This will render the icons instantly whereas the default library will fetch them
 What to test for a given component:
 
 - Start with a simple test that checks that the default version of the component still renders.
-- Add at least one accessibility test:
+- Add at least one accessibility test (The accessability check only covers the parts of the DOM which are currently visible and rendered. Depending on the component, more than one accessability test is required to cover all scenarios.):
 
 ```ts
 const myComponent = await fixture<SlAlert>(html`<sl-my-component>SomeContent</sl-my-component>`);
diff --git a/src/components/details/details.test.ts b/src/components/details/details.test.ts
index 240712ea..b4a11388 100644
--- a/src/components/details/details.test.ts
+++ b/src/components/details/details.test.ts
@@ -6,6 +6,20 @@ import type SlHideEvent from '../../events/sl-hide';
 import type SlShowEvent from '../../events/sl-show';
 
 describe('<sl-details>', () => {
+  describe('accessability', () => {
+    it('should be accessible when closed', async () => {
+      const details = await fixture<SlDetails>(html`<sl-details summary="Test"> Test text </sl-details>`);
+
+      await expect(details).to.be.accessible();
+    });
+
+    it('should be accessible when open', async () => {
+      const details = await fixture<SlDetails>(html`<sl-details open summary="Test">Test text</sl-details>`);
+
+      await expect(details).to.be.accessible();
+    });
+  });
+
   it('should be visible with the open attribute', async () => {
     const el = await fixture<SlDetails>(html`
       <sl-details open>
diff --git a/src/components/details/details.ts b/src/components/details/details.ts
index 9f65c9c7..6ed06fb2 100644
--- a/src/components/details/details.ts
+++ b/src/components/details/details.ts
@@ -174,7 +174,6 @@ export default class SlDetails extends ShoelaceElement {
           part="header"
           id="header"
           class="details__header"
-          role="button"
           aria-expanded=${this.open ? 'true' : 'false'}
           aria-controls="content"
           aria-disabled=${this.disabled ? 'true' : 'false'}
diff --git a/src/components/select/select.test.ts b/src/components/select/select.test.ts
index 6976fc86..bcaefeb0 100644
--- a/src/components/select/select.test.ts
+++ b/src/components/select/select.test.ts
@@ -8,15 +8,31 @@ import type SlOption from '../option/option';
 import type SlSelect from './select';
 
 describe('<sl-select>', () => {
-  it('should pass accessibility tests', async () => {
-    const el = await fixture<SlSelect>(html`
-      <sl-select label="Select one">
-        <sl-option value="option-1">Option 1</sl-option>
-        <sl-option value="option-2">Option 2</sl-option>
-        <sl-option value="option-3">Option 3</sl-option>
-      </sl-select>
-    `);
-    await expect(el).to.be.accessible();
+  describe('accessability', () => {
+    it('should pass accessibility tests when closed', async () => {
+      const select = await fixture<SlSelect>(html`
+        <sl-select label="Select one">
+          <sl-option value="option-1">Option 1</sl-option>
+          <sl-option value="option-2">Option 2</sl-option>
+          <sl-option value="option-3">Option 3</sl-option>
+        </sl-select>
+      `);
+      await expect(select).to.be.accessible();
+    });
+
+    it('should pass accessibility tests when open', async () => {
+      const select = await fixture<SlSelect>(html`
+        <sl-select label="Select one">
+          <sl-option value="option-1">Option 1</sl-option>
+          <sl-option value="option-2">Option 2</sl-option>
+          <sl-option value="option-3">Option 3</sl-option>
+        </sl-select>
+      `);
+
+      await select.show();
+
+      await expect(select).to.be.accessible();
+    });
   });
 
   it('should be disabled with the disabled attribute', async () => {
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index a098fe4c..dc172379 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -821,7 +821,7 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
               </slot>
             </div>
 
-            <slot
+            <div
               id="listbox"
               role="listbox"
               aria-expanded=${this.open ? 'true' : 'false'}
@@ -832,7 +832,9 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
               tabindex="-1"
               @mouseup=${this.handleOptionClick}
               @slotchange=${this.handleDefaultSlotChange}
-            ></slot>
+            >
+              <slot></slot>
+            </div>
           </sl-popup>
         </div>
 
diff --git a/src/components/split-panel/split-panel.test.ts b/src/components/split-panel/split-panel.test.ts
index 3798bce6..e6150886 100644
--- a/src/components/split-panel/split-panel.test.ts
+++ b/src/components/split-panel/split-panel.test.ts
@@ -2,8 +2,17 @@ import { expect, fixture, html } from '@open-wc/testing';
 
 describe('<sl-split-panel>', () => {
   it('should render a component', async () => {
-    const el = await fixture(html` <sl-split-panel></sl-split-panel> `);
+    const splitPanel = await fixture(html` <sl-split-panel></sl-split-panel> `);
 
-    expect(el).to.exist;
+    expect(splitPanel).to.exist;
+  });
+
+  it('should be accessible', async () => {
+    const splitPanel = await fixture(html`<sl-split-panel>
+      <div slot="start">Start</div>
+      <div slot="end">End</div>
+    </sl-split-panel>`);
+
+    await expect(splitPanel).to.be.accessible();
   });
 });