Fixed #61 - Accessibility update for dropdown, add missing variables

primefaces · Oct 9, 2023 · 570c823 · 570c823
1 parent 351aa23
commit 570c823
Show file tree

Hide file tree

Showing 47 changed files with 111 additions and 15 deletions.
diff --git a/theme-base/components/input/_dropdown.scss b/theme-base/components/input/_dropdown.scss
@@ -26,6 +26,7 @@
             color: $inputPlaceholderTextColor;
         }
 
+        &:focus,
         &:enabled:focus {
             outline: 0 none;
             box-shadow: none;
@@ -44,6 +45,10 @@
         color: $inputIconColor;
         right: $inputGroupAddOnMinWidth;
     }
+
+    &.p-invalid.p-component {
+        @include invalid-input();
+    }
 }
 
 .p-dropdown-panel {
@@ -88,18 +93,23 @@
             &.p-highlight {
                 color: $highlightTextColor;
                 background: $highlightBg;
-            }
 
-            &:not(.p-highlight):not(.p-disabled):hover {
-                color: $inputListItemTextHoverColor;
-                background: $inputListItemHoverBg;
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
             }
-        }
 
-        .p-dropdown-empty-message {
-            padding: $inputListItemPadding;
-            color: $inputListItemTextColor;
-            background: $inputListItemBg;
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextFocusColor;
+                    background: $inputListItemFocusBg;
+                }
+
+                &:hover {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+            }
         }
 
         .p-dropdown-item-group {
@@ -109,11 +119,13 @@
             background: $submenuHeaderBg;
             font-weight: $submenuHeaderFontWeight;
         }
-    }
-}
 
