From 1e4ad05d6ab7be3dc83c8818f552e0dce2fb274f Mon Sep 17 00:00:00 2001
From: Hashim1999164 <sardarhashim30@gmail.com>
Date: Thu, 23 Jul 2026 21:54:16 +0500
Subject: [PATCH] docs: hide placeholder select options from assistive tech

Add aria-hidden="true" to default placeholder options in form docs so screen readers do not vocalize hint text when focus enters a select.

Fixes #37614
---
 js/tests/visual/floating-label.html           | 36 +++++++++----------
 .../examples/cheatsheet-rtl/index.astro       |  8 ++---
 .../assets/examples/cheatsheet/index.astro    |  8 ++---
 .../content/docs/forms/floating-labels.mdx    |  6 ++--
 site/src/content/docs/forms/input-group.mdx   |  8 ++---
 site/src/content/docs/forms/layout.mdx        |  8 ++---
 site/src/content/docs/forms/select.mdx        | 12 +++----
 site/src/content/docs/forms/validation.mdx    |  8 ++---
 8 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/js/tests/visual/floating-label.html b/js/tests/visual/floating-label.html
index cfd40664c436..6f64ab29941e 100644
--- a/js/tests/visual/floating-label.html
+++ b/js/tests/visual/floating-label.html
@@ -75,7 +75,7 @@
       </div>
       <div class="form-floating">
         <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
-          <option selected>Open this select menu</option>
+          <option selected aria-hidden="true">Open this select menu</option>
           <option value="1">One</option>
           <option value="2">Two</option>
           <option value="3">Three</option>
@@ -84,7 +84,7 @@
       </div>
       <div class="form-floating">
         <select class="form-select is-invalid" id="floatingSelect1" aria-label="Floating label select example">
-          <option selected>Open this select menu</option>
+          <option selected aria-hidden="true">Open this select menu</option>
           <option value="1">One</option>
           <option value="2">Two</option>
           <option value="3">Three</option>
@@ -93,7 +93,7 @@
       </div>
       <div class="form-floating">
         <select class="form-select" id="floatingSelect2" aria-label="Floating label select example">
-          <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
+          <option selected aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
           <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
           <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
           <option value="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
@@ -102,7 +102,7 @@
       </div>
       <div class="form-floating">
         <select class="form-select is-invalid" id="floatingSelect3" aria-label="Floating label select example">
-          <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
+          <option selected aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
           <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
           <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
           <option value="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
@@ -123,7 +123,7 @@
       </div>
       <div class="form-floating">
         <select class="form-select" id="floatingSelectDisabled" aria-label="Floating label disabled select example" disabled>
-          <option selected>Open this select menu</option>
+          <option selected aria-hidden="true">Open this select menu</option>
           <option value="1">One</option>
           <option value="2">Two</option>
           <option value="3">Three</option>
@@ -144,7 +144,7 @@
       </div>
       <div class="form-floating">
         <select class="form-select" id="floatingSelectDisabled1" aria-label="Floating label disabled select example" disabled>
-          <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
+          <option selected aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
           <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
           <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
           <option value="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
@@ -170,7 +170,7 @@
       <!--Compare form-select rendering depending on the size-->
       <div class="form-floating">
         <select class="form-select" id="floatingSelectRegular" aria-label="Floating label select example">
-          <option selected="">Open this select menu</option>
+          <option selected="" aria-hidden="true">Open this select menu</option>
           <option value="1">One</option>
           <option value="2">Two</option>
           <option value="3">Three</option>
@@ -179,7 +179,7 @@
       </div>
       <div class="form-floating">
         <select class="form-select form-select-sm" id="floatingSelectSmall" aria-label="Floating label select example">
-          <option selected="">Open this select menu</option>
+          <option selected="" aria-hidden="true">Open this select menu</option>
           <option value="1">One</option>
           <option value="2">Two</option>
           <option value="3">Three</option>
@@ -188,7 +188,7 @@
       </div>
       <div class="form-floating">
         <select class="form-select form-select-lg" id="floatingSelectLarge" aria-label="Floating label select example">
-          <option selected="">Open this select menu</option>
+          <option selected="" aria-hidden="true">Open this select menu</option>
           <option value="1">One</option>
           <option value="2">Two</option>
           <option value="3">Three</option>
