You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/30-components/abbr.mdx
+5-19Lines changed: 5 additions & 19 deletions
Original file line number
Diff line number
Diff line change
@@ -15,42 +15,28 @@ import { ExampleLink } from '@site/src/components/ExampleLink';
15
15
16
16
# Abbr
17
17
18
-
Die **Abbr**-Komponente implementiert den HTML-Tag `abbr`, wobei hier jedoch der Tooltip barrierefrei ist.
19
-
Der Tooltip für die Beschreibung wird bei Focus oder Hover der **Abbr**-Komponente angezeigt und vorgelesen.
18
+
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.
20
19
21
20
## Konstruktion
22
21
23
22
### Code
24
23
25
24
```html
26
-
<p>Ich bin eine <kol-abbr_label="Abkürzung"_tooltip-align="top">Abbr</kol-abbr> mit Tooltip oben.</p>
27
-
<p>Ich bin eine <kol-abbr_label="Abkürzung"_tooltip-align="right">Abbr</kol-abbr> mit Tooltip rechts.</p>
28
-
<p>Ich bin eine <kol-abbr_label="Abkürzung"_tooltip-align="bottom">Abbr</kol-abbr> mit Tooltip unten.</p>
29
-
<p>Ich bin eine <kol-abbr_label="Abkürzung"_tooltip-align="left">Abbr</kol-abbr> mit Tooltip links.</p>
25
+
<p>Ich <kol-abbr_label="zum Beispiel">z. B.</kol-abbr> bin eine Abkürzung mit Label.</p>
26
+
<p>Ich <kol-abbr>z. B.</kol-abbr> bin eine Abkürzung ohne Label.</p>
30
27
```
31
28
32
29
### Beispiel
33
30
34
-
<p>Ich bin eine <kol-abbr_label="Abkürzung"_tooltip-align="top">Abbr</kol-abbr> mit Tooltip oben.</p>
35
-
<p>Ich bin eine <kol-abbr_label="Abkürzung"_tooltip-align="right">Abbr</kol-abbr> mit Tooltip rechts.</p>
36
-
<p>Ich bin eine <kol-abbr_label="Abkürzung"_tooltip-align="bottom">Abbr</kol-abbr> mit Tooltip unten.</p>
37
-
<p>Ich bin eine <kol-abbr_label="Abkürzung"_tooltip-align="left">Abbr</kol-abbr> mit Tooltip links.</p>
31
+
<p>Ich <kol-abbr_label="zum Beispiel">z. B.</kol-abbr> bin eine Abkürzung mit Label.</p>
32
+
<p>Ich <kol-abbr>z. B.</kol-abbr> bin eine Abkürzung ohne Label.</p>
38
33
39
34
## Verwendung
40
35
41
36
### Angabe der Beschreibung zur Abkürzung
42
37
43
38
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.
44
39
45
-
### Ausrichtung des Tooltip
46
-
47
-
Über das Attribut **`_tooltip-align`** wird die Positionierung des ToolTip, relativ zur Abkürzung, festgelegt.
48
-
49
-
## Barrierefreiheit
50
-
51
-
Die Abbr-Komponente wurde von KoliBri umgesetzt, weil der Standard-Tooltip nicht barrierefrei bzgl. der Skalierung ist.
52
-
Der KoliBri Tooltip kann von Screenreadern vorgelesen werden und verändert seine Größe beim Zoomen korrekt.
0 commit comments