update select hover/focus styles

SchwarzIT · Aug 21, 2024 · 263c722 · 263c722
1 parent 6251d84
commit 263c722
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/packages/sit-onyx/src/components/OnyxPagination/OnyxPagination.ct.tsx b/packages/sit-onyx/src/components/OnyxPagination/OnyxPagination.ct.tsx
@@ -45,20 +45,22 @@ test.describe("screenshot tests", () => {
 test.describe("screenshot tests (buttons)", () => {
   executeMatrixScreenshotTest({
     name: "Pagination (buttons)",
-    columns: ["previous", "next"],
+    columns: ["select", "previous", "next"],
     rows: ["default", "hover", "active", "focus-visible"],
     // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410
     disabledAccessibilityRules: ["color-contrast"],
     component: () => <OnyxPagination pages={42} modelValue={2} />,
     beforeScreenshot: async (component, page, column, row) => {
-      const button = page.getByRole("button", {
+      let button = page.getByRole("button", {
         name: column === "previous" ? "previous page" : "next page",
       });
 
+      if (column === "select") button = component.getByLabel("Page selection");
+
       if (row === "hover") await button.hover();
       if (row === "focus-visible") {
         await page.keyboard.press("Tab");
-        await page.keyboard.press("Tab");
+        if (column !== "select") await page.keyboard.press("Tab");
         if (column === "next") await page.keyboard.press("Tab");
       }
       if (row === "active") {

diff --git a/packages/sit-onyx/src/components/OnyxPagination/SelectPagination.vue b/packages/sit-onyx/src/components/OnyxPagination/SelectPagination.vue
@@ -108,6 +108,24 @@ const hasReachedMax = computed(() => props.modelValue >= props.pages);
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
         justify-content: space-between;
+
+        $hover-selector: "&:has(.onyx-select-input__native:enabled:read-write):hover";
+        $focus-selector: "&:has(.onyx-select-input__native:enabled:focus, .onyx-select-input__native--show-focus)";
+
+        #{$focus-selector},
+        #{$hover-selector} {
+          background-color: var(--onyx-color-base-neutral-200);
+          --border-color: unset;
+        }
+
+        // select input chevron icon color
+        &,
+        #{$hover-selector},
+        #{$focus-selector} {
+          .onyx-select-input__button {
+            color: var(--onyx-color-text-icons-neutral-intense);
+          }
+        }
       }
 
       .onyx-select-input__native {