diff --git a/components/dash-core-components/src/utils/optionRendering.tsx b/components/dash-core-components/src/utils/optionRendering.tsx index 014f42e6b8..70c1d2c0d1 100644 --- a/components/dash-core-components/src/utils/optionRendering.tsx +++ b/components/dash-core-components/src/utils/optionRendering.tsx @@ -37,7 +37,7 @@ export const OptionLabel: React.FC = ({ ))} diff --git a/components/dash-core-components/tests/integration/dropdown/test_a11y.py b/components/dash-core-components/tests/integration/dropdown/test_a11y.py index 025560f4aa..6b997b1138 100644 --- a/components/dash-core-components/tests/integration/dropdown/test_a11y.py +++ b/components/dash-core-components/tests/integration/dropdown/test_a11y.py @@ -1,7 +1,7 @@ import pytest from dash import Dash, Input, Output from dash.dcc import Dropdown -from dash.html import Div, Label, P +from dash.html import Div, Label, P, Span from selenium.common.exceptions import TimeoutException from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.action_chains import ActionChains @@ -720,3 +720,40 @@ def is_visible(el): ) return all([is_visible(el) for el in elements]) + + +def test_a11y009_dropdown_component_labels_render_correctly(dash_duo): + app = Dash(__name__) + app.layout = Div( + [ + Dropdown( + options=[ + {"label": Span("red"), "value": "red"}, + {"label": Span("yellow"), "value": "yellow"}, + {"label": Span("blue"), "value": "blue"}, + ], + value=["red", "yellow", "blue"], + id="components-label-dropdown", + multi=True, + ), + ] + ) + + dash_duo.start_server(app) + + dash_duo.find_element("#components-label-dropdown").click() + dash_duo.wait_for_element(".dash-dropdown-options") + + # Click on the "yellow" option + yellow_option = dash_duo.find_element( + '.dash-dropdown-option:has(input[value="yellow"])' + ) + yellow_option.click() + + # After interaction, verify the options render correctly + option_elements = dash_duo.find_elements(".dash-dropdown-option") + rendered_labels = [el.text.strip() for el in option_elements] + + assert rendered_labels == ["red", "yellow", "blue"] + + assert dash_duo.get_logs() == [] diff --git a/components/dash-core-components/tests/integration/dropdown/test_clearable_false.py b/components/dash-core-components/tests/integration/dropdown/test_clearable_false.py index 7d2e3bbcc1..219b98acb1 100644 --- a/components/dash-core-components/tests/integration/dropdown/test_clearable_false.py +++ b/components/dash-core-components/tests/integration/dropdown/test_clearable_false.py @@ -190,8 +190,13 @@ def update_value(val): # Attempt to deselect all items. Everything should deselect until we get to # the last item which cannot be cleared. - selected = dash_duo.find_elements(".dash-dropdown-options input[checked]") - [el.click() for el in selected] + # Click MTL option container + mtl_option = dash_duo.find_element('.dash-dropdown-option:has(input[value="MTL"])') + mtl_option.click() + + # Click SF option container + sf_option = dash_duo.find_element('.dash-dropdown-option:has(input[value="SF"])') + sf_option.click() assert dash_duo.find_element("#dropdown-value").text == "SF"