Skip to content

Commit cdd85a9

Browse files
authored
Update abbr.mdx
1 parent 481415a commit cdd85a9

File tree

1 file changed

+5
-19
lines changed

1 file changed

+5
-19
lines changed

docs/30-components/abbr.mdx

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,42 +15,28 @@ import { ExampleLink } from '@site/src/components/ExampleLink';
1515

1616
# Abbr
1717

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.
2019

2120
## Konstruktion
2221

2322
### Code
2423

2524
```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>
3027
```
3128

3229
### Beispiel
3330

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>
3833

3934
## Verwendung
4035

4136
### Angabe der Beschreibung zur Abkürzung
4237

4338
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.
4439

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.
53-
5440
## Links und Referenzen
5541

5642
- <kol-link _href="https://developer.mozilla.org/de/docs/Web/HTML/Element/abbr" _target="_blank"></kol-link>

0 commit comments

Comments
 (0)