fix further accessibility issues with inputs & dropdown

Author: KoolADE85

components/dash-core-components/src/components/css/dropdown.css

@@ -9,6 +9,8 @@
     cursor: pointer;
     font-size: inherit;
     overflow: hidden;
+    accent-color: var(--Dash-Fill-Interactive-Strong);
+    outline-color: var(--Dash-Fill-Interactive-Strong);
 }
 
 .dash-dropdown-grid-container {
@@ -66,9 +68,9 @@
     background: var(--Dash-Fill-Inverse-Strong);
     width: fit-content;
     min-width: var(--radix-popover-trigger-width);
-    max-width: 100vw;
+    max-width: 98vw;
     overflow-y: auto;
-    z-index: 50;
+    z-index: 500;
     box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35),
         0px 10px 20px -15px rgba(22, 23, 24, 0.2);
 }
@@ -179,6 +181,8 @@
     text-decoration: none;
     color: var(--Dash-Text-Disabled);
     white-space: nowrap;
+    accent-color: var(--Dash-Fill-Interactive-Strong);
+    outline-color: var(--Dash-Fill-Interactive-Strong);
 }
 
 .dash-dropdown-action-button:hover {

components/dash-core-components/src/components/css/input.css

@@ -16,7 +16,12 @@
 }
 
 .dash-input-container:focus-within {
-    outline: 2px solid var(--Dash-Fill-Interactive-Strong);
+    outline: 1px solid var(--Dash-Fill-Interactive-Strong);
+}
+
+.dash-input-container:has(.dash-input-element:disabled) {
+    opacity: 0.6;
+    cursor: not-allowed;
 }
 
 .dash-input-container input:focus {
@@ -40,6 +45,11 @@
     box-sizing: border-box;
     z-index: 1;
     order: 2;
+    accent-color: var(--Dash-Fill-Interactive-Strong);
+}
+
+.dash-input-element:disabled {
+    cursor: not-allowed;
 }
 
 /* Hide native steppers for number inputs */

components/dash-core-components/src/components/css/optionslist.css

@@ -29,10 +29,6 @@
     margin: 0 calc(var(--Dash-Spacing) * 2) 0 0;
     box-sizing: border-box;
     border: 1px solid var(--Dash-Stroke-Strong);
-}
-
-.dash-options-list-option-checkbox:hover,
-.dash-options-list-option-checkbox:focus,
-.dash-options-list-option-checkbox:checked {
     accent-color: var(--Dash-Fill-Interactive-Strong);
+    outline-color: var(--Dash-Fill-Interactive-Strong);
 }

components/dash-core-components/src/fragments/Dropdown.tsx

@@ -19,6 +19,7 @@ import '../components/css/dropdown.css';
 import isEqual from 'react-fast-compare';
 import {DetailedOption, DropdownProps, OptionValue} from '../types';
 import {OptionsList, OptionLabel} from '../utils/optionRendering';
