@bethinkpl/design-system 43.0.0 → 45.0.0

package/lib/js/components/Callout/Callout.spec.ts

@@ -0,0 +1,257 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { ComponentProps } from 'vue-component-type-helpers';
+import { h } from 'vue';
+import Callout from './Callout.vue';
+import {
+	CALLOUT_ICON_COLORS,
+	CALLOUT_LAYOUTS,
+	CALLOUT_MAIN_TEXT_COLORS,
+	CALLOUT_SIZES,
+} from './Callout.consts';
+import DsFeatureIcon from '../Icons/FeatureIcon';
+import { FEATURE_ICON_SIZES } from '../Icons/FeatureIcon/FeatureIcon.consts';
+import DsTextGroup from '../TextGroup/TextGroup.vue';
+import { TEXT_GROUP_ALIGNS, TEXT_GROUP_SIZES } from '../TextGroup/TextGroup.consts';
+import DsButton from '../Buttons/Button';
+import { BUTTON_COLORS, BUTTON_RADIUSES, BUTTON_SIZES, BUTTON_TYPES } from '../Buttons/Button';
+import { ICONS } from '../Icons/Icon';
+
+type MountOptions = Omit<NonNullable<Parameters<typeof mount<typeof Callout>>[1]>, 'props'> & {
+	props?: Partial<ComponentProps<typeof Callout>>;
+};
+
+const mountCallout = (options: MountOptions = {}) =>
+	mount(Callout, {
+		...options,
+		props: { icon: ICONS.FA_COMMENT_DOTS, ...options.props },
+	});
+
+describe('Callout', () => {
+	it('renders', () => {
+		const wrapper = mountCallout();
+
+		expect(wrapper.exists()).toBe(true);
+	});
+
+	it('renders the feature icon', () => {
+		const wrapper = mountCallout();
+
+		expect(wrapper.findComponent(DsFeatureIcon).exists()).toBe(true);
+		expect(wrapper.findComponent(DsFeatureIcon).props('icon')).toStrictEqual(
+			ICONS.FA_COMMENT_DOTS,
+		);
+	});
+
+	it('passes main and supporting text to the text group', () => {
+		const wrapper = mountCallout({
+			props: {
+				mainText: 'Main text',
+				supportingText: 'Supporting text',
+			},
+		});
+
+		expect(wrapper.find('.ds-callout__text').text()).toContain('Main text');
+		expect(wrapper.find('.ds-callout__text').text()).toContain('Supporting text');
+	});
+
+	describe('layout', () => {
+		it.each(Object.values(CALLOUT_LAYOUTS))('applies the layout class for "%s"', (layout) => {
+			const wrapper = mountCallout({ props: { layout } });
+
+			expect(wrapper.find('.ds-callout').classes()).toContain(`-ds-layout-${layout}`);
+		});
+
+		it('is vertical by default', () => {
+			const wrapper = mountCallout();
+
+			expect(wrapper.find('.ds-callout').classes()).toContain('-ds-layout-vertical');
+		});
+
+		it.each([
+			[CALLOUT_LAYOUTS.VERTICAL, TEXT_GROUP_ALIGNS.CENTER],
+			[CALLOUT_LAYOUTS.HORIZONTAL, TEXT_GROUP_ALIGNS.LEFT],
+		])('aligns the text group for layout "%s"', (layout, expectedAlign) => {
+			const wrapper = mountCallout({ props: { layout } });
+
+			expect(wrapper.findComponent(DsTextGroup).props('align')).toBe(expectedAlign);
+		});
+	});
+
+	describe('size', () => {
+		it('is medium by default', () => {
+			const wrapper = mountCallout();
+
+			expect(wrapper.findComponent(DsFeatureIcon).props('size')).toBe(
+				FEATURE_ICON_SIZES.MEDIUM,
+			);
+			expect(wrapper.findComponent(DsTextGroup).props('size')).toBe(TEXT_GROUP_SIZES.LARGE);
+		});
+
+		it.each([
+			[CALLOUT_SIZES.SMALL, FEATURE_ICON_SIZES.MEDIUM, TEXT_GROUP_SIZES.MEDIUM],
+			[CALLOUT_SIZES.MEDIUM, FEATURE_ICON_SIZES.MEDIUM, TEXT_GROUP_SIZES.LARGE],
+			[CALLOUT_SIZES.LARGE, FEATURE_ICON_SIZES.LARGE, TEXT_GROUP_SIZES.LARGE],
+		])(
+			'maps size "%s" to feature icon "%s" and text group "%s"',
+			(size, featureIconSize, textGroupSize) => {
+				const wrapper = mountCallout({ props: { size } });
+
+				expect(wrapper.findComponent(DsFeatureIcon).props('size')).toBe(featureIconSize);
+				expect(wrapper.findComponent(DsTextGroup).props('size')).toBe(textGroupSize);
+			},
+		);
+	});
+
+	describe('icon color', () => {
+		it.each(Object.values(CALLOUT_ICON_COLORS))(
+			'passes icon color "%s" to the feature icon',
+			(iconColor) => {
+				const wrapper = mountCallout({ props: { iconColor } });
+
+				expect(wrapper.findComponent(DsFeatureIcon).props('color')).toBe(iconColor);
+			},
+		);
+
+		it('is primary by default', () => {
+			const wrapper = mountCallout();
+
+			expect(wrapper.findComponent(DsFeatureIcon).props('color')).toBe(
+				CALLOUT_ICON_COLORS.PRIMARY,
+			);
+		});
+	});
+
+	describe('main text color', () => {
+		it.each(Object.values(CALLOUT_MAIN_TEXT_COLORS))(
+			'passes main text color "%s" to the text group',
+			(mainTextColor) => {
+				const wrapper = mountCallout({ props: { mainTextColor } });
+
+				expect(wrapper.findComponent(DsTextGroup).props('mainTextColor')).toBe(
+					mainTextColor,
+				);
+			},
+		);
+
+		it('is primary by default', () => {
+			const wrapper = mountCallout();
+
+			expect(wrapper.findComponent(DsTextGroup).props('mainTextColor')).toBe(
+				CALLOUT_MAIN_TEXT_COLORS.PRIMARY,
+			);
+		});
+	});
+
+	describe('eyebrow text', () => {
+		it('does not render the eyebrow by default', () => {
+			const wrapper = mountCallout();
+
+			expect(wrapper.findComponent(DsTextGroup).props('eyebrowText')).toBe(null);
+			expect(wrapper.find('.ds-textGroup__eyebrow').exists()).toBe(false);
+		});
+
+		it('renders the eyebrow when eyebrowText is provided', () => {
+			const wrapper = mountCallout({ props: { eyebrowText: 'Eyebrow text' } });
+
+			expect(wrapper.find('.ds-textGroup__eyebrow').text()).toBe('Eyebrow text');
+		});
+
+		it('never uppercases the eyebrow', () => {
+			const wrapper = mountCallout({ props: { eyebrowText: 'Eyebrow text' } });
+
+			expect(wrapper.findComponent(DsTextGroup).props('isEyebrowTextUppercase')).toBe(false);
+			expect(wrapper.find('.ds-textGroup__eyebrow').classes()).not.toContain('-ds-uppercase');
+		});
+	});
+
+	describe('actions', () => {
+		it('renders a default primary button with the button label and icon', () => {
+			const wrapper = mountCallout({
+				props: {
+					buttonLabel: 'Confirm',
+					buttonIcon: ICONS.FA_COMMENT_DOTS,
+				},
+			});
+
+			const button = wrapper.findComponent(DsButton);
+			expect(button.exists()).toBe(true);
+			expect(button.text()).toBe('Confirm');
+			expect(button.props('iconLeft')).toStrictEqual(ICONS.FA_COMMENT_DOTS);
+			expect(button.props('color')).toBe(BUTTON_COLORS.PRIMARY);
+			expect(button.props('type')).toBe(BUTTON_TYPES.FILLED);
+			expect(button.props('size')).toBe(BUTTON_SIZES.SMALL);
+			expect(button.props('radius')).toBe(BUTTON_RADIUSES.ROUNDED);
+		});
+
+		it.each(Object.values(CALLOUT_ICON_COLORS))(
+			'keeps the filled primary button for icon color "%s"',
+			(iconColor) => {
+				const wrapper = mountCallout({ props: { buttonLabel: 'Confirm', iconColor } });
+
+				const button = wrapper.findComponent(DsButton);
+				expect(button.props('color')).toBe(BUTTON_COLORS.PRIMARY);
+				expect(button.props('type')).toBe(BUTTON_TYPES.FILLED);
+			},
+		);
+
+		it('emits button-clicked when the default button is clicked', async () => {
+			const wrapper = mountCallout({
+				props: {
+					buttonLabel: 'Confirm',
+				},
+			});
+
+			await wrapper.findComponent(DsButton).trigger('click');
+
+			expect(wrapper.emitted('button-clicked')).toHaveLength(1);
+		});
+
+		it('renders the actions slot instead of the default button', () => {
+			const wrapper = mountCallout({
+				props: {
+					buttonLabel: 'Default button',
+				},
+				slots: {
+					actions: () => h('span', { class: 'custom-action' }, 'Custom action'),
+				},
+			});
+
+			expect(wrapper.find('.custom-action').exists()).toBe(true);
+			expect(wrapper.findComponent(DsButton).exists()).toBe(false);
+		});
+
+		it('does not render the actions block when there is no button label and no slot', () => {
+			const wrapper = mountCallout();
+
+			expect(wrapper.find('.ds-callout__actions').exists()).toBe(false);
+			expect(wrapper.findComponent(DsButton).exists()).toBe(false);
+		});
+
+		it('renders the actions block when only the slot is provided', () => {
+			const wrapper = mountCallout({
+				slots: {
+					actions: () => h('span', { class: 'custom-action' }, 'Custom action'),
+				},
+			});
+
+			expect(wrapper.find('.ds-callout__actions').exists()).toBe(true);
+		});
+
+		it('adds the stacked actions modifier on the root when isActionVertical is set', () => {
+			const wrapper = mountCallout({
+				props: {
+					isActionVertical: true,
+				},
+			});
+
+			expect(wrapper.find('.ds-callout').classes()).toContain('-ds-actions-vertical');
+		});
+
+		it('does not add the stacked actions modifier by default', () => {
+			const wrapper = mountCallout();
+
+			expect(wrapper.find('.ds-callout').classes()).not.toContain('-ds-actions-vertical');
+		});
+	});
+});

