Diese Komponente ist ein generischer Container, der lediglich die Funktionalität einer „Schublade“ beschreibt. Er ist seitlich platziert, initial ausgeblendet und kann durch Nutzerinteraktionen geöffnet und wieder geschlossen werden.
Typische Inhalte dieses Musters sind zum Beispiel:
Filter-Facetten, die sich auf die dargestellten Daten der aktuell angezeigten Maske auswirken.
Eine Suche mit einstellbaren Parametern innerhalb von Datensätzen einer Anwendung.
Erweiterte Hilfefunktionen für den Fall, dass Erklärungstexte zu viel Raum in der Maske beanspruchen würden und Tooltips nicht ausreichen. In diesem Fall wird der Drawer rechtsbündig im Viewport angeordnet.
Seitliche Navigationsleiste wie hier im Design System.
Für die direkte und unmittelbare Filterung von Daten in einer Tabelle ist diese Komponente nicht geeignet, hierfür muss das Muster Filter für Datenstrukturen verwendet werden (Beispielseite Tabellen).
Verhalten bei Interaktion
In den überwiegenden Anwendungsfällen ist die Bedienung identisch zu Modalen Dialogen, d. h. bei Tastaturbedienung verbleibt der Fokus innerhalb der Komponente, bis sie bewusst geschlossen wird. Für Maus- und Touch-Bedienung kann, abhängig von Art und Funktion der Inhalte, definiert werden, dass die Komponente auch durch Esc oder Klick bzw. Tap neben die Komponente geschlossen werden kann.
Positionierung & responsives Verhalten
Das Modal nimmt bis zur festgelegten Maximalbreite 100% des Viewports ein.
Innerhalb des Modals wird nicht gescrollt. Sollten die Inhalte des Modals die verfügbare Höhe des Viewports überschreiten, so wird beim scrollen das gesamte Modal vertikal auf dem abgedunkelten Hintergrund bewegt.
Design
Typografie
Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
Die Komponente nutzt das semantische dialog HTML-ELement. Um vor dem tatsächlichen Schließen des Modals ein Zeitfenster für CSS-gesteuerte Zustandsübergänge zu haben, erfolgt die Steuerung des Schließens über Javascript. Daher wird das Attribut closedby="none" gesetzt.
CSS
Die Ausspielung der Komponente auf der linken oder rechten Desktop-Seite ab Breakpoint SM (≥ 576px) wird über die modifier-Klassen ds-modal--drawer--left und ds-modal--drawer--right gesteuert.
JavaScript
Die Bereitstellung des Zeitfensters für die Transition der CSS Properties vor dem tatsächlichen Schließen erfordert die Einbindung der Datei modalDrawer.js oder der gesamten main.js. Das Schließen des Modals kann durch Betätigen des Schließen-Buttons, durch Drücken der Taste ESC oder durch Klick auf das Backdrop ausgelöst werden.
Wird in den Screenreadern JAWS, NVDA und VoiceOver als Dialog identifiziert und durch einen sinnbildenden Titel beschrieben.
Tastatur- & Maus-Bedienung:
Modale sind per esc-Taste schließbar, in Dialogen enthaltene Buttons werden mit Eingabetaste oder Leerschritt ausgelöst, Links nur mit der Eingabetaste.
Fokus:
Wenn geöffnet, dann verbleibt der Tastaturfokus innerhalb des Modals; die hinter dem Modal liegenden und optisch ausgegrauten ursprünglichen Inhalte der Seite dürfen nicht fokussierbar sein. Nach Schließen des Modals kehrt der Fokus zurück auf das den Dialog auslösende Element.
Aktion:
Tab bzw. Tab plus Hochstelltaste (Shift) verschieben den Fokus auf interaktiven Elementen im Dialog vor und zurück. Nach dem letzten interaktiven Element verbleibt der Fokus im Dialog und wird erneut auf das erste interaktive Element gesetzt. Die Escape-Taste schließt den Dialog, die Enter- oder Leerschritt-Taste aktiviert den Button, mit dem der Dialog geschlossen wird.
Darstellung:
Der Schriftgrad kann Browser- oder Systemseitig um bis zu 200 % vergrößert werden, ohne dass Informationen verloren gehen. Bis zu 400 % müssen Inhalte so umbrechen, dass sie ohne horizontales Scrollen verfügbar sind.
