use shinygovstyle dropdowns for accessibility and styling requirements

dfe-analytical-services · Sep 18, 2024 · 774811c · 774811c
1 parent a4d84c9
commit 774811c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/R/ui_panels/example_tab_1.R b/R/ui_panels/example_tab_1.R
@@ -19,17 +19,20 @@ example_tab_1_panel <- function() {
                 gov_row(
                   column(
                     width = 6,
-                    selectizeInput("selectPhase",
-                      "Select a school phase",
-                      choices = choices_phase
+                    shinyGovstyle::select_Input(
+                      inputId = "selectPhase",
+                      label = "Select a school phase",
+                      select_text = choices_phase,
+                      select_value = choices_phase
                     )
                   ),
                   column(
                     width = 6,
-                    selectizeInput(
+                    shinyGovstyle::select_Input(
                       inputId = "selectArea",
                       label = "Choose an area:",
-                      choices = choices_areas$area_name
+                      select_text = choices_areas$area_name,
+                      select_value = choices_areas$area_name
                     )
                   ),
                   # Download button -------------------------------------------

diff --git a/www/dfe_shiny_gov_style.css b/www/dfe_shiny_gov_style.css
@@ -226,6 +226,16 @@ html {
   text-decoration: none;
 }
 
+/* GOV.UK select component ------------------------------------------------- */
+
+.govuk-select {
+  color: black;
+}
+
+.govuk-label {
+  color: white !important;
+}
+
 /* Left nav tabs styling --------------------------------------------------- */
 
 .nav-stacked>li>a {