Abbr: Replace tooltip for full form with a simple description in pare…

…ntheses.

Refs: #6627

docs/BREAKING_CHANGES.v3.md

@@ -0,0 +1,14 @@
+# Breaking Changes for version 3
+
+## Introduction
+
+New major versions of KoliBri are developed with the goal of simplifying maintenance and support and promoting further development.
+
+For more information, see the [KoliBri Maintenance and Support Strategy](https://github.com/public-ui/kolibri/blob/develop/MIGRATION.md).
+
+## Components
+
+### kol-abbr
+
+- Visually, the tooltip has been replaced by a simple label shown in parentheses after the abbreviation.
+- The property `_tooltipAlign` has been removed.

packages/components/src/components/abbr/readme.md

@@ -1,41 +1,27 @@
 # Abbr
 
-Die **Abbr**-Komponente implementiert den HTML-Tag `abbr`, wobei hier jedoch der Tooltip barrierefrei ist.
-Der Tooltip für die Beschreibung wird bei Focus oder Hover der **Abbr**-Komponente angezeigt und vorgelesen.
+Die **Abbr**-Komponente implementiert den HTML-Tag `abbr` um eine Abkürzung darzustellen. Optional kann ein Label übergeben werden, das in Klammern nach der Abkürzung angezeigt wird.
 
 ## Konstruktion
 
 ### Code
 
 ```html
-<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="top">Abbr</kol-abbr> mit Tooltip oben.</p>
-<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="right">Abbr</kol-abbr> mit Tooltip rechts.</p>
-<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="bottom">Abbr</kol-abbr> mit Tooltip unten.</p>
-<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="left">Abbr</kol-abbr> mit Tooltip links.</p>
+<p>Ich <KolAbbr _label="zum Beispiel">z. B.</KolAbbr> bin eine Abkürzung mit Label.</p>
+<p>Ich <KolAbbr>z. B.</KolAbbr> bin eine Abkürzung ohne Label.</p>
 ```
 
 ### Beispiel
 
-<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="top">Abbr</kol-abbr> mit Tooltip oben.</p>
-<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="right">Abbr</kol-abbr> mit Tooltip rechts.</p>
-<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="bottom">Abbr</kol-abbr> mit Tooltip unten.</p>
-<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="left">Abbr</kol-abbr> mit Tooltip links.</p>
+<p>Ich <KolAbbr _label="zum Beispiel">z. B.</KolAbbr> bin eine Abkürzung mit Label.</p>
+<p>Ich <KolAbbr>z. B.</KolAbbr> bin eine Abkürzung ohne Label.</p>
 
 ## Verwendung
 
 ### Angabe der Beschreibung zur Abkürzung
 
 Der Begriff bzw. die Erklärung wird über das Attribut **`_label`** übergeben, die Abkürzung bzw. der erklärungswürdige Begriff kommt zwischen die Tags im HTML.
 
-### Ausrichtung des Tooltip
-
-Über das Attribut **`_tooltip-align`** wird die Positionierung des ToolTip, relativ zur Abkürzung, festgelegt.
-
-## Barrierefreiheit
-
-Die Abbr-Komponente wurde von KoliBri umgesetzt, weil der Standard-Tooltip nicht barrierefrei bzgl. der Skalierung ist.
-Der KoliBri Tooltip kann von Screenreadern vorgelesen werden und verändert seine Größe beim Zoomen korrekt.
-
 ## Links und Referenzen
 
 - <kol-link _href="https://developer.mozilla.org/de/docs/Web/HTML/Element/abbr" _target="_blank"></kol-link>
@@ -44,15 +30,14 @@ Der KoliBri Tooltip kann von Screenreadern vorgelesen werden und verändert sein
 
 ## Properties
 
-| Property              | Attribute        | Description                                                                                                        | Type                                                  | Default     |
-| --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------- | ----------- |
-| `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                              | `undefined` |
-| `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                          | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'`     |
+| Property | Attribute | Description                                                                                                        | Type                  | Default     |
+| -------- | --------- | ------------------------------------------------------------------------------------------------------------------ | --------------------- | ----------- |
+| `_label` | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string \| undefined` | `undefined` |
 
 ## Slots
 
-| Slot | Description                             |
-| ---- | --------------------------------------- |
-|      | Der Begriff, der erläutert werden soll. |
+| Slot | Description                    |
+| ---- | ------------------------------ |
+|      | The abbreviation (short form). |
 
 ---

packages/components/src/components/abbr/shadow.tsx

@@ -1,14 +1,10 @@
 import type { JSX } from '@stencil/core';
-import { validateLabel, validateTooltipAlign } from '../../schema';
 import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
-
-import { nonce } from '../../utils/dev.utils';
-import { KolTooltipWcTag } from '../../core/component-names';
-
-import type { AbbrAPI, AbbrStates, LabelPropType, TooltipAlignPropType } from '../../schema';
+import type { AbbrAPI, AbbrStates, LabelPropType } from '../../schema';
+import { validateLabel } from '../../schema';
 
 /**
- * @slot - Der Begriff, der erläutert werden soll.
+ * @slot - The abbreviation (short form).
  */
 @Component({
 	tag: 'kol-abbr',
@@ -18,65 +14,34 @@ import type { AbbrAPI, AbbrStates, LabelPropType, TooltipAlignPropType } from '.
 	shadow: true,
 })
 export class KolAbbr implements AbbrAPI {
-	private readonly nonce = nonce();
-
 	public render(): JSX.Element {
 		return (
 			<Host class="kol-abbr">
-				{/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
-				<abbr aria-labelledby={this.nonce} role="definition" tabindex="0" title={this.state._label}>
-					<span title="">
-						<slot />
-					</span>
+				<abbr>
+					<slot />
 				</abbr>
-				<KolTooltipWcTag _align={this.state._tooltipAlign} _id={this.nonce} _label={this.state._label}></KolTooltipWcTag>
+				{this.state._label ? ` (${this.state._label})` : ''}
 			</Host>
 		);
 	}
 
 	/**
 	 * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
 	 */
-	@Prop() public _label!: LabelPropType;
-
-	/**
-	 * Defines where to show the Tooltip preferably: top, right, bottom or left.
-	 */
-	@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';
+	@Prop() public _label?: LabelPropType;
 
-	/**
-	 * Die State-Parameter repräsentieren den inneren State
-	 * einer Komponente.
-	 *
-	 * @see: https://stenciljs.com/docs/state
-	 */
 	@State() public state: AbbrStates = {
 		_label: '', // ⚠ required
-		_tooltipAlign: 'top',
 	};
 
-	/**
-	 * Die Watch-Methoden dienen der Möglichkeit zur
-	 * Validierung der Werte eines Properties und
-	 * dem Mapping dessen auf einen anderen internen
-	 * State-Typ.
-	 *
-	 * @see: https://stenciljs.com/docs/properties#prop-validation
-	 */
 	@Watch('_label')
 	public validateLabel(value?: LabelPropType): void {
 		validateLabel(this, value, {
 			required: true,
 		});
 	}
 
-	@Watch('_tooltipAlign')
-	public validateTooltipAlign(value?: TooltipAlignPropType): void {
-		validateTooltipAlign(this, value);
-	}
-
 	public componentWillLoad(): void {
 		this.validateLabel(this._label);
-		this.validateTooltipAlign(this._tooltipAlign);
 	}
 }

packages/components/src/components/abbr/style.scss

@@ -5,8 +5,4 @@
 	:host {
 		font-size: rem(16);
 	}
-
-	:host > abbr {
-		cursor: help;
-	}
 }

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

@@ -1,25 +1,21 @@
 import { mixMembers } from 'stencil-awesome-test';
 
 import type { AbbrProps } from '../../../schema';
-import { KolTooltipWcTag } from '../../../core/component-names';
 
 export const getAbbrHtml = (props: AbbrProps): string => {
 	props = mixMembers(
 		{
 			_label: '', // ⚠ required
-			_tooltipAlign: 'top',
 		},
 		props,
 	);
 	return `
 <kol-abbr  class="kol-abbr">
   <mock:shadow-root>
-    <abbr aria-labelledby="nonce" role="definition" tabindex="0" ${typeof props._label === 'string' ? ` title="${props._label}"` : ''}>
-      <span>
-        <slot />
-      </span>
+    <abbr>
+      <slot></slot>
     </abbr>
-		<${KolTooltipWcTag} _align=${props._tooltipAlign} _id="nonce" _label=${props._label}></${KolTooltipWcTag}>
+    ${props._label ? ` (${props._label})` : ''}
   </mock:shadow-root>
 </kol-abbr>`;
 };

packages/components/src/components/abbr/test/snapshot.spec.tsx

@@ -20,7 +20,6 @@ executeTests<AbbrProps>(
 	},
 	{
 		_label: ['Text'],
-		_tooltipAlign: ['left', 'bottom', 'right', 'top'],
 	},
 	getAbbrHtml,
 	{

packages/components/src/schema/components/abbr.ts

@@ -1,8 +1,8 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { PropLabel, PropTooltipAlign } from '../props';
+import type { PropLabel } from '../props';
 
-type RequiredProps = PropLabel;
-type OptionalProps = PropTooltipAlign;
+type RequiredProps = NonNullable<unknown>;
+type OptionalProps = PropLabel;
 
 type RequiredStates = RequiredProps & OptionalProps;
 type OptionalStates = NonNullable<unknown>;

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

@@ -7,39 +7,15 @@ import type { FC } from 'react';
 export const AbbrBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>KolAbbr shows the full expansion of an abbreviated term on mouse over. The sample illustrates the different possible alignments for the tooltip.</p>
+			<p>KolAbbr shows an abbreviation and the full form in parentheses, if provided.</p>
 		</SampleDescription>
 
 		<p>
-			I am <KolAbbr _label="zum Beispiel">e.g.</KolAbbr> an abbreviation.
-		</p>
-		<p>
-			I am&nbsp;
-			<KolAbbr _label="zum Beispiel" _tooltipAlign="right">
-				e.g.
-			</KolAbbr>
-			&nbsp;an abbreviation (right).
-		</p>
-		<p>
-			I am&nbsp;
-			<KolAbbr _label="zum Beispiel" _tooltipAlign="bottom">
-				e.g.
-			</KolAbbr>
-			&nbsp;an abbreviation (below).
-		</p>
-		<p>
-			I am&nbsp;
-			<KolAbbr _label="zum Beispiel" _tooltipAlign="left">
-				e.g.
-			</KolAbbr>
-			&nbsp;an abbreviation (left).
+			I am <KolAbbr _label="as an example">e.g.</KolAbbr> an abbreviation.
 		</p>
+
 		<p>
-			I am&nbsp;
-			<KolAbbr _label="zum Beispiel" _tooltipAlign="top">
-				e.g.
-			</KolAbbr>
-			&nbsp;an abbreviation (top).
+			I am <KolAbbr>e.g.</KolAbbr> an abbreviation without label.
 		</p>
 	</>
 );

packages/themes/bmf/src/index.ts

@@ -1,6 +1,5 @@
 import { KoliBri } from '@public-ui/components';
 import globalCss from './global.scss';
-import abbrCss from './components/abbr.scss';
 import accordionCss from './components/accordion.scss';
 import alertCss from './components/alert.scss';
 import avatarCss from './components/avatar.scss';
@@ -83,7 +82,6 @@ export const BMF = KoliBri.createTheme('bmf', {
 	'KOL-INPUT-RANGE': inputRangeCss,
 	'KOL-LINK-BUTTON': linkButtonCss,
 	'KOL-BUTTON-LINK': buttonLinkCss,
-	'KOL-ABBR': abbrCss,
 	'KOL-BREADCRUMB': breadcrumbCss,
 	'KOL-ICON': iconCss,
 	'KOL-SKIP-NAV': skipNavCss,

packages/themes/default/src/index.ts

@@ -1,6 +1,5 @@
 import { KoliBri } from '@public-ui/components';
 import globalCss from './global.scss';
-import abbrCss from './components/abbr.scss';
 import accordionCss from './components/accordion.scss';
 import alertCss from './components/alert.scss';
 import avatarCss from './components/avatar.scss';
@@ -47,7 +46,6 @@ import treeCss from './components/tree.scss';
 
 export const DEFAULT = KoliBri.createTheme('default', {
 	GLOBAL: globalCss,
-	'KOL-ABBR': abbrCss,
 	'KOL-ACCORDION': accordionCss,
 	'KOL-ALERT': alertCss,
 	'KOL-AVATAR': avatarCss,