package/lib/js/components/Callout/Callout.stories.ts

@@ -0,0 +1,209 @@
+import { ComponentProps } from 'vue-component-type-helpers';
+import { Meta, StoryObj } from '@storybook/vue3';
+import { action } from '@storybook/addon-actions';
+
+import Callout from './Callout.vue';
+import {
+	CALLOUT_ICON_COLORS,
+	CALLOUT_LAYOUTS,
+	CALLOUT_MAIN_TEXT_COLORS,
+	CALLOUT_SIZES,
+} from './Callout.consts';
+import DsButton from '../Buttons/Button';
+import { BUTTON_COLORS, BUTTON_SIZES, BUTTON_TYPES } from '../Buttons/Button/Button.consts';
+import { ICONS } from '../Icons/Icon';
+
+type CalloutProps = ComponentProps<typeof Callout>;
+
+const VERTICAL_FIGMA_URL =
+	'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=17359-1009&m=dev';
+const HORIZONTAL_FIGMA_URL =
+	'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=17760-416&m=dev';
+
+/**
+ * Clearing a text control yields `''`, which TextGroup renders as a `&nbsp;` placeholder row.
+ * Mapping it to `null` removes the row instead, which is what an empty control should mean.
+ */
+const emptyToNull = (value?: string | null) => value || null;
+
+const mapArgs = (args: CalloutProps) => ({
+	...args,
+	icon: ICONS[args.icon],
+	buttonIcon: ICONS[args.buttonIcon],
+	eyebrowText: emptyToNull(args.eyebrowText),
+	mainText: emptyToNull(args.mainText),
+	supportingText: emptyToNull(args.supportingText),
+	buttonLabel: emptyToNull(args.buttonLabel),
+});
+
+const meta: Meta<typeof Callout> = {
+	title: 'Components/Callout',
+	component: Callout,
+	render: (args: CalloutProps) => ({
+		components: { Callout },
+		setup() {
+			return { onButtonClicked: action('button-clicked') };
+		},
+		computed: {
+			props() {
+				return mapArgs(args);
+			},
+		},
+		template: `<div style="max-width: 500px;"><Callout v-bind="props" @button-clicked="onButtonClicked" /></div>`,
+	}),
+	argTypes: {
+		layout: {
+			control: 'select',
+			options: Object.values(CALLOUT_LAYOUTS),
+		},
+		size: {
+			control: 'select',
+			options: Object.values(CALLOUT_SIZES),
+		},
+		iconColor: {
+			control: 'select',
+			options: Object.values(CALLOUT_ICON_COLORS),
+		},
+		mainTextColor: {
+			control: 'select',
+			options: Object.values(CALLOUT_MAIN_TEXT_COLORS),
+		},
+		icon: {
+			control: 'select',
+			options: Object.keys(ICONS),
+		},
+		buttonIcon: {
+			control: 'select',
+			options: [null, ...Object.keys(ICONS)],
+		},
+		eyebrowText: { control: 'text' },
+		mainText: { control: 'text' },
+		supportingText: { control: 'text' },
+		buttonLabel: { control: 'text' },
+		isActionVertical: { control: 'boolean' },
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof Callout>;
+
+export const Interactive: Story = {
+	args: {
+		layout: CALLOUT_LAYOUTS.VERTICAL,
+		size: CALLOUT_SIZES.MEDIUM,
+		iconColor: CALLOUT_ICON_COLORS.PRIMARY,
+		mainTextColor: CALLOUT_MAIN_TEXT_COLORS.PRIMARY,
+		icon: 'FA_COMMENT_DOTS' as unknown as CalloutProps['icon'],
+		eyebrowText: '',
+		mainText: 'Main text tutaj sobie będzie',
+		supportingText: 'Supporting text tutaj będzie',
+		buttonLabel: 'Button label',
+		buttonIcon: null,
+		isActionVertical: false,
+	},
+};
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: VERTICAL_FIGMA_URL,
+	},
+};
+
+export const WithActionsSlot: Story = {
+	render: (args: CalloutProps) => ({
+		components: { Callout, DsButton },
+		setup() {
+			return { args, ICONS, BUTTON_COLORS, BUTTON_SIZES, BUTTON_TYPES };
+		},
+		computed: {
+			props() {
+				return mapArgs(args);
+			},
+		},
+		template: `
+			<div style="max-width: 500px;">
+				<Callout v-bind="props">
+					<template #actions>
+						<ds-button :color="BUTTON_COLORS.NEUTRAL" :type="BUTTON_TYPES.OUTLINED" :size="BUTTON_SIZES.SMALL">Cancel</ds-button>
+						<ds-button :color="BUTTON_COLORS.PRIMARY" :type="BUTTON_TYPES.FILLED" :size="BUTTON_SIZES.SMALL">Confirm</ds-button>
+					</template>
+				</Callout>
+			</div>`,
+	}),
+	args: {
+		layout: CALLOUT_LAYOUTS.VERTICAL,
+		size: CALLOUT_SIZES.MEDIUM,
+		iconColor: CALLOUT_ICON_COLORS.PRIMARY,
+		mainTextColor: CALLOUT_MAIN_TEXT_COLORS.PRIMARY,
+		icon: 'FA_COMMENT_DOTS' as unknown as CalloutProps['icon'],
+		mainText: 'Main text tutaj sobie będzie',
+		supportingText: 'Supporting text tutaj będzie',
+		isActionVertical: false,
+	},
+};
+
+WithActionsSlot.parameters = {
+	design: {
+		type: 'figma',
+		url: VERTICAL_FIGMA_URL,
+	},
+};
+
+/**
+ * The full variant matrix, laid out for side-by-side comparison with the Figma component set
+ * (node 17696:2260).
+ */
+export const Variants: Story = {
+	render: () => ({
+		components: { Callout },
+		setup() {
+			return {
+				ICONS,
+				CALLOUT_LAYOUTS,
+				CALLOUT_SIZES,
+				sizes: Object.values(CALLOUT_SIZES),
+			};
+		},
+		template: `
+			<div style="display: flex; flex-direction: column; gap: 48px;">
+				<section v-for="layout in [CALLOUT_LAYOUTS.VERTICAL, CALLOUT_LAYOUTS.HORIZONTAL]" :key="layout">
+					<h3 style="margin-bottom: 16px;">{{ layout }}</h3>
+					<div style="display: flex; flex-direction: column; gap: 32px; max-width: 500px;">
+						<Callout
+							v-for="size in sizes"
+							:key="size"
+							:layout="layout"
+							:size="size"
+							:icon="ICONS.FA_COMMENT_DOTS"
+							:eyebrow-text="size === CALLOUT_SIZES.SMALL ? 'Eyebrow text' : null"
+							:main-text="'Main text tutaj sobie będzie (' + size + ')'"
+							supporting-text="Supporting text tutaj będzie"
+							button-label="Button small"
+						/>
+						<Callout
+							:layout="layout"
+							:icon="ICONS.FA_COMMENT_DOTS"
+							main-text="Main text tutaj sobie będzie (stacked actions)"
+							supporting-text="Supporting text tutaj będzie"
+							button-label="Button small"
+							is-action-vertical
+						/>
+						<Callout
+							:layout="layout"
+							:icon="ICONS.FA_COMMENT_DOTS"
+							main-text="Main text tutaj sobie będzie (no actions)"
+							supporting-text="Supporting text tutaj będzie"
+						/>
+					</div>
+				</section>
+			</div>`,
+	}),
+};
+
+Variants.parameters = {
+	design: {
+		type: 'figma',
+		url: HORIZONTAL_FIGMA_URL,
+	},
+};

