fix: missing expert slot name in heading component (#5539)

MIGRATION.md

@@ -280,3 +280,7 @@ version:
 
 - prop `_label` now required
 - prop `_version` removed (use `_label` instead)
+
+kol-heading:
+
+- slot `default` renamed to `expert`

packages/components/.eslintrc.js

@@ -49,6 +49,13 @@ config.overrides.push({
 	rules: {
 		'jsx-a11y/no-access-key': 'off',
 		// 'react/no-unused-state': 'error',
+
+		'jsx-a11y/label-has-associated-control': [
+			2,
+			{
+				depth: 3, // allow labels deeply nested into spans
+			},
+		],
 	},
 });
 config.overrides.push({

packages/components/src/components/a11y.css

@@ -1,20 +1,19 @@
+/*
+ * This file contains all rules for accessibility.
+ */
 @layer kol-global {
-	/*
-	 * This file contains all rules for accessibility.
-	 */
 	:host {
 		/*
 		 * Minimum size of interactive elements.
 		 */
 		--a11y-min-size: 44px;
-		font-size: inherit;
-	}
-
-	* {
 		/*
 		 * Verdana is an accessible font that can be used without requiring additional loading time.
 		 */
 		font-family: Verdana;
+	}
+
+	* {
 		/*
 		 * This rule enables the word dividing for all texts. That is important for high zoom levels.
 		 */

packages/components/src/components/accordion/test/html.mock.ts

@@ -27,12 +27,16 @@ export const getAccordionHtml = (
 					_level: props._level,
 				},
 				{
-					default: `${getButtonWcHtml({
-						_ariaControls: 'nonce',
-						_ariaExpanded: props._open === true,
-						_icons: `codicon codicon-${props._open ? 'chrome-minimize' : 'add'}`,
-						_label: props._label,
-					})}`,
+					expert: `${getButtonWcHtml(
+						{
+							_ariaControls: 'nonce',
+							_ariaExpanded: props._open === true,
+							_icons: `codicon codicon-${props._open ? 'chrome-minimize' : 'add'}`,
+							_label: props._label,
+						},
+						undefined,
+						' slot="expert"'
+					)}`,
 				}
 			)}
 			<div class="wrapper">

packages/components/src/components/alert/test/html.mock.ts

@@ -56,7 +56,7 @@ export const getAlertHtml = (props: Props, innerHTML = '', additionalHTML = ''):
 										_level: props._level,
 									},
 									{
-										default: props._label,
+										expert: props._label,
 									}
 							  )
 							: ''

packages/components/src/components/card/test/html.mock.ts

@@ -21,7 +21,7 @@ export const getCardHtml = (props: Props): string => {
 						_level: props._level,
 					},
 					{
-						default: '',
+						expert: '',
 					}
 				)}
 			</div>

packages/components/src/components/heading/component.tsx

@@ -61,49 +61,49 @@ export class KolHeadingWc implements API {
 				return (
 					<h1 class="headline">
 						{headline}
-						<slot />
+						<slot name="expert" />
 					</h1>
 				);
 			case 2:
 				return (
 					<h2 class="headline">
 						{headline}
-						<slot />
+						<slot name="expert" />
 					</h2>
 				);
 			case 3:
 				return (
 					<h3 class="headline">
 						{headline}
-						<slot />
+						<slot name="expert" />
 					</h3>
 				);
 			case 4:
 				return (
 					<h4 class="headline">
 						{headline}
-						<slot />
+						<slot name="expert" />
 					</h4>
 				);
 			case 5:
 				return (
 					<h5 class="headline">
 						{headline}
-						<slot />
+						<slot name="expert" />
 					</h5>
 				);
 			case 6:
 				return (
 					<h6 class="headline">
 						{headline}
-						<slot />
+						<slot name="expert" />
 					</h6>
 				);
 			default:
 				return (
 					<strong class="headline">
 						{headline}
-						<slot />
+						<slot name="expert" />
 					</strong>
 				);
 		}

packages/components/src/components/heading/shadow.tsx

