Implement new customizable select value mapping

The new behavior was discussed and chosen here: openui/open-ui#1117 Fixed: 380313544 Change-Id: I1040340f49eb202a84f738c564dabb47a12f3bf6 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6203726 Auto-Submit: Joey Arhar <[email protected]> Reviewed-by: Aaron Leventhal <[email protected]> Commit-Queue: Aaron Leventhal <[email protected]> Commit-Queue: Joey Arhar <[email protected]> Cr-Commit-Position: refs/heads/main@{#1415636}
chromium · Feb 4, 2025 · 009cd7d · 009cd7d
1 parent 2171020
commit 009cd7d
Show file tree

Hide file tree

Showing 35 changed files with 259 additions and 73 deletions.
diff --git a/content/browser/accessibility/dump_accessibility_tree_browsertest.cc b/content/browser/accessibility/dump_accessibility_tree_browsertest.cc
@@ -2230,6 +2230,16 @@ IN_PROC_BROWSER_TEST_P(CustomizableSelectEnabledDumpAccessibilityTreeTest,
       FILE_PATH_LITERAL("custom-select-forbidden-interactive-content.html"));
 }
 
+IN_PROC_BROWSER_TEST_P(CustomizableSelectEnabledDumpAccessibilityTreeTest,
+                       AccessibilityCustomSelectButtonValue) {
+  RunHtmlTest(FILE_PATH_LITERAL("custom-select-button-value.html"));
+}
+
+IN_PROC_BROWSER_TEST_P(CustomizableSelectEnabledDumpAccessibilityTreeTest,
+                       AccessibilityCustomSelectImgAlt) {
+  RunHtmlTest(FILE_PATH_LITERAL("custom-select-img-alt.html"));
+}
+
 IN_PROC_BROWSER_TEST_P(DumpAccessibilityTreeTest, AccessibilityDd) {
   RunHtmlTest(FILE_PATH_LITERAL("dd.html"));
 }

diff --git a/content/test/content_test_bundle_data.filelist b/content/test/content_test_bundle_data.filelist
@@ -3371,6 +3371,9 @@ data/accessibility/html/custom-element-with-aria-owns-inside.html
 data/accessibility/html/custom-element-with-aria-owns-outside-expected-blink.txt
 data/accessibility/html/custom-element-with-aria-owns-outside.html
 data/accessibility/html/custom-element.html
+data/accessibility/html/custom-select-button-value-expected-auralinux.txt
+data/accessibility/html/custom-select-button-value-expected-blink.txt
+data/accessibility/html/custom-select-button-value.html
 data/accessibility/html/custom-select-expected-android-assist-data.txt
 data/accessibility/html/custom-select-expected-android-external.txt
 data/accessibility/html/custom-select-expected-android.txt
@@ -3383,6 +3386,9 @@ data/accessibility/html/custom-select-expected-win.txt
 data/accessibility/html/custom-select-forbidden-interactive-content-expected-auralinux.txt
 data/accessibility/html/custom-select-forbidden-interactive-content-expected-blink.txt
 data/accessibility/html/custom-select-forbidden-interactive-content.html
+data/accessibility/html/custom-select-img-alt-expected-auralinux.txt
+data/accessibility/html/custom-select-img-alt-expected-blink.txt
+data/accessibility/html/custom-select-img-alt.html
 data/accessibility/html/custom-select-label-element-expected-android-assist-data.txt
 data/accessibility/html/custom-select-label-element-expected-android-external.txt
 data/accessibility/html/custom-select-label-element-expected-android.txt

diff --git a/content/test/data/accessibility/aria/aria-actions-implicit-expected-blink.txt b/content/test/data/accessibility/aria/aria-actions-implicit-expected-blink.txt
@@ -2,6 +2,11 @@ rootWebArea
 ++genericContainer ignored
 ++++genericContainer ignored
 ++++++comboBoxSelect collapsed value='hello world'
+++++++++genericContainer ignored invisible
+++++++++++button ignored invisible
+++++++++++++genericContainer ignored invisible
+++++++++++++++button ignored invisible
+++++++++++++++++staticText ignored invisible
 ++++++++dialog invisible ispopup=auto
 ++++++++++menuListOption name='hello world' selected=true actionsIds=button
 ++++++++++++genericContainer ignored