@@ -265,7 +265,7 @@
         </div>
         <div class="form-floating">
           <select class="form-select" id="floatingSelect4" aria-label="Floating label select example">
-            <option selected>Open this select menu</option>
+            <option selected aria-hidden="true">Open this select menu</option>
             <option value="1">One</option>
             <option value="2">Two</option>
             <option value="3">Three</option>
@@ -274,7 +274,7 @@
         </div>
         <div class="form-floating">
           <select class="form-select is-invalid" id="floatingSelect5" aria-label="Floating label select example">
-            <option selected>Open this select menu</option>
+            <option selected aria-hidden="true">Open this select menu</option>
             <option value="1">One</option>
             <option value="2">Two</option>
             <option value="3">Three</option>
@@ -283,7 +283,7 @@
         </div>
         <div class="form-floating">
           <select class="form-select" id="floatingSelect6" aria-label="Floating label select example">
-            <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
+            <option selected aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
             <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
             <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
             <option value="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
@@ -292,7 +292,7 @@
         </div>
         <div class="form-floating">
           <select class="form-select is-invalid" id="floatingSelect7" aria-label="Floating label select example">
-            <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
+            <option selected aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
             <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
             <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
             <option value="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
@@ -313,7 +313,7 @@
         </div>
         <div class="form-floating">
           <select class="form-select" id="floatingSelectDisabled2" aria-label="Floating label disabled select example" disabled>
-            <option selected>Open this select menu</option>
+            <option selected aria-hidden="true">Open this select menu</option>
             <option value="1">One</option>
             <option value="2">Two</option>
             <option value="3">Three</option>
@@ -334,7 +334,7 @@
         </div>
         <div class="form-floating">
           <select class="form-select" id="floatingSelectDisabled3" aria-label="Floating label disabled select example" disabled>
-            <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
+            <option selected aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
             <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
             <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
             <option value="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
@@ -360,7 +360,7 @@
         <!--Compare form-select rendering depending on the size-->
         <div class="form-floating">
           <select class="form-select" id="floatingSelectRegularDark" aria-label="Floating label select example">
-            <option selected="">Open this select menu</option>
+            <option selected="" aria-hidden="true">Open this select menu</option>
             <option value="1">One</option>
             <option value="2">Two</option>
             <option value="3">Three</option>
@@ -369,7 +369,7 @@
         </div>
         <div class="form-floating">
           <select class="form-select form-select-sm" id="floatingSelectSmallDark" aria-label="Floating label select example">
-            <option selected="">Open this select menu</option>
+            <option selected="" aria-hidden="true">Open this select menu</option>
             <option value="1">One</option>
             <option value="2">Two</option>
             <option value="3">Three</option>
@@ -378,7 +378,7 @@
         </div>
         <div class="form-floating">
           <select class="form-select form-select-lg" id="floatingSelectLargeDark" aria-label="Floating label select example">
-            <option selected="">Open this select menu</option>
+            <option selected="" aria-hidden="true">Open this select menu</option>
             <option value="1">One</option>
             <option value="2">Two</option>
             <option value="3">Three</option>
diff --git a/site/src/assets/examples/cheatsheet-rtl/index.astro b/site/src/assets/examples/cheatsheet-rtl/index.astro
index 6dd4001fe44e..edcc2f9fa044 100644
--- a/site/src/assets/examples/cheatsheet-rtl/index.astro
+++ b/site/src/assets/examples/cheatsheet-rtl/index.astro
@@ -343,7 +343,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
           <div class="mb-3">
             <label for="exampleSelect" class="form-label">قائمة اختيار</label>
             <select class="form-select" id="exampleSelect">
-              <option selected>افتح قائمة الاختيار هذه</option>
+              <option selected aria-hidden="true">افتح قائمة الاختيار هذه</option>
               <option value="1">واحد</option>
               <option value="2">اثنان</option>
               <option value="3">ثلاثة</option>
@@ -451,7 +451,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
         </div>
         <div class="mb-3">
           <select class="form-select form-select-lg" aria-label=".form-select-lg مثال">
