From ff244d3c9451acc33cd043f2c628436a36d85f19 Mon Sep 17 00:00:00 2001
From: Maya Gilad <ms.maya.gilad@gmail.com>
Date: Fri, 8 Nov 2024 19:55:01 +0200
Subject: [PATCH] Create Checklist and RadioItems labels with titles

---
 CHANGELOG.md                                  |  4 +
 .../src/components/Checklist.react.js         |  1 +
 .../src/components/RadioItems.react.js        |  1 +
 .../dropdown/test_option_title_prop.py        | 70 ---------------
 .../tests/integration/test_title_props.py     | 85 +++++++++++++++++++
 5 files changed, 91 insertions(+), 70 deletions(-)
 delete mode 100644 components/dash-core-components/tests/integration/dropdown/test_option_title_prop.py
 create mode 100644 components/dash-core-components/tests/integration/test_title_props.py

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6e652c64c1..bae1eafb0c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ## [UNRELEASED]
 
+## Added
+
+- [#3068](https://github.com/plotly/dash/pull/3068) Add titles to labels in Checklist and RadioItems components
+
 ## Fixed
 
 - [#3080](https://github.com/plotly/dash/pull/3080) Fix docstring generation for components using single-line or nonstandard-indent leading comments
diff --git a/components/dash-core-components/src/components/Checklist.react.js b/components/dash-core-components/src/components/Checklist.react.js
index 784d8fc596..e2afe42437 100644
--- a/components/dash-core-components/src/components/Checklist.react.js
+++ b/components/dash-core-components/src/components/Checklist.react.js
@@ -43,6 +43,7 @@ export default class Checklist extends Component {
                                 ...labelStyle,
                             }}
                             className={labelClassName}
+                            title={option.title}
                         >
                             <input
                                 checked={includes(option.value, value)}
diff --git a/components/dash-core-components/src/components/RadioItems.react.js b/components/dash-core-components/src/components/RadioItems.react.js
index a62e2293ff..b9fe7086ec 100644
--- a/components/dash-core-components/src/components/RadioItems.react.js
+++ b/components/dash-core-components/src/components/RadioItems.react.js
@@ -48,6 +48,7 @@ export default class RadioItems extends Component {
                         }}
                         className={labelClassName}
                         key={option.value}
+                        title={option.title}
                     >
                         <input
                             checked={option.value === value}
