Widget Kontaktbutton

Live-Beispiel

HTML-Quelltext

<div class="frame-vcard">
  <aside aria-label="Kontakt" tabindex="0" class="gs_vcard_toggle">
    <div class="gs_vcard">
      <ul>
        <li>
          <div itemscope="" itemtype="https://schema.org/Person" class="gris_staff_person_vcard">
            <div class="gs_address">
              <div class="h3">
                <a href="/institut/mitarbeitendenverzeichnis/person/Florian.Frings?no_cache=1"> <span itemprop="givenName">Florian</span> <span itemprop="familyName">Frings</span> </a>
              </div>
              <a href="/institut/mitarbeitendenverzeichnis/orga/table/2/all?no_cache=1&amp;cHash=1798aa823a2af1cb1552505cbf943420">
                <b>Präsidialbereich</b>
                <br/>
              </a>
              <a href="/institut/mitarbeitendenverzeichnis/orga/table/2/77?no_cache=1&amp;cHash=37777f2d4de98fc0b956ea2fcd896064">
                Portfolio-Management
                <br/>
              </a>
              <div class="gs_options">
                <span itemprop="telephone">
                  <a href="tel:+4922147694139" class="gris_staff_phone" > <span class="icon-gs-phone pe-2"></span> +49 (0221) 47694-139 </a>
                </span>
                <br />
                <a class="gris_staff_email" href="#" data-mailto-token="ocknvq,Hnqtkcp0HtkpiuBiguku0qti" data-mailto-vector="2"><span class="icon-gs-contact pe-2"></span> E-Mail</a>
                <br/>
                <a class="gris_staff_vcard" href="/styleguide/widgets/kontakte/button/vcard/Florian.Frings?no_cache=1&amp;type=2734658990120&amp;cHash=d5ca3572b20462266ffa683096b20db5"> <span class="icon-gs-vcard pe-2"></span> vCard </a>
              </div>
            </div>
            <div>
              <figure>
                <img src="https://gris.gesis.org/files/photos/person_default.jpg" alt=" " />
              </figure>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </aside>
</div>

HTML-Aufbau

<div class="frame-vcard">: Wrapper dieses Widgets
- <aside aria-label="Kontakt" tabindex="0" class="gs_vcard_toggle">: Ein weiterer Wrapper
  - Attribut aria-label: Label für interaktives Element
- <div class="gs_vcard">: Wrapper des Kontakt-Inhalts.

Initialisierungscode

import { fadeMainContent, unfadeMainContent} from './js/gesis-helpers.js';

const vCardsElements = Array.from( document.getElementsByClassName("gs_vcard_toggle") );
for (const vCardElement of vCardsElements) {
  new VCard(vCardElement, fadeMainContent, unfadeMainContent);
}

Anmerkung: Bei der Instantiierung eines Kontaktbuttons (new VCard(..)) können optionale Callback-Funktionen übergeben werden, welche beim Öffnen respektive Schließen des Kontaktbuttons ausgeführt werden. Dieses Beispiel verwendet die Callback-Funktionen fadeMainContent und unfadeMainContent, welche den Seitenkontext um den Kontaktbuttons herum verdunkeln respektive wieder normalisieren.

Barrierefreiheit

Öffnet und schließt sich beim Rein-/Raushovern mit Mauszeiger
Öffnen/Schließen auch per Tastatur möglich.
Titel des Akkordeons soll aussagekräftig über den Inhalt des Akkordeons informieren.
aria-expanded erlaubt Screenreadern, dem Benutzer mitzuteilen, ob das Akkordeon geöffnet oder geschlossen ist. Diese Information ist wichtig zur Erfüllung der Barrierefreiheit, da Screenreader-Benutzern (z.B. blinden Menschen) vermittelt wird, dass es sich beim Akkordeon um ein Seitenelement handelt, bei welchem weiterer Inhalt durch explizite Interaktion erschließbar ist.
Inhalt geschlossener Tabs wird derzeit bei Seitensuche nicht gefunden (internes Issue).
Implementiert W3C-WAI-ARIA-Spezifikation Accordion.

Responsive Design

Öffnen/Schließen auch per Touch möglich, da auf mobilen Geräten im Allgemeinen keine Hover-Eingabemöglichkeit (Maus) existiert.