-            <option selected>افتح قائمة الاختيار هذه</option>
+            <option selected aria-hidden="true">افتح قائمة الاختيار هذه</option>
             <option value="1">واحد</option>
             <option value="2">اثنان</option>
             <option value="3">ثلاثة</option>
@@ -468,7 +468,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
         </div>
         <div class="mb-3">
           <select class="form-select form-select-sm" aria-label=".form-select-sm مثال">
-            <option selected>افتح قائمة الاختيار هذه</option>
+            <option selected aria-hidden="true">افتح قائمة الاختيار هذه</option>
             <option value="1">واحد</option>
             <option value="2">اثنان</option>
             <option value="3">ثلاثة</option>
@@ -577,7 +577,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
           <div class="col-md-3">
             <label for="validationServer04" class="form-label">حالة</label>
             <select class="form-select is-invalid" id="validationServer04" required>
-              <option selected disabled value="">اختر...</option>
+              <option selected disabled value="" aria-hidden="true">اختر...</option>
               <option>...</option>
             </select>
             <div class="invalid-feedback">
diff --git a/site/src/assets/examples/cheatsheet/index.astro b/site/src/assets/examples/cheatsheet/index.astro
index 3081df2b9c23..474ea9a5f883 100644
--- a/site/src/assets/examples/cheatsheet/index.astro
+++ b/site/src/assets/examples/cheatsheet/index.astro
@@ -327,7 +327,7 @@ export const body_class = 'bg-body-tertiary'
           <div class="mb-3">
             <label for="exampleSelect" class="form-label">Select menu</label>
             <select class="form-select" id="exampleSelect">
-              <option selected>Open this select menu</option>
+              <option selected aria-hidden="true">Open this select menu</option>
               <option value="1">One</option>
               <option value="2">Two</option>
               <option value="3">Three</option>
@@ -433,7 +433,7 @@ export const body_class = 'bg-body-tertiary'
         </div>
         <div class="mb-3">
           <select class="form-select form-select-lg" aria-label=".form-select-lg example">
-            <option selected>Open this select menu</option>
+            <option selected aria-hidden="true">Open this select menu</option>
             <option value="1">One</option>
             <option value="2">Two</option>
             <option value="3">Three</option>
@@ -449,7 +449,7 @@ export const body_class = 'bg-body-tertiary'
         </div>
         <div class="mb-3">
           <select class="form-select form-select-sm" aria-label=".form-select-sm example">
-            <option selected>Open this select menu</option>
+            <option selected aria-hidden="true">Open this select menu</option>
             <option value="1">One</option>
             <option value="2">Two</option>
             <option value="3">Three</option>
@@ -558,7 +558,7 @@ export const body_class = 'bg-body-tertiary'
           <div class="col-md-3">
             <label for="validationServer04" class="form-label">State</label>
             <select class="form-select is-invalid" id="validationServer04" required>
-              <option selected disabled value="">Choose...</option>
+              <option selected disabled value="" aria-hidden="true">Choose...</option>
               <option>...</option>
             </select>
             <div class="invalid-feedback">