diff --git a/content/test/data/accessibility/aria/aria-actions-implicit.html b/content/test/data/accessibility/aria/aria-actions-implicit.html
@@ -3,7 +3,7 @@
 -->
 <select>
   <button>
-    <selectedoption></selectedoption>
+    <selectedcontent></selectedcontent>
   </button>
   <option>
     <button type="button">hello world</button>
@@ -29,7 +29,7 @@
 </div>
 
 <style>
-selectedoption .description {
+selectedcontent .description {
   display: none;
 }
 select, ::picker(select) {

diff --git a/content/test/data/accessibility/event/menulist-custom-expand-collapse-expected-mac.txt b/content/test/data/accessibility/event/menulist-custom-expand-collapse-expected-mac.txt
@@ -1,3 +1,3 @@
-AXExpandedChanged on AXPopUpButton AXDescription='Fruit' AXValue='Apple'
+AXExpandedChanged on AXPopUpButton AXDescription='Fruit' AXValue='^'
 AXFocusedUIElementChanged on AXMenuItem AXValue='Apple'
 AXMenuItemSelected on AXMenuItem AXValue='Apple'
diff --git a/content/test/data/accessibility/event/menulist-custom-expand-collapse-expected-win.txt b/content/test/data/accessibility/event/menulist-custom-expand-collapse-expected-win.txt
@@ -2,6 +2,6 @@ EVENT_OBJECT_FOCUS on <option> role=ROLE_SYSTEM_LISTITEM name="Apple" SELECTED,F
 EVENT_OBJECT_STATECHANGE on <div> role=ROLE_SYSTEM_LIST SetSize=3
 EVENT_OBJECT_STATECHANGE on <option> role=ROLE_SYSTEM_LISTITEM name="Banana" FOCUSABLE,SELECTABLE PosInSet=3 SetSize=3
 EVENT_OBJECT_STATECHANGE on <option> role=ROLE_SYSTEM_LISTITEM name="Orange" FOCUSABLE,SELECTABLE PosInSet=2 SetSize=3
-EVENT_OBJECT_STATECHANGE on <select> role=ROLE_SYSTEM_COMBOBOX name="Fruit" value="Apple" EXPANDED,FOCUSABLE,HASPOPUP SetSize=3
+EVENT_OBJECT_STATECHANGE on <select> role=ROLE_SYSTEM_COMBOBOX name="Fruit" value="^" EXPANDED,FOCUSABLE,HASPOPUP SetSize=3
 IA2_EVENT_ACTIVE_DESCENDANT_CHANGED on <div> role=ROLE_SYSTEM_LIST SetSize=3
-IA2_EVENT_TEXT_INSERTED on <select> role=ROLE_SYSTEM_COMBOBOX name="Fruit" value="Apple" EXPANDED,FOCUSABLE,HASPOPUP SetSize=3 new_text={'<obj>' start=0 end=1}
+IA2_EVENT_TEXT_INSERTED on <select> role=ROLE_SYSTEM_COMBOBOX name="Fruit" value="^" EXPANDED,FOCUSABLE,HASPOPUP SetSize=3 new_text={'<obj>' start=0 end=1}
diff --git a/content/test/data/accessibility/html/custom-select-button-value-expected-auralinux.txt b/content/test/data/accessibility/html/custom-select-button-value-expected-auralinux.txt
@@ -0,0 +1,5 @@
+[document web]
+++[section]
+++++[combo box]
+++++++[menu]
+++++++++[menu item] name='option' selectable selected
diff --git a/content/test/data/accessibility/html/custom-select-button-value-expected-blink.txt b/content/test/data/accessibility/html/custom-select-button-value-expected-blink.txt
@@ -0,0 +1,11 @@
+rootWebArea
+++genericContainer ignored
+++++genericContainer
+++++++comboBoxSelect collapsed value='button'
+++++++++genericContainer ignored invisible
+++++++++++button ignored invisible
+++++++++++++staticText ignored invisible
+++++++++++++genericContainer ignored invisible
+++++++++++++++staticText ignored invisible
+++++++++menuListPopup invisible ispopup=auto
+++++++++++menuListOption name='option' selected=true
diff --git a/content/test/data/accessibility/html/custom-select-button-value.html b/content/test/data/accessibility/html/custom-select-button-value.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<style>
+select, ::picker(select) {
+  appearance: base-select;
+}
+</style>
+<select>
+  <button>button
+    <span aria-hidden=true>aria hidden span</span>
+  </button>
+  <option>option</option>
+</select>
diff --git a/content/test/data/accessibility/html/custom-select-expected-android.txt b/content/test/data/accessibility/html/custom-select-expected-android.txt
@@ -1,6 +1,6 @@
 android.webkit.WebView focusable focused
 ++android.view.View
-++++android.view.View role_description='menu pop up button' clickable collapsed focusable interesting name='USD United States Dollar $' hint='Currency for purchase'
+++++android.view.View role_description='menu pop up button' clickable collapsed focusable interesting name='USD' hint='Currency for purchase'
 ++++++android.view.View invisible
 ++++++++android.view.View invisible
 ++++++++++android.view.View clickable focusable invisible name='EUR Euro'

diff --git a/content/test/data/accessibility/html/custom-select-expected-blink.txt b/content/test/data/accessibility/html/custom-select-expected-blink.txt
@@ -1,7 +1,19 @@
 rootWebArea focusable htmlTag='#document'
 ++genericContainer ignored
 ++++genericContainer htmlTag='body'
-++++++comboBoxSelect collapsed focusable className='currency-select' htmlTag='select' name='Currency for purchase' value='USD United States Dollar $' setSize=5 posInSet=3 haspopup=menu
+++++++comboBoxSelect collapsed focusable className='currency-select' htmlTag='select' name='Currency for purchase' value='USD' setSize=5 posInSet=3 haspopup=menu
+++++++++genericContainer ignored invisible
+++++++++++button ignored invisible
+++++++++++++genericContainer ignored invisible
+++++++++++++++image ignored invisible
+++++++++++++++genericContainer ignored invisible
+++++++++++++++++genericContainer ignored invisible
+++++++++++++++++++staticText ignored invisible
+++++++++++++++++genericContainer ignored invisible
+++++++++++++++++++staticText ignored invisible
+++++++++++++++genericContainer ignored invisible
+++++++++++++++++staticText ignored invisible
+++++++++++++genericContainer ignored invisible
 ++++++++menuListPopup invisible htmlTag='div' setSize=5 ispopup=auto
 ++++++++++genericContainer invisible className='datalist' htmlTag='div'
 ++++++++++++menuListOption focusable invisible htmlTag='option' name='EUR Euro' setSize=5 posInSet=1 selected=false

diff --git a/content/test/data/accessibility/html/custom-select-expected-fuchsia.txt b/content/test/data/accessibility/html/custom-select-expected-fuchsia.txt
@@ -1,7 +1,19 @@
 UNKNOWN focusable has_input_focus
 ++UNKNOWN hidden
 ++++UNKNOWN
-++++++UNKNOWN focusable label='Currency for purchase' actions='{DEFAULT}' value='USD United States Dollar $'
+++++++UNKNOWN focusable label='Currency for purchase' actions='{DEFAULT}' value='USD'
+++++++++UNKNOWN hidden
+++++++++++BUTTON hidden
+++++++++++++UNKNOWN hidden
+++++++++++++++IMAGE hidden
+++++++++++++++UNKNOWN hidden
+++++++++++++++++UNKNOWN hidden
+++++++++++++++++++STATIC_TEXT hidden
+++++++++++++++++UNKNOWN hidden
+++++++++++++++++++STATIC_TEXT hidden
+++++++++++++++UNKNOWN hidden
+++++++++++++++++STATIC_TEXT hidden
+++++++++++++UNKNOWN hidden
 ++++++++UNKNOWN hidden
 ++++++++++UNKNOWN hidden
 ++++++++++++UNKNOWN hidden focusable label='EUR Euro' actions='{DEFAULT}'

diff --git a/content/test/data/accessibility/html/custom-select-expected-mac.txt b/content/test/data/accessibility/html/custom-select-expected-mac.txt
@@ -1,6 +1,6 @@
 AXWebArea AXRoleDescription='HTML content'
 ++AXGroup AXRoleDescription='group'
-++++AXPopUpButton AXDescription='Currency for purchase' AXRoleDescription='pop up button' AXValue='USD United States Dollar $'
+++++AXPopUpButton AXDescription='Currency for purchase' AXRoleDescription='pop up button' AXValue='USD'
 ++++++AXMenuItem AXRoleDescription='menu item' AXValue='USD United States Dollar'
 ++++++++AXGroup AXRoleDescription='group'
 ++++++++++AXGroup AXRoleDescription='group'

diff --git a/content/test/data/accessibility/html/custom-select-expected-uia-win.txt b/content/test/data/accessibility/html/custom-select-expected-uia-win.txt
@@ -1,3 +1,3 @@
 Document
 ++Group IsControlElement=false
-++++ComboBox Name='Currency for purchase' ExpandCollapse.ExpandCollapseState='Collapsed' Value.Value='USD United States Dollar $'
+++++ComboBox Name='Currency for purchase' ExpandCollapse.ExpandCollapseState='Collapsed' Value.Value='USD'
diff --git a/content/test/data/accessibility/html/custom-select-expected-win.txt b/content/test/data/accessibility/html/custom-select-expected-win.txt
@@ -1,3 +1,3 @@
 ROLE_SYSTEM_DOCUMENT READONLY FOCUSABLE
 ++IA2_ROLE_SECTION
-++++ROLE_SYSTEM_COMBOBOX name='Currency for purchase' value='USD United States Dollar $' COLLAPSED FOCUSABLE HASPOPUP haspopup:menu
+++++ROLE_SYSTEM_COMBOBOX name='Currency for purchase' value='USD' COLLAPSED FOCUSABLE HASPOPUP haspopup:menu
diff --git a/...st/data/accessibility/html/custom-select-forbidden-interactive-content-expected-blink.txt b/...st/data/accessibility/html/custom-select-forbidden-interactive-content-expected-blink.txt
@@ -1,7 +1,10 @@
 rootWebArea focusable
 ++genericContainer ignored
 ++++genericContainer ignored
-++++++comboBoxSelect expanded focusable name='forbidden select' value='one' setSize=2 posInSet=1 haspopup=menu
+++++++comboBoxSelect expanded focusable name='forbidden select' value='invoker button' setSize=2 posInSet=1 haspopup=menu
+++++++++genericContainer ignored
+++++++++++button ignored invisible
+++++++++++++staticText ignored invisible
 ++++++++dialog activedescendantId=menuListOption setSize=2 ispopup=auto
 ++++++++++menuListOption focusable name='one' selected=true
 ++++++++++menuListOption focusable name='two' selected=false
@@ -13,7 +16,10 @@ rootWebArea focusable
 rootWebArea focusable
 ++genericContainer ignored
 ++++genericContainer ignored
-++++++comboBoxSelect expanded focusable name='forbidden select' value='one' setSize=2 posInSet=1 haspopup=menu
+++++++comboBoxSelect expanded focusable name='forbidden select' value='invoker button' setSize=2 posInSet=1 haspopup=menu
+++++++++genericContainer ignored
+++++++++++button ignored invisible
+++++++++++++staticText ignored invisible
 ++++++++menuListPopup activedescendantId=menuListOption setSize=2 ispopup=auto
 ++++++++++menuListOption focusable name='one' setSize=2 posInSet=1 selected=true
 ++++++++++menuListOption focusable name='two' setSize=2 posInSet=2 selected=false
@@ -25,7 +31,10 @@ rootWebArea focusable
 rootWebArea focusable
 ++genericContainer ignored
 ++++genericContainer ignored
-++++++comboBoxSelect expanded focusable name='forbidden select' value='one' setSize=2 posInSet=1 haspopup=menu
+++++++comboBoxSelect expanded focusable name='forbidden select' value='invoker button' setSize=2 posInSet=1 haspopup=menu
+++++++++genericContainer ignored
+++++++++++button ignored invisible
+++++++++++++staticText ignored invisible
 ++++++++dialog activedescendantId=menuListOption setSize=2 ispopup=auto
 ++++++++++menuListOption focusable name='one' selected=true
 ++++++++++menuListOption focusable name='two' selected=false

diff --git a/content/test/data/accessibility/html/custom-select-img-alt-expected-auralinux.txt b/content/test/data/accessibility/html/custom-select-img-alt-expected-auralinux.txt
@@ -0,0 +1,11 @@
+[document web]
+++[section]
+++++[combo box]
+++++++[menu]
+++++++++[menu item] name='option without img' selectable selected
+++++++++[menu item] name=' option with img with alt img alt text' selectable
+++++++++++[static] name='<newline>    option with img with alt<newline>    '
+++++++++++[image] name='img alt text'
+++++++++[menu item] name=' option with img without alt ' selectable
+++++++++++[static] name='<newline>    option with img without alt<newline>    '
+++++++++++[image]
diff --git a/content/test/data/accessibility/html/custom-select-img-alt-expected-blink.txt b/content/test/data/accessibility/html/custom-select-img-alt-expected-blink.txt
@@ -0,0 +1,18 @@
+rootWebArea
+++genericContainer ignored
+++++genericContainer
+++++++comboBoxSelect collapsed value='option without img'
+++++++++genericContainer ignored invisible
+++++++++++button ignored invisible
+++++++++++++genericContainer ignored invisible
+++++++++++++++staticText ignored invisible
+++++++++menuListPopup invisible ispopup=auto
+++++++++++menuListOption name='option without img' selected=true
+++++++++++menuListOption invisible name=' option with img with alt img alt text' selected=false
+++++++++++++genericContainer ignored invisible
+++++++++++++++staticText invisible name='<newline>    option with img with alt<newline>    '
+++++++++++++++image invisible name='img alt text'
+++++++++++menuListOption invisible name=' option with img without alt ' selected=false
+++++++++++++genericContainer ignored invisible
+++++++++++++++staticText invisible name='<newline>    option with img without alt<newline>    '
+++++++++++++++image invisible
diff --git a/content/test/data/accessibility/html/custom-select-img-alt.html b/content/test/data/accessibility/html/custom-select-img-alt.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<style>
+select, ::picker(select) {
+  appearance: base-select;
+}
+</style>
+
+<select>
+  <button>
+    <selectedcontent></selectedcontent>
+  </button>
+  <option>
+    option without img
+  </option>
+  <option>
+    option with img with alt
+    <img alt="img alt text">
+  </option>
+  <option>
+    option with img without alt
+    <img>
+  </option>
+</select>
diff --git a/content/test/data/accessibility/html/custom-select-open-expected-android.txt b/content/test/data/accessibility/html/custom-select-open-expected-android.txt
@@ -1,6 +1,6 @@
 android.webkit.WebView focusable
 ++android.view.View
-++++android.view.View role_description='menu pop up button' clickable expanded focusable interesting name='USD United States Dollar $' hint='Currency for purchase'
+++++android.view.View role_description='menu pop up button' clickable expanded focusable interesting name='USD' hint='Currency for purchase'
 ++++++android.view.View
 ++++++++android.view.View clickable focusable interesting name='EUR Euro'
 ++++++++android.view.View clickable focusable interesting name='GBP Great British Pound' item_index=1 row_index=1

diff --git a/content/test/data/accessibility/html/custom-select-open-expected-blink.txt b/content/test/data/accessibility/html/custom-select-open-expected-blink.txt
@@ -1,7 +1,19 @@
 rootWebArea focusable
 ++genericContainer ignored
 ++++genericContainer
-++++++comboBoxSelect expanded focusable name='Currency for purchase' value='USD United States Dollar $' setSize=5 posInSet=3 haspopup=menu
+++++++comboBoxSelect expanded focusable name='Currency for purchase' value='USD' setSize=5 posInSet=3 haspopup=menu
+++++++++genericContainer ignored
+++++++++++button ignored invisible
+++++++++++++genericContainer ignored invisible
+++++++++++++++image ignored invisible
+++++++++++++++genericContainer ignored invisible
+++++++++++++++++genericContainer ignored invisible
+++++++++++++++++++staticText ignored invisible
+++++++++++++++++genericContainer ignored invisible
+++++++++++++++++++staticText ignored invisible
+++++++++++++++genericContainer ignored invisible
+++++++++++++++++staticText ignored invisible
+++++++++++++genericContainer ignored invisible
 ++++++++menuListPopup activedescendantId=menuListOption setSize=5 ispopup=auto
 ++++++++++genericContainer ignored
 ++++++++++++menuListOption focusable name='EUR Euro' setSize=5 posInSet=1 selected=false

diff --git a/content/test/data/accessibility/html/custom-select-open-expected-fuchsia.txt b/content/test/data/accessibility/html/custom-select-open-expected-fuchsia.txt
@@ -1,7 +1,19 @@
 UNKNOWN focusable
 ++UNKNOWN hidden
 ++++UNKNOWN
-++++++UNKNOWN focusable label='Currency for purchase' actions='{DEFAULT}' value='USD United States Dollar $'
+++++++UNKNOWN focusable label='Currency for purchase' actions='{DEFAULT}' value='USD'
+++++++++UNKNOWN hidden
+++++++++++BUTTON hidden
+++++++++++++UNKNOWN hidden
+++++++++++++++IMAGE hidden
+++++++++++++++UNKNOWN hidden
+++++++++++++++++UNKNOWN hidden
+++++++++++++++++++STATIC_TEXT hidden
+++++++++++++++++UNKNOWN hidden
+++++++++++++++++++STATIC_TEXT hidden
+++++++++++++++UNKNOWN hidden
+++++++++++++++++STATIC_TEXT hidden
+++++++++++++UNKNOWN hidden
 ++++++++UNKNOWN
 ++++++++++UNKNOWN hidden
 ++++++++++++UNKNOWN focusable label='EUR Euro' actions='{DEFAULT}'

diff --git a/content/test/data/accessibility/html/custom-select-open-expected-mac.txt b/content/test/data/accessibility/html/custom-select-open-expected-mac.txt
@@ -1,6 +1,6 @@
 AXWebArea AXRoleDescription='HTML content'
 ++AXGroup AXRoleDescription='group'
-++++AXPopUpButton AXDescription='Currency for purchase' AXRoleDescription='pop up button' AXValue='USD United States Dollar $'
+++++AXPopUpButton AXDescription='Currency for purchase' AXRoleDescription='pop up button' AXValue='USD'
 ++++++AXMenu AXRoleDescription='menu'
 ++++++++AXMenuItem AXRoleDescription='menu item' AXValue='EUR Euro'
 ++++++++++AXGroup AXRoleDescription='group'

diff --git a/content/test/data/accessibility/html/custom-select-open-expected-uia-win.txt b/content/test/data/accessibility/html/custom-select-open-expected-uia-win.txt
@@ -1,6 +1,6 @@
 Document
 ++Group IsControlElement=false
-++++ComboBox Name='Currency for purchase' ExpandCollapse.ExpandCollapseState='Expanded' Value.Value='USD United States Dollar $'
+++++ComboBox Name='Currency for purchase' ExpandCollapse.ExpandCollapseState='Expanded' Value.Value='USD'
 ++++++List IsControlElement=false Selection.CanSelectMultiple=false Selection.IsSelectionRequired=false
 ++++++++ListItem Name='EUR Euro' SelectionItem.IsSelected=false
 ++++++++++Group IsControlElement=false

diff --git a/content/test/data/accessibility/html/custom-select-open-expected-win.txt b/content/test/data/accessibility/html/custom-select-open-expected-win.txt
@@ -1,6 +1,6 @@
 ROLE_SYSTEM_DOCUMENT READONLY FOCUSABLE
 ++IA2_ROLE_SECTION
-++++ROLE_SYSTEM_COMBOBOX name='Currency for purchase' value='USD United States Dollar $' EXPANDED FOCUSABLE HASPOPUP haspopup:menu
+++++ROLE_SYSTEM_COMBOBOX name='Currency for purchase' value='USD' EXPANDED FOCUSABLE HASPOPUP haspopup:menu
 ++++++ROLE_SYSTEM_LIST ispopup:auto
 ++++++++ROLE_SYSTEM_LISTITEM name='EUR Euro' FOCUSABLE SELECTABLE
 ++++++++++IA2_ROLE_SECTION

diff --git a/content/test/data/accessibility/html/custom-select-open.html b/content/test/data/accessibility/html/custom-select-open.html
@@ -57,10 +57,10 @@
   }
 }
 
-/* Styles for both the options and selectedoption */
+/* Styles for both the options and selectedcontent */
 
 option,
-selectedoption {
+selectedcontent {
   display: grid;
   gap: 1rem;
   font-size: 1rem;
@@ -69,7 +69,7 @@
 
 /* Style what you see before you open the select dropdown */
 
-selectedoption {
+selectedcontent {
   padding: 0.5rem;
   grid-template-columns: 1.5rem auto;
 
@@ -126,7 +126,7 @@
 </style>
 <select name="currency-select" class="currency-select" aria-label="Currency for purchase">
   <button class="btn-to-open-select">
-    <selectedoption></selectedoption>
+    <selectedcontent></selectedcontent>
     <span class="arrow"></span>
   </button>
   <div class="datalist">