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

Author: Hashim1999164

js/tests/visual/floating-label.html

@@ -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">

site/src/assets/examples/cheatsheet-rtl/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">

site/src/assets/examples/cheatsheet/index.astro

@@ -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>

site/src/content/docs/forms/floating-labels.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>

site/src/content/docs/forms/input-group.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>

site/src/content/docs/forms/layout.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>

site/src/content/docs/forms/select.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">