🐆

package.json

@@ -452,7 +452,7 @@
     "@types/mocha": "^10.0.7",
     "@types/sinon": "^17.0.3",
     "@web/dev-server-esbuild": "^1.0.2",
-    "@web/test-runner": "^0.18.3",
+    "@web/test-runner": "^0.19.0",
     "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-playwright": "^0.11.0",
     "@webcomponents/scoped-custom-element-registry": "^0.0.9",

packages/components/combobox/src/combobox.ts

@@ -66,8 +66,8 @@ export class Combobox<T = unknown> extends FormControlMixin(ScopedElementsMixin(
     };
   }
 
-  /** @internal */
-  static override shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+  // /** @internal */
+  // static override shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
 
   /** @internal */
   static override styles: CSSResultGroup = styles;
@@ -339,6 +339,10 @@ export class Combobox<T = unknown> extends FormControlMixin(ScopedElementsMixin(
     `;
   }
 
+  override focus(options?: FocusOptions): void {
+    this.input?.focus(options);
+  }
+
   #onBeforeToggle(event: ToggleEvent): void {
     this.input.setAttribute('aria-expanded', event.newState === 'open' ? 'true' : 'false');
 

packages/components/select/src/select.spec.ts

@@ -40,7 +40,7 @@ describe('sl-select', () => {
     });
 
     it('should have a tabindex of 0', () => {
-      expect(el).to.have.attribute('tabindex', '0');
+      expect(el.querySelector('sl-select-button')).to.have.attribute('tabindex', '0');
     });
 
     it('should not be disabled', () => {
@@ -246,8 +246,7 @@ describe('sl-select', () => {
     });
 
     it('should have a tabindex of -1', () => {
-      expect(el).to.have.attribute('tabindex', '-1');
-      expect(el.querySelector<SelectButton>('sl-select-button')).to.have.attribute('tabindex', '-1');
+      expect(el.querySelector('sl-select-button')).to.have.attribute('tabindex', '-1');
     });
 
     it('should not toggle the expanded state when clicked', async () => {

packages/components/select/src/select.ts

@@ -40,9 +40,6 @@ export class Select<T = unknown> extends FormControlMixin(ScopedElementsMixin(Li
     };
   }
 
-  /** @internal */
-  static override shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
-
   /** @internal */
   static override styles: CSSResultGroup = styles;
 
@@ -154,10 +151,6 @@ export class Select<T = unknown> extends FormControlMixin(ScopedElementsMixin(Li
 
     // Listen for i18n updates and update the validation message
     this.#events.listen(window, LOCALE_STATUS_EVENT, this.#updateValueAndValidity);
-
-    if (!this.hasAttribute('tabindex')) {
-      this.tabIndex = this.disabled ? -1 : 0;
-    }
   }
 
   /** @ignore Stores the initial state of the select */
@@ -186,7 +179,6 @@ export class Select<T = unknown> extends FormControlMixin(ScopedElementsMixin(Li
     }
 
     if (changes.has('disabled')) {
-      this.tabIndex = this.disabled ? -1 : 0;
       this.button.disabled = this.disabled;
     }
 
@@ -243,6 +235,10 @@ export class Select<T = unknown> extends FormControlMixin(ScopedElementsMixin(Li
     `;
   }
 
+  override focus(options?: FocusOptions): void {
+    this.button?.focus(options);
+  }
+
   #onBeforetoggle({ newState }: ToggleEvent): void {
     if (newState === 'open') {
       this.button.setAttribute('aria-expanded', 'true');

web-test-runner.config.mjs

@@ -2,7 +2,6 @@
 import { esbuildPlugin } from '@web/dev-server-esbuild';
 import { a11ySnapshotPlugin } from '@web/test-runner-commands/plugins';
 import { playwrightLauncher } from '@web/test-runner-playwright';
-import { log } from 'console';
 import { readFile } from 'fs/promises';
 import { env } from 'node:process';