@@ -18,7 +18,7 @@ export class KolHeading implements Props {
 	public render(): JSX.Element {
 		return (
 			<kol-heading-wc _label={this._label} _level={this._level} _secondaryHeadline={this._secondaryHeadline}>
-				<slot />
+				<slot name="expert" slot="expert" />
 			</kol-heading-wc>
 		);
 	}

packages/components/src/components/heading/test/html.mock.ts

@@ -5,7 +5,7 @@ import { Props, States } from '../types';
 export const getHeadingWcHtml = (
 	props: Props,
 	slots: {
-		default?: string;
+		expert?: string;
 	} = {},
 	additionalAttrs = ''
 ): string => {
@@ -22,22 +22,22 @@ export const getHeadingWcHtml = (
 		<kol-heading-wc${additionalAttrs}>
 			<${tag} class="headline">
 				${state._label}
-				${typeof slots.default === 'string' ? slots.default : `<slot />`}
+				${slots.expert !== undefined ? slots.expert : '<slot name="expert" slot="expert"></slot>'}
 			</${tag}>
 		</kol-heading-wc>`;
 };
 
 export const getHeadingHtml = (
 	props: Props,
 	slots: {
-		default?: string;
+		expert?: string;
 	} = {}
 ): string => {
 	return `
 <kol-heading>
 	<mock:shadow-root>
 		${getHeadingWcHtml(props)}
 	</mock:shadow-root>
-	${slots.default !== undefined ? slots.default : ''}
+	${slots.expert !== undefined ? slots.expert : ''}
 </kol-heading>`;
 };

packages/components/src/components/style.css

@@ -33,15 +33,6 @@
 		cursor: pointer;
 	}
 
-	/* font-family is NOT inherited all HTML elements. */
-	button,
-	input,
-	option,
-	select,
-	textarea {
-		font-family: inherit;
-	}
-
 	/* This is the text label. */
 	.icon-only > kol-span-wc > span > span {
 		display: none;

packages/samples/react/src/components/handout/basic.tsx

@@ -689,7 +689,9 @@ export const HandoutBasic: FC = () => (
 		<div className="grid gap-4 grid-cols-[auto_1fr_1fr] items-center">
 			<KolKolibri className="block w-75px" _labeled={false}></KolKolibri>
 			<KolHeading _label="" _level={1}>
-				Kolibri-Handout <small>for {getThemeName(getTheme())}</small>
+				<span slot="expert">
+					Kolibri-Handout <small>for {getThemeName(getTheme())}</small>
+				</span>
 			</KolHeading>
 			<KolDetails _label="Abstract" _open>
 				The handout shows a selection of KoliBri components in the style of <strong>{getThemeName(getTheme())}</strong>. Since KoliBri offers self-contained,

packages/samples/react/src/components/heading/badged.tsx

@@ -6,22 +6,34 @@ import { FC } from 'react';
 export const HeadingBadged: FC = () => (
 	<div className="grid gap-4">
 		<KolHeading _label="" _level={1}>
-			Eine Überschrift mit einem <KolBadge _color="#f00" _label="Label"></KolBadge>
+			<span slot="expert">
+				Eine Überschrift mit einem <KolBadge _color="#f00" _label="Label"></KolBadge>
+			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={2}>
-			Eine Überschrift mit einem <KolBadge _color="#0f0" _label="Label"></KolBadge>
+			<span slot="expert">
+				Eine Überschrift mit einem <KolBadge _color="#0f0" _label="Label"></KolBadge>
+			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={3}>
-			Eine Überschrift mit einem <KolBadge _color="#00f" _label="Label"></KolBadge>
+			<span slot="expert">
+				Eine Überschrift mit einem <KolBadge _color="#00f" _label="Label"></KolBadge>
+			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={4}>
-			Eine Überschrift mit einem <KolBadge _color="#800080" _label="Label"></KolBadge>
+			<span slot="expert">
+				Eine Überschrift mit einem <KolBadge _color="#800080" _label="Label"></KolBadge>
+			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={5}>
-			Eine Überschrift mit einem <KolBadge _color="#ff0" _label="Label"></KolBadge>
+			<span slot="expert">
+				Eine Überschrift mit einem <KolBadge _color="#ff0" _label="Label"></KolBadge>
+			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={6}>
-			Eine Überschrift mit einem <KolBadge _color="#ffc0cb" _label="Label"></KolBadge>
+			<span slot="expert">
+				Eine Überschrift mit einem <KolBadge _color="#ffc0cb" _label="Label"></KolBadge>
+			</span>
 		</KolHeading>
 	</div>
 );

packages/samples/react/src/scenarios/complex-form/component.tsx

@@ -19,8 +19,8 @@ type Zeiten = {
 export const TerminComponent: FC = () => (
 	<>
 		<div className="grid sm:grid-cols-1 gap-2 my-3">
-			<KolHeading>Terminreservierung</KolHeading>
-			<KolHeading _level={2}>Termine für Einwohnermelde- (incl. Pass- und Ausweisangelegenheiten) und Kraftfahrzeugangelegenheiten</KolHeading>
+			<KolHeading _label="Terminreservierung" />
+			<KolHeading _label="Termine für Einwohnermelde- (incl. Pass- und Ausweisangelegenheiten) und Kraftfahrzeugangelegenheiten" _level={2} />
 			<div style={{ fontFamily: 'Arial' }}>
 				<p className="py-2">Derzeit kann generell nur mit vorheriger Terminvereinbarung bei den Bürgerdiensten vorgesprochen werden.</p>
 				<p className="py-2">
@@ -141,22 +141,22 @@ export const TerminComponent: FC = () => (
 				]}
 			>
 				<div>
-					<KolHeading _level={2}>Wählen Sie einen Stadtteil aus</KolHeading>
+					<KolHeading _level={2} _label="Wählen Sie einen Stadtteil aus" />
 					<TerminLocationComponent onSubmitted={() => {}} />
 				</div>
 				<div>
-					<KolHeading _level={2}>Wählen Sie einen Termin aus</KolHeading>
+					<KolHeading _level={2} _label="Wählen Sie einen Termin aus" />
 					<TerminScheduleComponent onSubmitted={() => {}} />
 				</div>
 				<div>
-					<KolHeading _level={2}>Geben Sie Ihre Kontaktdaten ein</KolHeading>
+					<KolHeading _level={2} _label="Geben Sie Ihre Kontaktdaten ein" />
 					<TerminKopfdatenComponent onSubmitted={() => {}} />
 				</div>
 			</KolTabs>
 		</div>
 		<div className="grid sm:grid-cols-1 gap-2">
 			<div className="border-top"></div>
-			<KolHeading _level={3}>Fortschritt</KolHeading>
+			<KolHeading _level={3} _label="Fortschritt" />
 			<KolProgress _value={0} _max={100} _unit="Prozent des Formulars"></KolProgress>
 		</div>
 	</>

packages/samples/react/src/style.scss

@@ -1,9 +1,6 @@
-* {
-	font-family: Verdana;
-}
-
 body {
 	margin: 0;
+	font-family: Verdana;
 }
 
 dl,
@@ -45,4 +42,4 @@ hr {
 	.no-print * {
 		display: none !important;
 	}
-}
+}