Accessibility: Servers component nests <select> inside <label>

[piyushtripathi9424]

Describe the bug

The OpenAPI Servers component renders a <select> element nested inside a <label>:

<div class="servers">
  <label for="servers">
    <select id="servers">
      <option value="https://demo.backstage.io">https://demo.backstage.io</option>
    </select>
  </label>
</div>

This results in invalid semantic HTML and may cause accessibility issues with some screen readers.

Expected behavior

The <label> and <select> should be separate elements, for example:

<label for="servers">Servers</label>
<select id="servers">
  <option value="https://demo.backstage.io">https://demo.backstage.io</option>
</select>

This preserves the association between the label and the control while using a more conventional semantic structure.

To reproduce

1. Open any Swagger UI instance that displays multiple or single server entries.
2. Inspect the "Servers" dropdown in the browser's developer tools.
3. Observe that the <select> element is rendered as a child of the <label> element.

Additional context

The markup originates from the Servers component located at:

src/core/plugins/oas3/components/servers.jsx

I discovered this while investigating an upstream issue reported in the Backstage project, which embeds Swagger UI. The Backstage maintainers confirmed that this behavior originates from Swagger UI and suggested reporting it upstream.

Related Backstage issue:
backstage/backstage#34696