Fix #74 - OrderList | Accessibility Enhancements

primefaces · Nov 13, 2023 · cfdc002 · cfdc002
1 parent f0ef59b
commit cfdc002
Showing 1 changed file with 13 additions and 46 deletions.
diff --git a/theme-base/components/data/_orderlist.scss b/theme-base/components/data/_orderlist.scss
@@ -12,67 +12,45 @@
         color: $panelHeaderTextColor;
         border: $panelHeaderBorder;
         padding: $panelHeaderPadding;
+        font-weight: $panelHeaderFontWeight;
         border-bottom: 0 none;
         border-top-right-radius: $borderRadius;
         border-top-left-radius: $borderRadius;
-
-        .p-orderlist-title {
-            font-weight: $panelHeaderFontWeight;
-        }
     }
 
-    .p-orderlist-filter-container {
-        padding: $panelHeaderPadding;
-        background: $panelContentBg;
-        border: $panelHeaderBorder;
-        border-bottom: 0 none;
-
-        .p-orderlist-filter-input {
-            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
-        }
-
-        .p-orderlist-filter-icon {
-            right: nth($inputPadding, 2);
-            color: $inputIconColor;
-        }
-    }      
-
     .p-orderlist-list {
         border: $panelContentBorder;
         background: $panelContentBg;
         color: $panelContentTextColor;
         padding: $inputListPadding;
         border-bottom-right-radius: $borderRadius;
         border-bottom-left-radius: $borderRadius;
+        outline: 0 none;
 
         .p-orderlist-item {
             padding: $inputListItemPadding;
             margin: $inputListItemMargin;
             border: $inputListItemBorder;
             color: $inputListItemTextColor;
             background: $inputListItemBg;
-            transition: $listItemTransition;
+            transition: transform $transitionDuration, $listItemTransition;
 
-            &:focus {
-                @include focused-listitem();
+            &:not(.p-highlight):hover {
+                background: $inputListItemHoverBg;
+                color: $inputListItemTextHoverColor;
+            }
+
+            &.p-focus {
+                color: $inputListItemTextFocusColor;
+                background: $inputListItemFocusBg;
             }
 
             &.p-highlight {
                 color: $highlightTextColor;
                 background: $highlightBg;
-            }
-        }
 
-        .p-orderlist-empty-message {
-            padding: $inputListItemPadding;
-            color: $inputListItemTextColor;
-        }
-
-        &:not(.cdk-drop-list-dragging) {
-            .p-orderlist-item {
-                &:not(.p-highlight):hover {
-                    background: $inputListItemHoverBg;
-                    color: $inputListItemTextHoverColor;
+                &.p-focus {
+                    background: $highlightFocusBg;
                 }
             }
         }
@@ -89,15 +67,4 @@
             }
         }
     }
-}
-
-.p-orderlist-item {
-    &.cdk-drag-preview {
-        padding: $inputListItemPadding;
-        box-shadow: $inputOverlayShadow;
-        border: $inputListItemBorder;
-        color: $inputListItemTextColor;
-        background: $panelContentBg;
-        margin: 0;
-    }
 }