package/lib/js/components/Callout/Callout.vue

@@ -0,0 +1,161 @@
+<template>
+	<div
+		class="ds-callout"
+		:class="{
+			'-ds-layout-vertical': layout === CALLOUT_LAYOUTS.VERTICAL,
+			'-ds-layout-horizontal': layout === CALLOUT_LAYOUTS.HORIZONTAL,
+			'-ds-actions-vertical': isActionVertical,
+		}"
+	>
+		<div class="ds-callout__content">
+			<ds-feature-icon
+				class="ds-callout__icon"
+				:icon="icon"
+				:color="iconColor"
+				:size="featureIconSize"
+				double-background
+			/>
+			<ds-text-group
+				class="ds-callout__text"
+				:eyebrow-text="eyebrowText"
+				:is-eyebrow-text-uppercase="false"
+				:main-text="mainText"
+				:supporting-text="supportingText"
+				:size="textGroupSize"
+				:align="textGroupAlign"
+				:main-text-color="mainTextColor"
+				:is-interactive="false"
+			/>
+		</div>
+		<div v-if="$slots.actions || buttonLabel" class="ds-callout__actions">
+			<slot name="actions">
+				<ds-button
+					:color="BUTTON_COLORS.PRIMARY"
+					:type="BUTTON_TYPES.FILLED"
+					:size="BUTTON_SIZES.SMALL"
+					:radius="BUTTON_RADIUSES.ROUNDED"
+					:icon-left="buttonIcon"
+					@click="$emit('button-clicked', $event)"
+					>{{ buttonLabel }}</ds-button
+				>
+			</slot>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../styles/settings/spacings';
+
+.ds-callout {
+	$self: &;
+
+	display: flex;
+	flex-direction: column;
+	gap: $space-8;
+	width: 100%;
+
+	&.-ds-layout-horizontal:not(.-ds-actions-vertical) {
+		align-items: center;
+		flex-direction: row;
+	}
+
+	&__content {
+		display: flex;
+
+		#{$self}.-ds-layout-vertical & {
+			align-items: center;
+			flex-direction: column;
+			gap: $space-4;
+		}
+
+		#{$self}.-ds-layout-horizontal & {
+			align-items: center;
+			flex: 1 1 auto;
+			gap: $space-6;
+			min-width: 0;
+		}
+	}
+
+	&__actions {
+		display: flex;
+		gap: $space-8;
+
+		#{$self}.-ds-layout-vertical & {
+			justify-content: center;
+			width: 100%;
+		}
+
+		#{$self}.-ds-actions-vertical & {
+			align-items: stretch;
+			flex-direction: column;
+			width: 100%;
+		}
+	}
+}
+</style>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import DsFeatureIcon from '../Icons/FeatureIcon';
+import { FEATURE_ICON_SIZES } from '../Icons/FeatureIcon/FeatureIcon.consts';
+import DsTextGroup from '../TextGroup/TextGroup.vue';
+import { TEXT_GROUP_ALIGNS, TEXT_GROUP_SIZES } from '../TextGroup/TextGroup.consts';
+import DsButton, { BUTTON_RADIUSES } from '../Buttons/Button';
+import { BUTTON_COLORS, BUTTON_SIZES, BUTTON_TYPES } from '../Buttons/Button/Button.consts';
+import { IconItem } from '../Icons/Icon';
+import {
+	CALLOUT_ICON_COLORS,
+	CALLOUT_LAYOUTS,
+	CALLOUT_MAIN_TEXT_COLORS,
+	CALLOUT_SIZES,
+	CalloutIconColor,
+	CalloutLayout,
+	CalloutMainTextColor,
+	CalloutSize,
+} from './Callout.consts';
+
+const {
+	layout = CALLOUT_LAYOUTS.VERTICAL,
+	size = CALLOUT_SIZES.MEDIUM,
+	iconColor = CALLOUT_ICON_COLORS.PRIMARY,
+	eyebrowText = null,
+	mainText = null,
+	supportingText = null,
+	mainTextColor = CALLOUT_MAIN_TEXT_COLORS.PRIMARY,
+	buttonLabel = null,
+	buttonIcon = null,
+	isActionVertical = false,
+} = defineProps<{
+	icon: IconItem;
+	layout?: CalloutLayout;
+	size?: CalloutSize;
+	iconColor?: CalloutIconColor;
+	eyebrowText?: string | null;
+	mainText?: string | null;
+	supportingText?: string | null;
+	mainTextColor?: CalloutMainTextColor;
+	buttonLabel?: string | null;
+	buttonIcon?: IconItem | null;
+	isActionVertical?: boolean;
+}>();
+
+defineEmits<{
+	'button-clicked': [e: Event];
+}>();
+
+defineSlots<{
+	actions?: () => any;
+}>();
+
+const featureIconSize = computed(() =>
+	size === CALLOUT_SIZES.LARGE ? FEATURE_ICON_SIZES.LARGE : FEATURE_ICON_SIZES.MEDIUM,
+);
+
+const textGroupSize = computed(() =>
+	size === CALLOUT_SIZES.SMALL ? TEXT_GROUP_SIZES.MEDIUM : TEXT_GROUP_SIZES.LARGE,
+);
+
+const textGroupAlign = computed(() =>
+	layout === CALLOUT_LAYOUTS.VERTICAL ? TEXT_GROUP_ALIGNS.CENTER : TEXT_GROUP_ALIGNS.LEFT,
+);
+</script>

