feat(OnyxErrorTooltip): use onyx tooltip for errors on checkbox/radio/switch

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

@@ -69,28 +69,38 @@ test.describe("Screenshot tests", () => {
 
   executeMatrixScreenshotTest({
     name: "Checkbox (invalid)",
-    columns: ["unchecked", "indeterminate", "checked", "disabled", "hideLabel"],
+    columns: ["unchecked", "indeterminate", "checked", "hideLabel", "longError", "disabled"],
     rows: ["default", "hover", "focus-visible"],
-    component: (column) => (
-      <OnyxCheckbox
-        label="Test label"
-        modelValue={column === "checked"}
-        indeterminate={column === "indeterminate"}
-        hideLabel={column === "hideLabel"}
-        disabled={column === "disabled"}
-        customError="Test error"
-        value="test-value"
-      />
-    ),
+    component: (column, row) => {
+      const customError =
+        column === "longError"
+          ? { shortMessage: "Error", longMessage: "Further info" }
+          : "Test error";
+      return (
+        <OnyxCheckbox
+          style={row !== "default" ? "padding-top: 3rem;" : ""}
+          label="Test label"
+          modelValue={column === "checked"}
+          indeterminate={column === "indeterminate"}
+          hideLabel={column === "hideLabel"}
+          disabled={column === "disabled"}
+          customError={customError}
+          value="test-value"
+        />
+      );
+    },
     beforeScreenshot: async (component, page, column, row) => {
       const checkbox = component.getByLabel("Test label");
 
       if (column !== "disabled") {
         // invalid only shows if checkbox is touched
+        await checkbox.focus();
+        await page.keyboard.press("Space");
+        await page.keyboard.press("Space");
 
-        await checkbox.click();
-        await checkbox.click();
-        await page.getByRole("document").click(); // reset focus
+        if (row !== "focus-visible") {
+          await checkbox.blur(); // reset focus
+        }
 
         if (column === "indeterminate") {
           await checkbox.evaluate(
@@ -99,8 +109,18 @@ test.describe("Screenshot tests", () => {
         }
       }
 
-      if (row === "hover") await component.hover();
-      if (row === "focus-visible") await page.keyboard.press("Tab");
+      if (row === "hover" && column !== "disabled") {
+        await checkbox.hover();
+      }
+
+      // wait for the tooltip to show up reliably
+      if (["focus-visible", "hover"].includes(row) && column !== "disabled") {
+        // eslint-disable-next-line playwright/no-standalone-expect
+        await expect(
+          component.getByRole("tooltip"),
+          `should show error tooltip for ${row} and ${column}`,
+        ).toBeVisible();
+      }
     },
   });
 
@@ -158,27 +178,20 @@ test.describe("Screenshot tests", () => {
   });
 });
 
-[
-  { hideLabel: true, customError: undefined, expectedTitle: "Label" },
-  { hideLabel: true, customError: "Error", expectedTitle: "Label\nError" },
-  { hideLabel: false, customError: "Error", expectedTitle: "Error" },
-  {
-    hideLabel: false,
-    customError: { shortMessage: "Error", longMessage: "Further info" },
-    expectedTitle: "Error: Further info",
-  },
-].forEach(({ hideLabel, customError, expectedTitle }) => {
-  test(`should have the title "${expectedTitle}"`, async ({ mount, makeAxeBuilder, page }) => {
-    // ARRANGE
-    await mount(<OnyxCheckbox label="Label" hideLabel={hideLabel} customError={customError} />);
-
-    // ASSERT
-    await expect(page.getByTitle(expectedTitle), "should have the expected title").toBeVisible();
-
-    // ACT
-    const accessibilityScanResults = await makeAxeBuilder().analyze();
-
-    // ASSERT
-    expect(accessibilityScanResults.violations).toEqual([]);
-  });
+test("should have the title show the label as title if hideLabel is set", async ({
+  mount,
+  makeAxeBuilder,
+  page,
+}) => {
+  // ARRANGE
+  await mount(<OnyxCheckbox label="Demo Label" hideLabel value="test-value" />);
+
+  // ASSERT
+  await expect(page.getByTitle("Demo Label"), "should have the expected title").toBeVisible();
+
+  // ACT
+  const accessibilityScanResults = await makeAxeBuilder().analyze();
+
+  // ASSERT
+  expect(accessibilityScanResults.violations).toEqual([]);
 });

packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.stories.ts

@@ -56,6 +56,15 @@ export const Required = {
     ...Default.args,
     required: true,
   },
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: `
+      <div style="padding: 2rem 0 0 2.5rem;">
+        <story />
+      </div>`,
+    }),
+  ],
 } satisfies Story;
 
 /**
@@ -64,6 +73,7 @@ export const Required = {
 export const HiddenLabel = {
   args: {
     ...Default.args,
+    label: "Hidden label",
     hideLabel: true,
   },
 } satisfies Story;
@@ -98,8 +108,17 @@ export const CustomError = {
     ...Default.args,
     hideLabel: true,
     customError: {
-      shortMessage: "Example custom error",
-      longMessage: "This text might inform the users what they can do to fix the error.",
+      shortMessage: "Custom error",
+      longMessage: "Further explanation.",
     },
   },
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: `
+      <div style="padding: 2rem 0 0 5rem;">
+        <story />
+      </div>`,
+    }),
+  ],
 } satisfies Story;

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

@@ -4,6 +4,7 @@ import { useDensity } from "../../composables/density";
 import { useRequired } from "../../composables/required";
 import { useCustomValidity } from "../../composables/useCustomValidity";
 import type { SelectOptionValue } from "../../types";
+import OnyxErrorTooltip from "../OnyxErrorTooltip/OnyxErrorTooltip.vue";
 import OnyxLoadingIndicator from "../OnyxLoadingIndicator/OnyxLoadingIndicator.vue";
 import OnyxSkeleton from "../OnyxSkeleton/OnyxSkeleton.vue";
 import type { OnyxCheckboxProps } from "./types";
@@ -35,7 +36,11 @@ const isChecked = computed({
 const { requiredMarkerClass, requiredTypeClass } = useRequired(props);
 const { densityClass } = useDensity(props);
 
-const { vCustomValidity, title } = useCustomValidity({ props, emit });
+const { vCustomValidity, errorMessages } = useCustomValidity({ props, emit });
+
+const title = computed(() => {
+  return props.hideLabel ? props.label : undefined;
+});
 </script>
 
 <template>
@@ -44,43 +49,45 @@ const { vCustomValidity, title } = useCustomValidity({ props, emit });
     <OnyxSkeleton v-if="!props.hideLabel" class="onyx-checkbox-skeleton__label" />
   </div>
 
-  <label v-else class="onyx-checkbox" :class="[requiredTypeClass, densityClass]" :title="title">
-    <div class="onyx-checkbox__container">
-      <OnyxLoadingIndicator v-if="props.loading" class="onyx-checkbox__loading" type="circle" />
-      <input
-        v-else
-        v-model="isChecked"
-        v-custom-validity
-        :aria-label="props.hideLabel ? props.label : undefined"
-        class="onyx-checkbox__input"
-        type="checkbox"
-        :indeterminate="props.indeterminate"
-        :disabled="props.disabled"
-        :required="props.required"
-        :value="props.value"
-        :autofocus="props.autofocus"
-      />
-    </div>
-
-    <template v-if="!props.hideLabel">
-      <p
-        class="onyx-checkbox__label"
-        :class="[
-          `onyx-truncation-${props.truncation}`,
-          // shows the required marker inline for multiline labels
-          props.truncation === 'multiline' ? requiredMarkerClass : undefined,
-        ]"
-      >
-        {{ props.label }}
-      </p>
-      <!-- shows the required marker fixed on the right for truncated labels -->
-      <div
-        v-if="props.truncation === 'ellipsis'"
-        class="onyx-checkbox__marker"
-        :class="[requiredMarkerClass]"
-      ></div>
-    </template>
-  </label>
+  <OnyxErrorTooltip v-else :disabled="props.disabled" :error-messages="errorMessages">
+    <label class="onyx-checkbox" :class="[requiredTypeClass, densityClass]" :title="title">
+      <div class="onyx-checkbox__container">
+        <OnyxLoadingIndicator v-if="props.loading" class="onyx-checkbox__loading" type="circle" />
+        <input
+          v-else
+          v-model="isChecked"
+          v-custom-validity
+          :aria-label="props.hideLabel ? props.label : undefined"
+          class="onyx-checkbox__input"
+          type="checkbox"
+          :indeterminate="props.indeterminate"
+          :disabled="props.disabled"
+          :required="props.required"
+          :value="props.value"
+          :autofocus="props.autofocus"
+        />
+      </div>
+
+      <template v-if="!props.hideLabel">
+        <p
+          class="onyx-checkbox__label"
+          :class="[
+            `onyx-truncation-${props.truncation}`,
+            // shows the required marker inline for multiline labels
+            props.truncation === 'multiline' ? requiredMarkerClass : undefined,
+          ]"
+        >
+          {{ props.label }}
+        </p>
+        <!-- shows the required marker fixed on the right for truncated labels -->
+        <div
+          v-if="props.truncation === 'ellipsis'"
+          class="onyx-checkbox__marker"
+          :class="[requiredMarkerClass]"
+        ></div>
+      </template>
+    </label>
+  </OnyxErrorTooltip>
 </template>
 
 <style lang="scss">
@@ -164,6 +171,11 @@ const { vCustomValidity, title } = useCustomValidity({ props, emit });
       max-width: var(--onyx-checkbox-input-size);
       height: var(--onyx-checkbox-input-size);
     }
+
+    // hide error tooltip before a user interaction happened
+    .onyx-error-tooltip:has(&__input):not(:has(&__input:user-invalid)) .onyx-tooltip {
+      display: none;
+    }
   }
 }
 

packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.stories.ts

@@ -15,6 +15,15 @@ const meta: Meta<typeof OnyxCheckboxGroup> = {
     argTypes: {
       withCheckAll: { control: { type: "boolean" } },
     },
+    decorators: [
+      (story) => ({
+        components: { story },
+        template: `
+      <div style="padding-left: 1rem;">
+        <story />
+      </div>`,
+      }),
+    ],
   }),
 };
 
@@ -32,8 +41,8 @@ const DEMO_OPTIONS = [
     label: "Invalid",
     value: 7,
     customError: {
-      shortMessage: "Example custom error",
-      longMessage: "This text might inform the users what they can do to fix the error.",
+      shortMessage: "Custom error",
+      longMessage: "Further explanation.",
     },
   },
 ] satisfies CheckboxGroupOption[];