Fix wcag color contrast on weak text; apply this to dropdown

Author: KoolADE85

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

@@ -8,7 +8,7 @@
     --Dash-Text-Primary: rgba(0, 18, 77, 0.87);
     --Dash-Text-Strong: rgba(0, 9, 38, 0.9);
     --Dash-Text-Weak: rgba(0, 12, 51, 0.65);
-    --Dash-Text-Disabled: rgba(0, 21, 89, 0.3);
+    --Dash-Text-Disabled: rgba(0, 21, 89, 0.6);
     --Dash-Fill-Primary-Hover: rgba(0, 18, 77, 0.04);
     --Dash-Fill-Primary-Active: rgba(0, 18, 77, 0.08);
     --Dash-Fill-Disabled: rgba(0, 24, 102, 0.1);

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

@@ -104,8 +104,11 @@
 
 .dash-dropdown-value-count {
     line-height: 18px;
-    padding: 0 2px;
+    padding: 4px;
+    border-radius: 4px;
+    color: var(--Dash-Text-Weak);
     background: var(--Dash-Fill-Weak);
+    font-size: 0.875em;
 }
 
 .dash-dropdown-search-container {
@@ -219,10 +222,13 @@
     box-shadow: 0 -1px 0 0 var(--Dash-Fill-Disabled) inset;
 }
 
-.dash-dropdown-option input[type='radio'] {
+.dash-dropdown-option
+    .dash-options-list-option-wrapper:has(input[type='radio']) {
+    /* radio buttons are used in single-select dropdowns to aid keyboard
+     * selection and screen readers, but visually, they are hidden
+     */
     width: 0;
-    margin: 0;
-    outline: none;
+    overflow: hidden;
 }
 
 /* Positioning container for the dropdown */