feat(OnyxSelect): update the hover and focus colors of the chevron icon

.changeset/selfish-houses-rule.md

@@ -0,0 +1,7 @@
+---
+"sit-onyx": minor
+---
+
+feat(OnyxSelect): update the hover and focus colors of the chevron icon
+
+Also a the title attribute to the chevron icon to show a native browser tooltip when hovering

packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.ct.tsx

@@ -341,8 +341,7 @@ test.describe("Invalidity handling screenshots", () => {
 
       // invalid is only triggered after open/closing the flyout
       await input.click();
-      await component.click();
-      await input.blur();
+      await page.getByRole("document").click(); // reset mouse
 
       await component.evaluate((element) => {
         element.style.padding = `0 5rem 3rem 2rem`;
@@ -369,15 +368,15 @@ test.describe("Invalidity handling screenshots", () => {
         modelValue={column === "with-value" ? MOCK_VARIED_OPTIONS_VALUES[0] : undefined}
       />
     ),
-    beforeScreenshot: async (component, _page, _column, row) => {
+    beforeScreenshot: async (component, page, _column, row) => {
       const input = component.getByLabel("Test label");
 
       // invalid is only triggered after open/closing the flyout
       await input.click();
       await component.click();
 
       if (row !== "focus") {
-        await input.blur();
+        await page.getByRole("document").click(); // reset mouse
       }
       if (row === "hover") await input.hover();
     },

packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue

@@ -191,6 +191,7 @@ const blockTyping = (event: KeyboardEvent) => {
             class="onyx-select-input__button"
             type="button"
             :aria-label="t('select.toggleDropDown')"
+            :title="t('select.toggleDropDown')"
             tabindex="-1"
             :disabled="disabled || props.readonly || props.loading"
           >
@@ -231,48 +232,6 @@ const blockTyping = (event: KeyboardEvent) => {
       }
     }
 
-    /* button styles */
-    &__button {
-      all: initial;
-      display: flex;
-      color: var(--onyx-color-text-icons-neutral-soft);
-
-      &:enabled {
-        cursor: pointer;
-      }
-    }
-
-    // button on focus (not readonly)
-    &:has(
-        .onyx-select-input__native:enabled:read-write:focus,
-        .onyx-select-input__native--show-focus:enabled:read-write
-      ) {
-      .onyx-select-input__button {
-        color: var(--onyx-color-text-icons-primary-intense);
-      }
-
-      &:has(.onyx-select-input__native:user-invalid),
-      &:has(.onyx-select-input__native:invalid.onyx-select-input__native--touched) {
-        .onyx-select-input__button {
-          color: var(--onyx-color-text-icons-neutral-intense);
-        }
-      }
-    }
-
-    // button on hover (not readonly)
-    .onyx-select-input__wrapper:has(.onyx-select-input__native:enabled:read-write):hover {
-      .onyx-select-input__button {
-        color: var(--onyx-color-text-icons-primary-medium);
-      }
-
-      &:has(.onyx-select-input__native:user-invalid),
-      &:has(.onyx-select-input__native:invalid.onyx-select-input__native--touched) {
-        .onyx-select-input__button {
-          color: var(--onyx-color-text-icons-neutral-medium);
-        }
-      }
-    }
-
     &__badge {
       display: block;
       cursor: pointer;

packages/sit-onyx/src/styles/mixins/input.scss

@@ -28,6 +28,7 @@
   --background-color: var(--onyx-color-base-background-blank);
   --outline-color: var(--onyx-color-base-primary-200);
   --outline-style: none;
+  --button-color: var(--onyx-color-text-icons-neutral-soft);
 
   &__wrapper {
     border-radius: var(--onyx-radius-sm);
@@ -46,13 +47,18 @@
     padding: $vertical-padding var(--onyx-density-sm);
     height: calc(1lh + 2 * #{$vertical-padding});
 
-    &:has(#{$base-selector}__native:read-write:hover) {
+    &:has(#{$base-selector}__native:read-write):hover {
       --border-color: var(--hover-border-color, var(--onyx-color-base-primary-400));
+      --button-color: var(--button-hover-color, var(--onyx-color-text-icons-primary-medium));
     }
 
     &:has(#{$base-selector}__native:enabled:focus, #{$base-selector}__native--show-focus) {
       --border-color: var(--focus-border-color, var(--onyx-color-component-cta-default));
       --outline-style: solid;
+
+      &:has(#{$base-selector}__native:read-write) {
+        --button-color: var(--button-focus-color, var(--onyx-color-text-icons-primary-intense));
+      }
     }
 
     // :read-only is valid for readonly and disabled state so we put shared styles for both states here
@@ -63,7 +69,7 @@
 
     // styles for readonly but NOT disabled
     &:has(#{$base-selector}__native:enabled:read-only) {
-      &:has(#{$base-selector}__native:hover) {
+      &:hover {
         --border-color: var(--onyx-color-base-neutral-400);
       }
 
@@ -84,13 +90,31 @@
     color: var(--onyx-color-text-icons-primary-intense);
   }
 
+  &__button {
+    all: initial;
+    display: flex;
+    color: var(--button-color);
+
+    &:enabled {
+      cursor: pointer;
+    }
+
+    &:focus-visible {
+      outline: 0.25rem solid var(--outline-color);
+      border-radius: var(--onyx-radius-sm);
+      --button-color: var(--button-focus-color, var(--onyx-color-text-icons-primary-intense));
+    }
+  }
+
   @include success(#{$base-selector}__native) {
     --message-display: none;
     --border-color: var(--onyx-color-base-success-500);
     --outline-color: var(--onyx-color-base-success-200);
     --selection-color: var(--onyx-color-base-success-200);
     --focus-border-color: var(--onyx-color-base-success-500);
     --hover-border-color: var(--onyx-color-base-success-400);
+    --button-hover-color: var(--onyx-color-text-icons-success-medium);
+    --button-focus-color: var(--onyx-color-text-icons-success-intense);
   }
 
   @include invalid(#{$base-selector}__native) {
@@ -102,6 +126,8 @@
     --selection-color: var(--onyx-color-base-danger-200);
     --focus-border-color: var(--onyx-color-component-cta-invalid);
     --hover-border-color: var(--onyx-color-base-danger-400);
+    --button-hover-color: var(--onyx-color-text-icons-danger-medium);
+    --button-focus-color: var(--onyx-color-text-icons-danger-intense);
   }
 
   &__native {