From 8f99afa1fe24d041e447e1ca2f7d751d6661362f Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Mon, 5 Aug 2024 16:42:49 -0700
Subject: [PATCH] Improve accessibility of <selectedoption> example

---
 site/src/pages/components/customizableselect.mdx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/site/src/pages/components/customizableselect.mdx b/site/src/pages/components/customizableselect.mdx
index 5e559cea..e3b9b9ec 100644
--- a/site/src/pages/components/customizableselect.mdx
+++ b/site/src/pages/components/customizableselect.mdx
@@ -161,7 +161,7 @@ This example replaces the button which opens the listbox with an author provided
 
 ### Rendering the `<option>` differently in the button
 
-This example uses the customizable `<select>` element with custom CSS to target it which renders the option differently in the listbox vs in the button.
+This example uses the customizable `<select>` element with custom CSS to target it which renders the option differently in the listbox vs in the button. The contents of each `<option>` have a `<span aria-label>` in order to make the option get announced the same whether its copied into the `<selectedoption>` or being rendered in the dropdown.
 
 <div className="code-image-container">
 <div>
@@ -171,10 +171,14 @@ This example uses the customizable `<select>` element with custom CSS to target
     <selectedoption></selectedoption>
   </button>
   <option>
-    ❤️ <span class=description>heart</span>
+    <span aria-label=heart>
+      ❤️ <span class=description>heart</span>
+    </span>
   </option>
   <option>
-    🙂 <span class=description>smile</span>
+    <span aria-label=smile>
+      🙂 <span class=description>smile</span>
+    </span>
   </option>
 </select>
 <style>