diff --git a/site/src/content/docs/forms/floating-labels.mdx b/site/src/content/docs/forms/floating-labels.mdx
index 65cf762258b9..bf3a8ba2b576 100644
--- a/site/src/content/docs/forms/floating-labels.mdx
+++ b/site/src/content/docs/forms/floating-labels.mdx
@@ -57,7 +57,7 @@ Other than `.form-control`, floating labels are only available on `.form-select`
 
 <Example code={`<div class="form-floating">
     <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
-      <option selected>Open this select menu</option>
+      <option selected aria-hidden="true">Open this select menu</option>
       <option value="1">One</option>
       <option value="2">Two</option>
       <option value="3">Three</option>
@@ -83,7 +83,7 @@ Add the `disabled` boolean attribute on an input, a textarea or a select to give
   </div>
   <div class="form-floating">
     <select class="form-select" id="floatingSelectDisabled" aria-label="Floating label disabled select example" disabled>
-      <option selected>Open this select menu</option>
+      <option selected aria-hidden="true">Open this select menu</option>
       <option value="1">One</option>
       <option value="2">Two</option>
       <option value="3">Three</option>
@@ -143,7 +143,7 @@ When working with the Bootstrap grid system, be sure to place form elements with
     <div class="col-md">
       <div class="form-floating">
         <select class="form-select" id="floatingSelectGrid">
-          <option selected>Open this select menu</option>
+          <option selected aria-hidden="true">Open this select menu</option>
           <option value="1">One</option>
           <option value="2">Two</option>
           <option value="3">Three</option>
diff --git a/site/src/content/docs/forms/input-group.mdx b/site/src/content/docs/forms/input-group.mdx
index a02830a72531..f05407cd90b6 100644
--- a/site/src/content/docs/forms/input-group.mdx
+++ b/site/src/content/docs/forms/input-group.mdx
@@ -239,7 +239,7 @@ Input groups include support for custom selects and custom file inputs. Browser
 <Example code={`<div class="input-group mb-3">
     <label class="input-group-text" for="inputGroupSelect01">Options</label>
     <select class="form-select" id="inputGroupSelect01">
-      <option selected>Choose...</option>
+      <option selected aria-hidden="true">Choose...</option>
       <option value="1">One</option>
       <option value="2">Two</option>
       <option value="3">Three</option>
@@ -248,7 +248,7 @@ Input groups include support for custom selects and custom file inputs. Browser
 
   <div class="input-group mb-3">
     <select class="form-select" id="inputGroupSelect02">
-      <option selected>Choose...</option>
+      <option selected aria-hidden="true">Choose...</option>
       <option value="1">One</option>
       <option value="2">Two</option>
       <option value="3">Three</option>
@@ -259,7 +259,7 @@ Input groups include support for custom selects and custom file inputs. Browser
   <div class="input-group mb-3">
     <button class="btn btn-outline-secondary" type="button">Button</button>
     <select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
-      <option selected>Choose...</option>
+      <option selected aria-hidden="true">Choose...</option>
       <option value="1">One</option>
       <option value="2">Two</option>
       <option value="3">Three</option>
@@ -268,7 +268,7 @@ Input groups include support for custom selects and custom file inputs. Browser
 
   <div class="input-group">
     <select class="form-select" id="inputGroupSelect04" aria-label="Example select with button addon">
-      <option selected>Choose...</option>
+      <option selected aria-hidden="true">Choose...</option>
       <option value="1">One</option>
       <option value="2">Two</option>
       <option value="3">Three</option>
diff --git a/site/src/content/docs/forms/layout.mdx b/site/src/content/docs/forms/layout.mdx
index 04d3bd5a8b58..f8011ac621a6 100644
--- a/site/src/content/docs/forms/layout.mdx
+++ b/site/src/content/docs/forms/layout.mdx
@@ -80,7 +80,7 @@ More complex layouts can also be created with the grid system.
     <div class="col-md-4">
       <label for="inputState" class="form-label">State</label>
       <select id="inputState" class="form-select">
-        <option selected>Choose...</option>
+        <option selected aria-hidden="true">Choose...</option>
         <option>...</option>
       </select>
     </div>
@@ -214,7 +214,7 @@ The example below uses a flexbox utility to vertically center the contents and c
     <div class="col-auto">
       <label class="visually-hidden" for="autoSizingSelect">Preference</label>
       <select class="form-select" id="autoSizingSelect">
-        <option selected>Choose...</option>
+        <option selected aria-hidden="true">Choose...</option>
         <option value="1">One</option>
         <option value="2">Two</option>
         <option value="3">Three</option>
@@ -250,7 +250,7 @@ You can then remix that once again with size-specific column classes.
     <div class="col-sm-3">
       <label class="visually-hidden" for="specificSizeSelect">Preference</label>
       <select class="form-select" id="specificSizeSelect">
-        <option selected>Choose...</option>
+        <option selected aria-hidden="true">Choose...</option>
         <option value="1">One</option>
         <option value="2">Two</option>
         <option value="3">Three</option>
@@ -285,7 +285,7 @@ Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding
     <div class="col-12">
       <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
       <select class="form-select" id="inlineFormSelectPref">
-        <option selected>Choose...</option>
+        <option selected aria-hidden="true">Choose...</option>
         <option value="1">One</option>
         <option value="2">Two</option>
         <option value="3">Three</option>
diff --git a/site/src/content/docs/forms/select.mdx b/site/src/content/docs/forms/select.mdx
index 33790d20bedc..d90d61bd4958 100644
--- a/site/src/content/docs/forms/select.mdx
+++ b/site/src/content/docs/forms/select.mdx
@@ -9,7 +9,7 @@ toc: true
 Custom `<select>` menus need only a custom class, `.form-select` to trigger the custom styles. Custom styles are limited to the `<select>`’s initial appearance and cannot modify the `<option>`s due to browser limitations.
 
 <Example code={`<select class="form-select" aria-label="Default select example">
-    <option selected>Open this select menu</option>
+    <option selected aria-hidden="true">Open this select menu</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
@@ -20,14 +20,14 @@ Custom `<select>` menus need only a custom class, `.form-select` to trigger the
 You may also choose from small and large custom selects to match our similarly sized text inputs.
 
 <Example code={`<select class="form-select form-select-lg mb-3" aria-label="Large select example">
-    <option selected>Open this select menu</option>
+    <option selected aria-hidden="true">Open this select menu</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
   </select>
 
   <select class="form-select form-select-sm" aria-label="Small select example">
-    <option selected>Open this select menu</option>
+    <option selected aria-hidden="true">Open this select menu</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
@@ -36,7 +36,7 @@ You may also choose from small and large custom selects to match our similarly s
 The `multiple` attribute is also supported:
 
 <Example code={`<select class="form-select" multiple aria-label="Multiple select example">
-    <option selected>Open this select menu</option>
+    <option selected aria-hidden="true">Open this select menu</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
@@ -45,7 +45,7 @@ The `multiple` attribute is also supported:
 As is the `size` attribute:
 
 <Example code={`<select class="form-select" size="3" aria-label="Size 3 select example">
-    <option selected>Open this select menu</option>
+    <option selected aria-hidden="true">Open this select menu</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
@@ -56,7 +56,7 @@ As is the `size` attribute:
 Add the `disabled` boolean attribute on a select to give it a grayed out appearance and remove pointer events.
 
 <Example code={`<select class="form-select" aria-label="Disabled select example" disabled>
-    <option selected>Open this select menu</option>
+    <option selected aria-hidden="true">Open this select menu</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
diff --git a/site/src/content/docs/forms/validation.mdx b/site/src/content/docs/forms/validation.mdx
index cf6da63bd845..15a0338c86bf 100644
--- a/site/src/content/docs/forms/validation.mdx
+++ b/site/src/content/docs/forms/validation.mdx
@@ -69,7 +69,7 @@ Custom feedback styles apply custom colors, borders, focus styles, and backgroun
     <div class="col-md-3">
       <label for="validationCustom04" class="form-label">State</label>
       <select class="form-select" id="validationCustom04" required>
-        <option selected disabled value="">Choose...</option>
+        <option selected disabled value="" aria-hidden="true">Choose...</option>
         <option>...</option>
       </select>
       <div class="invalid-feedback">
@@ -130,7 +130,7 @@ While these feedback styles cannot be styled with CSS, you can still customize t
     <div class="col-md-3">
       <label for="validationDefault04" class="form-label">State</label>
       <select class="form-select" id="validationDefault04" required>
-        <option selected disabled value="">Choose...</option>
+        <option selected disabled value="" aria-hidden="true">Choose...</option>
         <option>...</option>
       </select>
     </div>
@@ -194,7 +194,7 @@ To fix [issues with border radius](https://github.com/twbs/bootstrap/issues/2511
     <div class="col-md-3">
       <label for="validationServer04" class="form-label">State</label>
       <select class="form-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
-        <option selected disabled value="">Choose...</option>
+        <option selected disabled value="" aria-hidden="true">Choose...</option>
         <option>...</option>
       </select>
       <div id="validationServer04Feedback" class="invalid-feedback">
@@ -316,7 +316,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
     <div class="col-md-3 position-relative">
       <label for="validationTooltip04" class="form-label">State</label>
       <select class="form-select" id="validationTooltip04" required>
-        <option selected disabled value="">Choose...</option>
+        <option selected disabled value="" aria-hidden="true">Choose...</option>
         <option>...</option>
       </select>
       <div class="invalid-tooltip">