From e8b31b6e21fc59e69abcc36723ebc9faea1ad654 Mon Sep 17 00:00:00 2001
From: Karthick <karthickd.tech@gmail.com>
Date: Tue, 28 Jul 2026 18:29:59 +0530
Subject: [PATCH] fix(oas3): stop nesting select inside label in Servers
 component

The Servers dropdown wrapped a <select> inside a <label for="servers">,
producing invalid/redundant markup (an explicit for/id association plus
an implicit wrapping association) that some screen readers handle
inconsistently. Un-nest the elements and give the select an aria-label
instead, following the same pattern already used by ContentType for a
select whose visible caption lives in a sibling element.

Fixes #10957
---
 src/core/plugins/oas3/components/servers.jsx  | 33 +++++++++----------
 src/style/_servers.scss                       | 10 +++---
 .../e2e/features/oas3-multiple-servers.cy.js  | 12 +++----
 test/e2e-cypress/e2e/features/urls.cy.js      |  4 +--
 4 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/src/core/plugins/oas3/components/servers.jsx b/src/core/plugins/oas3/components/servers.jsx
index 859f58fb6be..ee0fa09952e 100644
--- a/src/core/plugins/oas3/components/servers.jsx
+++ b/src/core/plugins/oas3/components/servers.jsx
@@ -71,23 +71,22 @@ const Servers = ({
 
   return (
     <div className="servers">
-      <label htmlFor="servers">
-        <select
-          onChange={handleServerChange}
-          value={currentServer}
-          id="servers"
-        >
-          {servers
-            .valueSeq()
-            .map((server) => (
-              <option value={server.get("url")} key={server.get("url")}>
-                {server.get("url")}
-                {server.get("description") && ` - ${server.get("description")}`}
-              </option>
-            ))
-            .toArray()}
-        </select>
-      </label>
+      <select
+        aria-label="Servers"
+        onChange={handleServerChange}
+        value={currentServer}
+        id="servers"
+      >
+        {servers
+          .valueSeq()
+          .map((server) => (
+            <option value={server.get("url")} key={server.get("url")}>
+              {server.get("url")}
+              {server.get("description") && ` - ${server.get("description")}`}
+            </option>
+          ))
+          .toArray()}
+      </select>
       {shouldShowVariableUI && (
         <div>
           <div className={"computed-url"}>
diff --git a/src/style/_servers.scss b/src/style/_servers.scss
index 5f9b169e098..648741c3ca0 100644
--- a/src/style/_servers.scss
+++ b/src/style/_servers.scss
@@ -2,18 +2,16 @@
 @use "type";
 
 .servers {
-  > label {
+  > select {
     font-size: 12px;
 
     margin: -20px 15px 0 0;
 
     @include type.text_headline();
 
-    select {
-      min-width: 130px;
-      max-width: 100%;
-      width: 100%;
-    }
+    min-width: 130px;
+    max-width: 100%;
+    width: 100%;
   }
 
   h4.message {
diff --git a/test/e2e-cypress/e2e/features/oas3-multiple-servers.cy.js b/test/e2e-cypress/e2e/features/oas3-multiple-servers.cy.js
index de4cb39f99d..ad573499606 100644
--- a/test/e2e-cypress/e2e/features/oas3-multiple-servers.cy.js
+++ b/test/e2e-cypress/e2e/features/oas3-multiple-servers.cy.js
@@ -5,7 +5,7 @@
 describe("OpenAPI 3.0 Multiple Servers", () => {
   it("should render and execute for server '/test-url-1'", () => {
     cy.visit("/?url=/documents/features/oas3-multiple-servers.yaml")
-      .get(".scheme-container .schemes .servers label > select")
+      .get(".scheme-container .schemes .servers select")
       .select("/test-url-1")
       .get("#operations-default-get_")
       .click()
@@ -20,7 +20,7 @@ describe("OpenAPI 3.0 Multiple Servers", () => {
   })
   it("should render and execute for server '/test-url-2'", () => {
     cy.visit("/?url=/documents/features/oas3-multiple-servers.yaml")
-      .get(".scheme-container .schemes .servers label > select")
+      .get(".scheme-container .schemes .servers select")
       .select("/test-url-2")
       .get("#operations-default-get_")
       .click()
@@ -35,7 +35,7 @@ describe("OpenAPI 3.0 Multiple Servers", () => {
   })
   it("should render and execute for server '/test-url-1' after sequence: select '/test-url-2' -> Try-It-Out -> select '/test-url-1'", () => {
     cy.visit("/?url=/documents/features/oas3-multiple-servers.yaml")
-      .get(".scheme-container .schemes .servers label > select")
+      .get(".scheme-container .schemes .servers select")
       .select("/test-url-2")
       .get("#operations-default-get_")
       .click()
@@ -43,7 +43,7 @@ describe("OpenAPI 3.0 Multiple Servers", () => {
       .get(".try-out__btn")
       .click()
       // Select a different server
-      .get(".scheme-container .schemes .servers label > select")
+      .get(".scheme-container .schemes .servers select")
       .select("/test-url-1")
       // Execute
       .get(".execute.opblock-control__btn")
@@ -53,10 +53,10 @@ describe("OpenAPI 3.0 Multiple Servers", () => {
   })
   it("should render and execute for server '/test-url-switch-1' after changing api definition", () => {
     cy.visit("/?url=/documents/features/oas3-multiple-servers.yaml")
-      .get(".scheme-container .schemes .servers label > select")
+      .get(".scheme-container .schemes .servers select")
       .select("/test-url-2")
     cy.visit("/?url=/documents/features/oas3-multiple-servers-switch.yaml")
-      .get(".scheme-container .schemes .servers label > select")
+      .get(".scheme-container .schemes .servers select")
       .select("/test-url-switch-2")
       .get("#operations-default-get_")
       .click()
diff --git a/test/e2e-cypress/e2e/features/urls.cy.js b/test/e2e-cypress/e2e/features/urls.cy.js
index b1e37f53995..66279d4e540 100644
--- a/test/e2e-cypress/e2e/features/urls.cy.js
+++ b/test/e2e-cypress/e2e/features/urls.cy.js
@@ -58,7 +58,7 @@ describe("urls with server variables", () => {
       .should("have.text", "basePath")
       .get("input")
       .should("have.value", "/oneFirstUrl")
-      .get(".servers > label > select")
+      .get(".servers > select")
       .eq(0)
       .select(1)
       .get("input")
@@ -96,7 +96,7 @@ describe("urls with server variables", () => {
   })
   it("should change server variables, then select second url, and maintain server variables index", () => {
     cy.visit("/?configUrl=/configs/urls-server-variables.yaml")
-      .get(".servers > label >select")
+      .get(".servers > select")
       .eq(0)
       .select(1)
       .get("input")