+import uuid from 'uniqid';
 
 const Dropdown = (props: DropdownProps) => {
     const {
@@ -344,6 +345,8 @@ const Dropdown = (props: DropdownProps) => {
         [filteredOptions, sanitizedValues]
     );
 
+    const accessibleId = id ?? uuid();
+
     return (
         <Popover.Root open={isOpen} onOpenChange={handleOpenChange}>
             <Popover.Trigger asChild>
@@ -359,24 +362,33 @@ const Dropdown = (props: DropdownProps) => {
                     }}
                     className={`dash-dropdown ${className ?? ''}`}
                     style={style}
-                    aria-label={props.placeholder}
+                    aria-labelledby={`${accessibleId}-value-count ${accessibleId}-value`}
                     aria-haspopup="listbox"
                     aria-expanded={isOpen}
                     data-dash-is-loading={loading || undefined}
                 >
                     <span className="dash-dropdown-grid-container dash-dropdown-trigger">
                         {displayValue.length > 0 && (
-                            <span className="dash-dropdown-value">
+                            <span
+                                id={accessibleId + '-value'}
+                                className="dash-dropdown-value"
+                            >
                                 {displayValue}
                             </span>
                         )}
                         {displayValue.length === 0 && (
-                            <span className="dash-dropdown-value dash-dropdown-placeholder">
+                            <span
+                                id={accessibleId + '-value'}
+                                className="dash-dropdown-value dash-dropdown-placeholder"
+                            >
                                 {props.placeholder}
                             </span>
                         )}
                         {sanitizedValues.length > 1 && (
-                            <span className="dash-dropdown-value-count">
+                            <span
+                                id={accessibleId + '-value-count'}
+                                className="dash-dropdown-value-count"
+                            >
                                 {localizations?.selected_count?.replace(
                                     '{num_selected}',
                                     `${sanitizedValues.length}`
@@ -402,7 +414,7 @@ const Dropdown = (props: DropdownProps) => {
                 </button>
             </Popover.Trigger>
 
-            <Popover.Portal container={dropdownContainerRef.current}>
+            <Popover.Portal>
                 <Popover.Content
                     className="dash-dropdown-content"
                     align="start"

components/dash-core-components/tests/integration/dropdown/test_a11y.py

@@ -27,10 +27,10 @@ def test_a11y001_label_focuses_dropdown(dash_duo):
     dash_duo.wait_for_element("#dropdown")
 
     with pytest.raises(TimeoutException):
-        dash_duo.wait_for_element("#dropdown .dash-dropdown-options", timeout=0.25)
+        dash_duo.wait_for_element(".dash-dropdown-options", timeout=0.25)
 
     dash_duo.find_element("#label").click()
-    dash_duo.wait_for_element("#dropdown .dash-dropdown-options")
+    dash_duo.wait_for_element(".dash-dropdown-options")
 
     assert dash_duo.get_logs() == []
 
@@ -54,10 +54,10 @@ def test_a11y002_label_with_htmlFor_can_focus_dropdown(dash_duo):
     dash_duo.wait_for_element("#dropdown")
 
     with pytest.raises(TimeoutException):
-        dash_duo.wait_for_element("#dropdown .dash-dropdown-options", timeout=0.25)
+        dash_duo.wait_for_element(".dash-dropdown-options", timeout=0.25)
 
     dash_duo.find_element("#label").click()
-    dash_duo.wait_for_element("#dropdown .dash-dropdown-options")
+    dash_duo.wait_for_element(".dash-dropdown-options")
 
     assert dash_duo.get_logs() == []
 
@@ -84,16 +84,16 @@ def send_keys(key):
 
     dropdown = dash_duo.find_element("#dropdown")
     dropdown.click()
-    dash_duo.wait_for_element("#dropdown .dash-dropdown-options")
+    dash_duo.wait_for_element(".dash-dropdown-options")
 
     send_keys(
         Keys.ESCAPE
     )  # Expecting focus to remain on the dropdown after escaping out
     with pytest.raises(TimeoutException):
-        dash_duo.wait_for_element("#dropdown .dash-dropdown-options", timeout=0.25)
+        dash_duo.wait_for_element(".dash-dropdown-options", timeout=0.25)
 
     send_keys(Keys.ARROW_DOWN)  # Expecting the dropdown to open up
-    dash_duo.wait_for_element("#dropdown .dash-dropdown-search")
+    dash_duo.wait_for_element(".dash-dropdown-search")
 
     num_elements = len(dash_duo.find_elements(".dash-dropdown-option"))
     assert num_elements == 100

components/dash-core-components/tests/integration/dropdown/test_clearable_false.py

@@ -44,7 +44,7 @@ def update_value(val):
 
     # Clicking the selected item should not de-select it.
     selected_item = dash_duo.find_element(
-        f'#my-unclearable-dropdown input[value="{output_text}"]'
+        f'.dash-dropdown-options input[value="{output_text}"]'
     )
     selected_item.click()
     assert dash_duo.find_element("#dropdown-value").text == output_text
@@ -93,7 +93,7 @@ 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("#my-unclearable-dropdown input[checked]")
+    selected = dash_duo.find_elements(".dash-dropdown-options input[checked]")
     [el.click() for el in selected]
 
     assert dash_duo.find_element("#dropdown-value").text == "SF"

components/dash-core-components/tests/integration/dropdown/test_dynamic_options.py

@@ -31,7 +31,7 @@ def update_options(search_value):
     dropdown.click()
 
     # Get the inner input used for search value.
-    input_ = dash_dcc.find_element("#my-dynamic-dropdown input")
+    input_ = dash_dcc.find_element(".dash-dropdown-content input")
 
     # Focus on the input to open the options menu
     input_.send_keys("x")
@@ -43,7 +43,7 @@ def update_options(search_value):
     input_.send_keys("o")
 
     time.sleep(0.25)
-    options = dash_dcc.find_elements("#my-dynamic-dropdown .dash-dropdown-option")
+    options = dash_dcc.find_elements(".dash-dropdown-options .dash-dropdown-option")
 
     # Should show all options.
     assert len(options) == 3
@@ -52,7 +52,7 @@ def update_options(search_value):
     input_.send_keys("n")
 
     time.sleep(0.25)
-    options = dash_dcc.find_elements("#my-dynamic-dropdown .dash-dropdown-option")
+    options = dash_dcc.find_elements(".dash-dropdown-options .dash-dropdown-option")
 
     assert len(options) == 1
     assert options[0].text == "Montreal"

components/dash-core-components/tests/integration/dropdown/test_localization.py

@@ -28,32 +28,26 @@ def test_ddlo001_translations(dash_duo):
 
     dash_duo.find_element("#dropdown").click()
     dash_duo.wait_for_contains_text(
-        "#dropdown .dash-dropdown-action-button:first-child", "Sélectionner tout"
+        ".dash-dropdown-action-button:first-child", "Sélectionner tout"
     )
     dash_duo.wait_for_contains_text(
-        "#dropdown .dash-dropdown-action-button:last-child", "Désélectionner tout"
+        ".dash-dropdown-action-button:last-child", "Désélectionner tout"
     )
 
-    search_input = dash_duo.find_element("#dropdown .dash-dropdown-search")
+    search_input = dash_duo.find_element(".dash-dropdown-search")
     assert search_input.accessible_name == "Rechercher"
 
     search_input.send_keys(1)
-    assert (
-        dash_duo.find_element("#dropdown .dash-dropdown-clear").accessible_name
-        == "Annuler"
-    )
+    assert dash_duo.find_element(".dash-dropdown-clear").accessible_name == "Annuler"
 
-    dash_duo.find_element("#dropdown .dash-dropdown-action-button:first-child").click()
+    dash_duo.find_element(".dash-dropdown-action-button:first-child").click()
 
     search_input.send_keys(9)
-    assert (
-        dash_duo.find_element("#dropdown .dash-dropdown-option").text
-        == "Aucun d'options"
-    )
+    assert dash_duo.find_element(".dash-dropdown-option").text == "Aucun d'options"
 
     assert (
         dash_duo.find_element(
-            "#dropdown .dash-dropdown-trigger .dash-dropdown-clear"
+            ".dash-dropdown-trigger .dash-dropdown-clear"
         ).accessible_name
         == "Effacer les sélections"
     )
@@ -80,32 +74,28 @@ def test_ddlo002_partial_translations(dash_duo):
 
     dash_duo.find_element("#dropdown").click()
     dash_duo.wait_for_contains_text(
-        "#dropdown .dash-dropdown-action-button:first-child", "Select All"
+        ".dash-dropdown-action-button:first-child", "Select All"
     )
     dash_duo.wait_for_contains_text(
-        "#dropdown .dash-dropdown-action-button:last-child", "Deselect All"
+        ".dash-dropdown-action-button:last-child", "Deselect All"
     )
 
-    search_input = dash_duo.find_element("#dropdown .dash-dropdown-search")
+    search_input = dash_duo.find_element(".dash-dropdown-search")
     assert search_input.accessible_name == "Lookup"
 
     search_input.send_keys(1)
     assert (
-        dash_duo.find_element("#dropdown .dash-dropdown-clear").accessible_name
-        == "Clear search"
+        dash_duo.find_element(".dash-dropdown-clear").accessible_name == "Clear search"
     )
 
-    dash_duo.find_element("#dropdown .dash-dropdown-action-button:first-child").click()
+    dash_duo.find_element(".dash-dropdown-action-button:first-child").click()
 
     search_input.send_keys(9)
-    assert (
-        dash_duo.find_element("#dropdown .dash-dropdown-option").text
-        == "No options found"
-    )
+    assert dash_duo.find_element(".dash-dropdown-option").text == "No options found"
 
     assert (
         dash_duo.find_element(
-            "#dropdown .dash-dropdown-trigger .dash-dropdown-clear"
+            ".dash-dropdown-trigger .dash-dropdown-clear"
         ).accessible_name
         == "Clear selection"
     )

components/dash-core-components/tests/integration/dropdown/test_remove_option.py

@@ -183,9 +183,9 @@ def on_value(value):
 
     dropdown = dash_dcc.find_element("#drop")
     dropdown.click()
-    select_input = dash_dcc.find_element("#drop .dash-dropdown-search")
+    select_input = dash_dcc.find_element(".dash-dropdown-search")
     select_input.send_keys("a")
-    dash_dcc.find_element("#drop .dash-dropdown-option").send_keys(Keys.SPACE)
+    dash_dcc.find_element(".dash-dropdown-option").send_keys(Keys.SPACE)
 
     dash_dcc.wait_for_text_to_equal("#output", "Value=a")
     dash_dcc.wait_for_text_to_equal("#count-output", "2")

components/dash-core-components/tests/integration/dropdown/test_styles.py

@@ -2,8 +2,8 @@
 from dash.dcc import Dropdown
 from dash.html import Div
 from dash.dash_table import DataTable
-
 from flaky import flaky
+from selenium.webdriver.common.action_chains import ActionChains
 
 
 @flaky(max_runs=3)
@@ -40,10 +40,16 @@ def test_ddst001_cursor_should_be_pointer(dash_duo):
     dash_duo.start_server(app)
 
     dash_duo.find_element("#dropdown").click()
-    dash_duo.wait_for_element("#dropdown .dash-dropdown-options")
+    dash_duo.wait_for_element(".dash-dropdown-options")
 
-    items = dash_duo.find_elements(
-        "#dropdown .dash-dropdown-options .dash-dropdown-option"
-    )
+    items = dash_duo.find_elements(".dash-dropdown-options .dash-dropdown-option")
 
     assert items[0].value_of_css_property("cursor") == "pointer"
+
+    # If the search element is visible, then we should be able to click on it.
+    search_element = dash_duo.find_element(".dash-dropdown-search")
+    actions = ActionChains(dash_duo.driver)
+    actions.move_to_element_with_offset(search_element, 8, 8).click().perform()
+
+    # The dropdown should remain open after clicking into the search bar
+    dash_duo.wait_for_element(".dash-dropdown-options")