package/lib/js/components/Callout/index.ts

@@ -0,0 +1,4 @@
+import Callout from './Callout.vue';
+
+export default Callout;
+export * from './Callout.consts';

package/lib/js/components/Cards/Card/Card.vue

@@ -102,7 +102,7 @@
 	}
 
 	&.-ds-elevationTop {
-		box-shadow: $shadow-top-s;
+		box-shadow: $shadow-top-l;
 	}
 
 	&.-ds-elevationNone {

package/lib/js/components/Form/CheckboxGroupField/CheckboxGroupField.spec.ts

@@ -104,6 +104,21 @@ describe('CheckboxGroupField', () => {
 		);
 	});
 
+	it('sets aria-describedby only when a message is rendered', () => {
+		const wrapper = mount(CheckboxGroupField, {
+			props: {
+				label: 'Test Label',
+			},
+			slots: {
+				field: '<div>Content</div>',
+			},
+		});
+
+		expect(
+			wrapper.find('.ds-checkboxGroupField').attributes('aria-describedby'),
+		).toBeUndefined();
+	});
+
 	describe('vee-validate integration', () => {
 		it('integrates with vee-validate form context and reflects initial values', async () => {
 			// eslint-disable-next-line vue/one-component-per-file

package/lib/js/components/Form/CheckboxGroupField/CheckboxGroupField.vue

@@ -5,7 +5,7 @@
 				v-model="value"
 				class="ds-checkboxGroupField"
 				role="group"
-				:aria-describedby="messageId"
+				:aria-describedby="hasMessage ? messageId : undefined"
 				:aria-labelledby="labelId"
 				:disabled="formFieldProps.state === FORM_FIELD_STATES.DISABLED"
 				loop
@@ -64,7 +64,7 @@ const {
 	...rest
 } = defineProps<CheckboxGroupFieldProps>();
 
-defineSlots<CheckboxGroupFieldSlots>();
+const slots = defineSlots<CheckboxGroupFieldSlots>();
 
 const modelValue = defineModel<Array<string>>({
 	default: [],
@@ -77,6 +77,9 @@ const formFieldProps = computed<FormFieldProps>(() => {
 	return extractFormFieldProps(rest, errors.value);
 });
 
+// Avoids pointing `aria-describedby` at a message element that is never rendered.
+const hasMessage = computed(() => !!(formFieldProps.value.messageText || slots.message));
+
 const mappedState = computed(() => {
 	const stateMap: Record<FormFieldState, CheckboxState> = {
 		[FORM_FIELD_STATES.DEFAULT]: CHECKBOX_STATES.DEFAULT,