Changed html.P to html.Label (#293)

vizro-core/changelog.d/20240126_162059_amward_use_label.md

@@ -0,0 +1,47 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+
+### Changed
+
+- Replaced `html.P` with `html.Label` in form components. ([#293](https://github.com/mckinsey/vizro/pull/293))
+
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

vizro-core/src/vizro/models/_components/form/_user_input.py

@@ -40,7 +40,7 @@ class UserInput(VizroBaseModel):
     def build(self):
         return html.Div(
             [
-                html.P(self.title) if self.title else None,
+                html.Label(self.title, htmlFor=self.id) if self.title else None,
                 dbc.Input(
                     id=self.id,
                     placeholder=self.placeholder,

vizro-core/src/vizro/models/_components/form/checklist.py

@@ -45,7 +45,7 @@ def build(self):
 
         return html.Div(
             [
-                html.P(self.title) if self.title else None,
+                html.Label(self.title, htmlFor=self.id) if self.title else None,
                 dcc.Checklist(
                     id=self.id,
                     options=full_options,

vizro-core/src/vizro/models/_components/form/dropdown.py

@@ -57,7 +57,7 @@ def build(self):
         full_options, default_value = get_options_and_default(options=self.options, multi=self.multi)
         return html.Div(
             [
-                html.P(self.title) if self.title else None,
+                html.Label(self.title, htmlFor=self.id) if self.title else None,
                 dcc.Dropdown(
                     id=self.id,
                     options=full_options,

vizro-core/src/vizro/models/_components/form/radio_items.py

@@ -46,7 +46,7 @@ def build(self):
 
         return html.Div(
             [
-                html.P(self.title) if self.title else None,
+                html.Label(self.title, htmlFor=self.id) if self.title else None,
                 dcc.RadioItems(
                     id=self.id,
                     options=full_options,

vizro-core/src/vizro/models/_components/form/range_slider.py

@@ -91,7 +91,7 @@ def build(self):
                         "max": self.max,
                     },
                 ),
-                html.P(self.title) if self.title else None,
+                html.Label(self.title, htmlFor=self.id) if self.title else None,
                 html.Div(
                     [
                         dcc.RangeSlider(

vizro-core/src/vizro/models/_components/form/slider.py

@@ -87,7 +87,7 @@ def build(self):
                         "max": self.max,
                     },
                 ),
-                html.P(self.title) if self.title else None,
+                html.Label(self.title, htmlFor=self.id) if self.title else None,
                 html.Div(
                     [
                         dcc.Slider(

vizro-core/src/vizro/static/css/typography.css

@@ -59,6 +59,7 @@ h4,
 }
 
 p,
+label,
 .body-ui-02 {
   color: var(--text-secondary);
   font-size: var(--text-size-02);

vizro-core/tests/unit/vizro/models/_components/form/test_checklist.py

@@ -132,7 +132,7 @@ def test_checklist_build(self):
         checklist = Checklist(id="checklist_id", options=["A", "B", "C"], title="Title").build()
         expected_checklist = html.Div(
             [
-                html.P("Title"),
+                html.Label("Title", htmlFor="checklist_id"),
                 dcc.Checklist(
                     id="checklist_id",
                     options=["ALL", "A", "B", "C"],

vizro-core/tests/unit/vizro/models/_components/form/test_dropdown.py

@@ -155,7 +155,7 @@ def test_dropdown_with_all_option(self):
         ).build()
         expected_dropdown = html.Div(
             [
-                html.P("Title"),
+                html.Label("Title", htmlFor="dropdown_id"),
                 dcc.Dropdown(
                     id="dropdown_id",
                     options=["ALL", "A", "B", "C"],
@@ -176,7 +176,7 @@ def test_dropdown_without_all_option(self):
         dropdown = Dropdown(id="dropdown_id", options=["A", "B", "C"], multi=False, title="Title").build()
         expected_dropdown = html.Div(
             [
-                html.P("Title"),
+                html.Label("Title", htmlFor="dropdown_id"),
                 dcc.Dropdown(
                     id="dropdown_id",
                     options=["A", "B", "C"],

vizro-core/tests/unit/vizro/models/_components/form/test_radioitems.py

@@ -132,7 +132,7 @@ def test_radio_items_build(self):
         radio_items = RadioItems(id="radio_items_id", options=["A", "B", "C"], title="Title").build()
         expected_radio_items = html.Div(
             [
-                html.P("Title"),
+                html.Label("Title", htmlFor="radio_items_id"),
                 dcc.RadioItems(
                     id="radio_items_id",
                     options=["A", "B", "C"],

vizro-core/tests/unit/vizro/models/_components/form/test_range_slider.py

@@ -90,7 +90,7 @@ def expected_range_slider_with_optional():
                     "max": 10,
                 },
             ),
-            html.P("Title"),
+            html.Label("Title", htmlFor="range_slider_with_all"),
             html.Div(
                 [
                     dcc.RangeSlider(

vizro-core/tests/unit/vizro/models/_components/form/test_slider.py

@@ -24,7 +24,7 @@ def expected_slider():
                     "max": 10,
                 },
             ),
-            html.P("Test title"),
+            html.Label("Test title", htmlFor="slider_id"),
             html.Div(
                 [
                     dcc.Slider(