-p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    @include invalid-input();
+        .p-dropdown-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+        }
+    }
 }
 
 .p-input-filled {
@@ -123,7 +135,7 @@ p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
         &:not(.p-disabled):hover {
             background-color: $inputFilledHoverBg;
         }
-
+    
         &:not(.p-disabled).p-focus {
             background-color: $inputFilledFocusBg;
 

diff --git a/themes/arya/_variables.scss b/themes/arya/_variables.scss
@@ -93,6 +93,8 @@ $inputListItemBg:transparent !default;
 $inputListItemTextColor:$shade000 !default;
 $inputListItemHoverBg:$hoverBg !default;
 $inputListItemTextHoverColor:$shade000 !default;
+$inputListItemFocusBg:rgba(255,255,255,.09) !default;
+$inputListItemTextFocusColor:$shade000 !default;
 $inputListItemBorder:0 none !default;
 $inputListItemBorderRadius:0 !default;
 $inputListItemMargin:0 !default;

diff --git a/themes/arya/arya-blue/_variables.scss b/themes/arya/arya-blue/_variables.scss
@@ -6,5 +6,6 @@ $primaryTextColor: #212529 !default;
 
 $highlightBg: rgba(100, 181, 246, .16) !default;
 $highlightTextColor: rgba(255,255,255,.87) !default;
+$highlightFocusBg: rgba($primaryColor, .24) !default;
 
 @import '../_variables';
diff --git a/themes/arya/arya-green/_variables.scss b/themes/arya/arya-green/_variables.scss
@@ -6,5 +6,6 @@ $primaryTextColor: #212529 !default;
 
 $highlightBg: rgba(129, 199, 132, .16) !default;
 $highlightTextColor: rgba(255,255,255,.87) !default;
+$highlightFocusBg: rgba($primaryColor, .24) !default;
 
 @import '../_variables';
diff --git a/themes/arya/arya-orange/_variables.scss b/themes/arya/arya-orange/_variables.scss
@@ -6,5 +6,6 @@ $primaryTextColor: #212529 !default;
 
 $highlightBg: rgba(255, 213, 79, 0.16) !default;
 $highlightTextColor: rgba(255,255,255,.87) !default;
+$highlightFocusBg: rgba($primaryColor, .24) !default;
 
-@import '../_variables';
+@import '../_variables'
diff --git a/themes/arya/arya-purple/_variables.scss b/themes/arya/arya-purple/_variables.scss
@@ -6,5 +6,6 @@ $primaryTextColor: #ffffff !default;
 
 $highlightBg: rgba(186, 104, 200, 0.16) !default;
 $highlightTextColor: rgba(255,255,255,.87) !default;
+$highlightFocusBg: rgba($primaryColor, .24) !default;
 
 @import '../_variables';
diff --git a/themes/bootstrap4/bootstrap4-dark/_variables_dark.scss b/themes/bootstrap4/bootstrap4-dark/_variables_dark.scss
@@ -95,6 +95,8 @@ $inputListItemBg:transparent !default;
 $inputListItemTextColor:$shade000 !default;
 $inputListItemHoverBg:$hoverBg !default;
 $inputListItemTextHoverColor:$shade000 !default;
+$inputListItemFocusBg:rgba(255,255,255,.09) !default;
+$inputListItemTextFocusColor:$shade000 !default;
 $inputListItemBorder:0 none !default;
 $inputListItemBorderRadius:0 !default;
 $inputListItemMargin:0 !default;

diff --git a/themes/bootstrap4/bootstrap4-dark/blue/_variables.scss b/themes/bootstrap4/bootstrap4-dark/blue/_variables.scss
@@ -7,5 +7,6 @@ $primaryAccentBg: #476880 !default;
 
 $highlightBg: $primaryColor !default;
 $highlightTextColor: $primaryTextColor !default;
+$highlightFocusBg: darken($primaryColor, 8%) !default;
 
 @import '../_variables_dark';
diff --git a/themes/bootstrap4/bootstrap4-dark/purple/_variables.scss b/themes/bootstrap4/bootstrap4-dark/purple/_variables.scss
@@ -7,5 +7,6 @@ $primaryAccentBg: #614c6c !default;
 
 $highlightBg: $primaryColor !default;
 $highlightTextColor: $primaryTextColor !default;
+$highlightFocusBg: darken($primaryColor, 8%) !default;
 
 @import '../_variables_dark';
diff --git a/themes/bootstrap4/bootstrap4-light/_variables_light.scss b/themes/bootstrap4/bootstrap4-light/_variables_light.scss
@@ -95,6 +95,8 @@ $inputListItemBg:transparent !default;
 $inputListItemTextColor:$shade900 !default;
 $inputListItemHoverBg:$shade200 !default;
 $inputListItemTextHoverColor:$shade900 !default;
+$inputListItemFocusBg:$shade300 !default;
+$inputListItemTextFocusColor:$shade900 !default;
 $inputListItemBorder:0 none !default;
 $inputListItemBorderRadius:0 !default;
 $inputListItemMargin:0 !default;

diff --git a/themes/bootstrap4/bootstrap4-light/blue/_variables.scss b/themes/bootstrap4/bootstrap4-light/blue/_variables.scss
@@ -7,5 +7,6 @@ $primaryAccentBg: #cce5ff !default;
 
 $highlightBg: $primaryColor !default;
 $highlightTextColor: $primaryTextColor !default;
+$highlightFocusBg: darken($primaryColor, 8%) !default;
 
 @import '../_variables_light'
diff --git a/themes/bootstrap4/bootstrap4-light/purple/_variables.scss b/themes/bootstrap4/bootstrap4-light/purple/_variables.scss
@@ -7,5 +7,6 @@ $primaryAccentBg: #e7d8ef !default;
 
 $highlightBg: $primaryColor !default;
 $highlightTextColor: $primaryTextColor !default;
+$highlightFocusBg: darken($primaryColor, 8%) !default;
 
 @import '../_variables_light';
diff --git a/themes/fluent/fluent-light/_variables.scss b/themes/fluent/fluent-light/_variables.scss
@@ -114,6 +114,8 @@ $inputListItemBg:transparent !default;
 $inputListItemTextColor:$neutralPrimary !default;
 $inputListItemHoverBg:$neutralLighter !default;
 $inputListItemTextHoverColor:$neutralPrimary !default;
+$inputListItemFocusBg:$neutralQuaternaryAlt !default;
+$inputListItemTextFocusColor:$neutralPrimary !default;
 $inputListItemBorder:1px solid transparent !default;
 $inputListItemBorderRadius:0 !default;
 $inputListItemMargin:0 !default;

diff --git a/themes/lara/lara-dark/_variables.scss b/themes/lara/lara-dark/_variables.scss
@@ -94,6 +94,8 @@ $inputListItemBg:transparent !default;
 $inputListItemTextColor:$shade000 !default;
 $inputListItemHoverBg:$hoverBg !default;
 $inputListItemTextHoverColor:$shade000 !default;
+$inputListItemFocusBg:$shade600 !default;
+$inputListItemTextFocusColor:$shade000 !default;
 $inputListItemBorder:0 none !default;
 $inputListItemBorderRadius:0 !default;
 $inputListItemMargin:0 !default;

diff --git a/themes/lara/lara-light/_variables.scss b/themes/lara/lara-light/_variables.scss
@@ -96,6 +96,8 @@ $inputListItemBg:transparent !default;
 $inputListItemTextColor:$shade700 !default;
 $inputListItemHoverBg:$shade200 !default;
 $inputListItemTextHoverColor:$shade700 !default;
+$inputListItemFocusBg:$shade300 !default;
+$inputListItemTextFocusColor:$shade700 !default;
 $inputListItemBorder:0 none !default;
 $inputListItemBorderRadius:0 !default;
 $inputListItemMargin:0 !default;

diff --git a/themes/luna/_variables.scss b/themes/luna/_variables.scss
@@ -83,6 +83,8 @@ $inputListItemBg: transparent !default;
 $inputListItemTextColor: $textColor !default;
 $inputListItemHoverBg: #4c4c4c !default;
 $inputListItemTextHoverColor: $textColor !default;
+$inputListItemFocusBg: #3c3c3c !default;
+$inputListItemTextFocusColor:$textColor !default;
 $inputListItemBorder: 0 none !default;
 $inputListItemBorderRadius: 0 !default;
 $inputListItemMargin: 0 !default;

diff --git a/themes/luna/luna-amber/_variables.scss b/themes/luna/luna-amber/_variables.scss
@@ -7,5 +7,6 @@ $primaryTextColor: #212529 !default;
 //highlight
 $highlightBg: $primaryColor !default;
 $highlightTextColor: $primaryTextColor !default;
+$highlightFocusBg: darken($primaryColor, .24) !default;
 
 @import '../_variables';
diff --git a/themes/luna/luna-blue/_variables.scss b/themes/luna/luna-blue/_variables.scss
@@ -7,5 +7,6 @@ $primaryTextColor: #212529 !default;
 //highlight
 $highlightBg: $primaryColor !default;
 $highlightTextColor: $primaryTextColor !default;
+$highlightFocusBg: darken($primaryColor, .08) !default;
 
 @import '../_variables';
diff --git a/themes/luna/luna-green/_variables.scss b/themes/luna/luna-green/_variables.scss
@@ -7,5 +7,6 @@ $primaryTextColor: #212529 !default;
 //highlight
 $highlightBg: $primaryColor !default;
 $highlightTextColor: $primaryTextColor !default;
+$highlightFocusBg: darken($primaryColor, .08) !default;
 
 @import '../_variables';
diff --git a/themes/luna/luna-pink/_variables.scss b/themes/luna/luna-pink/_variables.scss
@@ -7,5 +7,6 @@ $primaryTextColor: #212529 !default;
 //highlight
 $highlightBg: $primaryColor !default;
 $highlightTextColor: $primaryTextColor !default;
+$highlightFocusBg: darken($primaryColor, .08) !default;
 
 @import '../_variables';
diff --git a/themes/material/material-dark/_variables.scss b/themes/material/material-dark/_variables.scss
@@ -41,6 +41,7 @@ $errorColor:#f44435 !default;
 //selected state
 $highlightBg:rgba($primaryColor, .16) !default;
 $highlightTextColor:$primaryColor !default;
+$highlightFocusBg: rgba($primaryColor, .24) !default;
 
 //scale
 $scaleSM:0.875 !default;
@@ -93,6 +94,8 @@ $inputListItemBg:transparent !default;
 $inputListItemTextColor:$textColor !default;
 $inputListItemHoverBg:hsla(0,0%,100%,.04) !default;
 $inputListItemTextHoverColor:$textColor !default;
+$inputListItemFocusBg:hsla(0,0%,100%,.12) !default;
+$inputListItemTextFocusColor:$textColor !default;
 $inputListItemBorder:0 none !default;
 $inputListItemBorderRadius:0 !default;
 $inputListItemMargin:0 !default;

diff --git a/themes/material/material-light/_variables.scss b/themes/material/material-light/_variables.scss
@@ -41,6 +41,7 @@ $errorColor:#B00020 !default;
 //selected state
 $highlightBg:rgba($primaryColor, .12) !default;
 $highlightTextColor:$primaryColor !default;
+$highlightFocusBg: rgba($primaryColor, .24) !default;
 
 //scale
 $scaleSM:0.875 !default;
@@ -93,6 +94,8 @@ $inputListItemBg:transparent !default;
 $inputListItemTextColor:$textColor !default;
 $inputListItemHoverBg:rgba(0,0,0,.04) !default;
 $inputListItemTextHoverColor:$textColor !default;
+$inputListItemFocusBg:rgba(0,0,0,.12) !default;
+$inputListItemTextFocusColor:$textColor !default;
 $inputListItemBorder:0 none !default;
 $inputListItemBorderRadius:0 !default;
 $inputListItemMargin:0 !default;

diff --git a/themes/mira/_variables.scss b/themes/mira/_variables.scss
@@ -65,6 +65,7 @@ $errorColor:#BF616A !default;
 //highlight
 $highlightBg: $white300 !default;
 $highlightTextColor: $black400 !default;
+$highlightFocusBg: darken($highlightBg, 8%) !default;
 
 //scale
 $scaleSM:0.875 !default;
@@ -118,6 +119,8 @@ $inputListItemBg:transparent !default;
 $inputListItemTextColor:$black100 !default;
 $inputListItemHoverBg:transparent !default;
 $inputListItemTextHoverColor:$black100 !default;
+$inputListItemFocusBg:$white200 !default;
+$inputListItemTextFocusColor:$black100 !default;
 $inputListItemBorder:0 none !default;
 $inputListItemBorderRadius:0 !default;
 $inputListItemMargin:0 !default;

diff --git a/themes/mytheme/variables/_form.scss b/themes/mytheme/variables/_form.scss
@@ -98,6 +98,14 @@ $inputListItemHoverBg: #e9ecef;
 /// @group form
 $inputListItemTextHoverColor: $textColor;
 
+/// Focus state background for an individual itrem of an input list
+/// @group form
+$inputListItemFocusBg: #f8f9fa;
+
+/// Focus state text color for an individual itrem of an input list
+/// @group form
+$inputListItemTextFocusColor: $textColor;
+
 /// Border for an individual itrem of an input list
 /// @group form
 $inputListItemBorder: 0 none;

diff --git a/themes/mytheme/variables/_general.scss b/themes/mytheme/variables/_general.scss
@@ -26,6 +26,10 @@ $highlightBg: $primaryColor;
 /// @group general
 $highlightTextColor: $primaryTextColor;
 
+/// Background of a highlighted item in focus state
+/// @group general
+$highlightFocusBg: rgba($primaryColor, .24) !default;
+
 /// Radius of the corners
 /// @group general
 $borderRadius: 3px;

diff --git a/themes/nano/_variables.scss b/themes/nano/_variables.scss
@@ -21,6 +21,7 @@ $colors: (
 
 $highlightBg: #44A1D9 !default;
 $highlightTextColor: #ffffff !default;
+$highlightFocusBg: darken($primaryColor, .08) !default;
 
 //reused color variables
 $shade000:#ffffff !default;    //surface
@@ -105,6 +106,8 @@ $inputListItemBg:transparent !default;
 $inputListItemTextColor:$shade700 !default;
 $inputListItemHoverBg:$shade200 !default;
 $inputListItemTextHoverColor:$shade700 !default;
+$inputListItemFocusBg:#d2d6db !default;
+$inputListItemTextFocusColor:$shade700 !default;
 $inputListItemBorder:0 none !default;
 $inputListItemBorderRadius:0 !default;
 $inputListItemMargin:0 !default;

diff --git a/themes/nova/_variables.scss b/themes/nova/_variables.scss
@@ -83,6 +83,8 @@ $inputListItemBg: transparent !default;
 $inputListItemTextColor: $textColor !default;
 $inputListItemHoverBg: #eaeaea !default;
 $inputListItemTextHoverColor: $textColor !default;
+$inputListItemFocusBg: #d6d6d6 !default;
+$inputListItemTextFocusColor:$textColor !default;
 $inputListItemBorder: 0 none !default;
 $inputListItemBorderRadius: 0 !default;
 $inputListItemMargin: 0 !default;

diff --git a/themes/nova/nova-accent/_variables.scss b/themes/nova/nova-accent/_variables.scss
@@ -5,6 +5,7 @@ $primaryTextColor: #ffffff !default;
 
 $highlightBg: #e02365 !default;
 $highlightTextColor: #ffffff !default;
+$highlightFocusBg: darken(#e02365, .08) !default;
 
 $containerHeaderBorderColor: $primaryColor !default;
 $containerHeaderBorder: 1px solid $containerHeaderBorderColor !default;

diff --git a/themes/nova/nova-alt/_variables.scss b/themes/nova/nova-alt/_variables.scss
@@ -5,6 +5,7 @@ $primaryTextColor: #ffffff !default;
 
 $highlightBg: $primaryColor !default;
 $highlightTextColor: $primaryTextColor !default;
+$highlightFocusBg: darken($primaryColor, .08) !default;
 
 $containerHeaderBorderColor: #333333 !default;
 $containerHeaderBorder: 1px solid $containerHeaderBorderColor !default;

diff --git a/themes/nova/nova-vue/_variables.scss b/themes/nova/nova-vue/_variables.scss
@@ -5,6 +5,7 @@ $primaryTextColor: #ffffff !default;
 
 $highlightBg: $primaryColor !default;
 $highlightTextColor: $primaryTextColor !default;
+$highlightFocusBg: darken($primaryColor, .08) !default;
 
 $containerHeaderBorderColor: #c8c8c8 !default;
 $containerHeaderBorder: 1px solid $containerHeaderBorderColor !default;

diff --git a/themes/nova/nova/_variables.scss b/themes/nova/nova/_variables.scss
@@ -5,6 +5,7 @@ $primaryTextColor: #ffffff !default;
 
 $highlightBg: $primaryColor !default;
 $highlightTextColor: $primaryTextColor !default;
+$highlightFocusBg: darken($primaryColor, .08) !default;
 
 $containerHeaderBorderColor: #c8c8c8 !default;
 $containerHeaderBorder: 1px solid $containerHeaderBorderColor !default;

diff --git a/themes/rhea/_variables.scss b/themes/rhea/_variables.scss
@@ -23,6 +23,7 @@ $colors: (
 $highlightBg: #AFD3C8 !default;
 $highlightBgDark: #8DC8B5 !default;
 $highlightTextColor: #385048 !default;
+$highlightFocusBg: darken($highlightBg, .24) !default;
 
 //global
 $fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
@@ -94,6 +95,8 @@ $inputListItemBg: transparent !default;
 $inputListItemTextColor: $textColor !default;
 $inputListItemHoverBg: #f4f4f4 !default;
 $inputListItemTextHoverColor: $textColor !default;
+$inputListItemFocusBg: #e0e0e0 !default;
+$inputListItemTextFocusColor:$textColor !default;
 $inputListItemBorder: 0 none !default;
 $inputListItemBorderRadius: 0 !default;
 $inputListItemMargin: 0 !default;

diff --git a/themes/saga/_variables.scss b/themes/saga/_variables.scss
@@ -96,6 +96,8 @@ $inputListItemBg:transparent !default;
 $inputListItemTextColor:$shade700 !default;
 $inputListItemHoverBg:$shade200 !default;
 $inputListItemTextHoverColor:$shade700 !default;
+$inputListItemFocusBg:$shade300 !default;
+$inputListItemTextFocusColor:$shade700 !default;
 $inputListItemBorder:0 none !default;
 $inputListItemBorderRadius:0 !default;
 $inputListItemMargin:0 !default;