First <sl-option> in <sl-select> is still highlighted when disabled

[re1]

Describe the bug

In an <sl-select>, the first <sl-option> element will still be highlighted / focused if it is disabled through the disabled attribute.

With its styling being the same as an enabled option while in focus, the end user is unable to distinguish it from an enabled option without navigating to a different option.

The expected behavior, in my opinion, would be to focus the first enabled option instead.
I want to highlight that in it is not possible to focus disabled options in standard HTML (Chrome, Firefox), and that the first enabled option is selected by default.

To Reproduce

Steps to reproduce the behavior:

1. Disable the first <sl-option> in an <sl-select> (see Demo)
2. Click on the <sl-select> input
3. See the first option highlighted

Demo

Adapted from an example in the docs: https://codepen.io/re1/pen/wBwjBLb.

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/shoelace.js"></script>

<sl-select label="Select one">
  <sl-option value="option-1" disabled>Option 1</sl-option>
  <sl-option value="option-2" disabled>Option 2</sl-option>
  <sl-option value="option-3">Option 3</sl-option>
</sl-select>

Screenshots

The first option is highlighted while being disabled. It is not possible to select it, it shows the disabled icon, and it is styled correctly when not highlighted.

Browser / OS

• OS: Linux
• Browser: Chromium, Firefox (likely all browsers)
• Browser version: 131.0.6778.204, 134.0b10

Additional information

A colleague reported this as a bug in our application, stating the behavior as "unexpected" and "confusing". They also suggested that the first enabled option should be highlighted instead. I asked on Discord about this and was told to create an issue to discuss this.