diff --git a/components/dash-core-components/tests/integration/dropdown/test_option_title_prop.py b/components/dash-core-components/tests/integration/dropdown/test_option_title_prop.py
deleted file mode 100644
index cdf732bde2..0000000000
--- a/components/dash-core-components/tests/integration/dropdown/test_option_title_prop.py
+++ /dev/null
@@ -1,70 +0,0 @@
-# -*- coding: UTF-8 -*-
-
-import pytest
-from dash.testing import wait
-from dash import Dash, Input, Output, dcc, html
-
-
-@pytest.mark.DCC793
-@pytest.mark.parametrize("multi", [True, False])
-def test_ddot001_option_title(dash_dcc, multi):
-    app = Dash(__name__)
-    app.layout = html.Div(
-        [
-            dcc.Input(
-                id="dropdown_title_input",
-                type="text",
-                placeholder="Enter a title for New York City",
-            ),
-            dcc.Dropdown(
-                id="dropdown",
-                options=[
-                    {"label": "New York City", "value": "NYC"},
-                    {"label": "Montréal", "value": "MTL"},
-                    {"label": "San Francisco", "value": "SF"},
-                ],
-                value="NYC",
-                multi=multi,
-            ),
-        ]
-    )
-
-    @app.callback(
-        Output("dropdown", "options"), [Input("dropdown_title_input", "value")]
-    )
-    def add_title_to_option(title):
-        return [
-            {"label": "New York City", "title": title, "value": "NYC"},
-            {"label": "Montréal", "value": "MTL"},
-            {"label": "San Francisco", "value": "SF"},
-        ]
-
-    dash_dcc.start_server(app)
-
-    dropdown_option_element = dash_dcc.wait_for_element("#dropdown .Select-value")
-
-    dropdown_title_input = dash_dcc.wait_for_element("#dropdown_title_input")
-
-    # Empty string title ('') (default for no title)
-
-    wait.until(lambda: dropdown_option_element.get_attribute("title") == "", 3)
-
-    dropdown_title_input.send_keys("The Big Apple")
-
-    wait.until(
-        lambda: dropdown_option_element.get_attribute("title") == "The Big Apple", 3
-    )
-
-    dash_dcc.clear_input(dropdown_title_input)
-
-    dropdown_title_input.send_keys("Gotham City?")
-
-    wait.until(
-        lambda: dropdown_option_element.get_attribute("title") == "Gotham City?", 3
-    )
-
-    dash_dcc.clear_input(dropdown_title_input)
-
-    wait.until(lambda: dropdown_option_element.get_attribute("title") == "", 3)
-
-    assert dash_dcc.get_logs() == []
diff --git a/components/dash-core-components/tests/integration/test_title_props.py b/components/dash-core-components/tests/integration/test_title_props.py
new file mode 100644
index 0000000000..bae9a05d70
--- /dev/null
+++ b/components/dash-core-components/tests/integration/test_title_props.py
@@ -0,0 +1,85 @@
+# -*- coding: UTF-8 -*-
+
+from dash.testing import wait
+from dash import Dash, Input, Output, dcc, html
+
+
+def test_ddot001_dropdown_radioitems_checklist_option_title(dash_dcc):
+    app = Dash(__name__)
+
+    options = [
+        {"label": "New York City", "value": "NYC"},
+        {"label": "Montréal", "value": "MTL"},
+        {"label": "San Francisco", "value": "SF"},
+    ]
+
+    app.layout = html.Div(
+        [
+            dcc.Input(
+                id="title_input",
+                type="text",
+                placeholder="Enter a title for New York City",
+            ),
+            dcc.Dropdown(id="dropdown_1", options=options, multi=True, value="NYC"),
+            dcc.Dropdown(id="dropdown_2", options=options, multi=False, value="NYC"),
+            dcc.Checklist(
+                id="checklist_1",
+                options=options,
+                value=["NYC"],
+                labelClassName="Select-value-label",
+            ),
+            dcc.RadioItems(
+                id="radioitems_1",
+                options=options,
+                value="NYC",
+                labelClassName="Select-value-label",
+            ),
+        ]
+    )
+
+    ids = ["dropdown_1", "dropdown_2", "checklist_1", "radioitems_1"]
+
+    for id in ids:
+
+        @app.callback(Output(id, "options"), [Input("title_input", "value")])
+        def add_title_to_option(title):
+            return [
+                {"label": "New York City", "title": title, "value": "NYC"},
+                {"label": "Montréal", "value": "MTL"},
+                {"label": "San Francisco", "value": "SF"},
+            ]
+
+    dash_dcc.start_server(app)
+
+    elements = [
+        dash_dcc.wait_for_element("#dropdown_1 .Select-value"),
+        dash_dcc.wait_for_element("#dropdown_2 .Select-value"),
+        dash_dcc.wait_for_element("#checklist_1 .Select-value-label"),
+        dash_dcc.wait_for_element("#radioitems_1 .Select-value-label"),
+    ]
+
+    component_title_input = dash_dcc.wait_for_element("#title_input")
+
+    # Empty string title ('') (default for no title)
+
+    for element in elements:
+        wait.until(lambda: element.get_attribute("title") == "", 3)
+
+    component_title_input.send_keys("The Big Apple")
+
+    for element in elements:
+        wait.until(lambda: element.get_attribute("title") == "The Big Apple", 3)
+
+    dash_dcc.clear_input(component_title_input)
+
+    component_title_input.send_keys("Gotham City?")
+
+    for element in elements:
+        wait.until(lambda: element.get_attribute("title") == "Gotham City?", 3)
+
+    dash_dcc.clear_input(component_title_input)
+
+    for element in elements:
+        wait.until(lambda: element.get_attribute("title") == "", 3)
+
+    assert dash_dcc.get_logs() == []