Slot aria attributes (#1296)

* Fix acessability issue

* Additionally adapted the test

* Added more accessability tests

* Updated the testing documentation

to take the fact that accessability checks cover only
rendered content into account

---------

Co-authored-by: Dominikus Hellgartner <dominikus.hellgartner@gmail.com>

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>

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'}

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 () => {

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>
 

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();
   });
 });