Musterlösung dialog

Das Factory-Muster ist ein kreationales Entwurfsmuster, das eine Abstraktionsebene über dem allgemeinen Basisverhalten zwischen mehreren Objekten eines generischen Typs hinzufügt. Der Clientcode, der Code, der diese Ebene verwendet, muss die Einzelheiten der Implementierung des Verhaltens nicht kennen, solange er vorhanden ist. In unserem Beispiel mit dem Profilbearbeitungsformular kann die Dialogklasse selbst als Mediator fungieren. Wahrscheinlich ist sich die Dialogklasse bereits aller unterbestandteilen Elemente bewusst, sodass Sie nicht einmal neue Abhängigkeiten in diese Klasse einführen müssen. Die folgenden ARIA-Tags können bei der Erstellung eines barrierefreien Modals hilfreich sein: Role = “dialog” , aria-hidden, aria-label Die best practice for accessible modal dialogs besteht aus zwei Teilen: Eine einfache Implementierung von Portalen und eine einfache Implementierung des Modalfensters selbst. Wenn Sie auf diese Schaltfläche klicken, öffnet sich das Dialogfeld Platzhalter erstellen, in dem Sie den Typ des Platzhalters auswählen, dessen Namen und Parameter angeben können: Ein zugängliches modales Dialogfeld muss die folgenden Merkmale aufweisen, gemäß den WAI-ARIA-Authoring-Praktiken: Pattern-Schweregrad (verfügbar im Musterbearbeitungsmodus) Wenn Sie das Muster als benutzerdefinierte Codeprüfung verwenden, können Sie die Liste verwenden, um den Schweregrad anzugeben. Verwalten des Tastaturfokus – Sobald der Fokus in das Dialogfeld verschoben wurde, sollte er darin “gefangen” werden, bis das Dialogfeld geschlossen wird. Das bedeutet, dass Sie eine noch nicht zu wählende Dialogkomponente in jeder anderen gewünschten Komponente “versenden” können (z. B. in die ProductTable-Komponente der Beispiel-App) – und trotzdem den Inhaltscontainer “außen” (oder besser: nachbarisch) platzieren.

Wie folgt: Wenn Sie auf diese Schaltfläche klicken, wird das aktuelle Muster in einem neuen Bildfenster geöffnet. Sie können es also bearbeiten. Aber wenn Sie versuchen, es mit der zu speichern, auch mit einem neuen Namen, werden Sie in ein “Verweigerte Berechtigung ” Problem knallen, weil diese Bilddatei “root” ist. Aber dies ist möglich unter Windows, weniger geschützt. Ein modaler Dialog erfordert hingegen eine Antwort des Benutzers und macht die Interaktion mit dem Benutzer erforderlich. Fokus, sowohl buchstäblich als auch sprichwörtlich, kann nicht vom Modal weg bewegt werden. Das macht “modal” zu einem Dialogtyp. Etwas ist ein Modal (d.

h. ein modaler Dialog), oder etwas ist modal (d. h. Blockieren). Inhalt “hinter” einem modalen Dialog ist inert, was bedeutet, dass er für jede Interaktion deaktiviert wird. Benutzer, die ein offenes modales Dialogfeld erhalten, dürfen nicht mit inerten Inhalten interagieren können. Sehr oft sehen Benutzer, die Ihre Web-App visuell wahrnehmen, ein halbtransparentes Overlay über dem inerten Inhalt, aber hinter dem Dialog. In GIMP ist ein Muster ein kleines Bild, das verwendet wird, um Bereiche zu füllen, indem Kopien von Seite zu Seite platziert werden. Im Abschnitt Muster finden Sie grundlegende Informationen zu Mustern und deren Erstellung und Verwendung. Der zweite Teil der bewährten Methode besteht darin, eine Komponente für den (modalen) Dialog selbst auszuwählen. Glücklicherweise gibt es solche zugänglichen Skripte, und eines davon ist Hugo Giraudels [a11y-dialog] (github.com/edenspiekermann/a11y-dialog).

Neben einer React-Variante dieses Skripts gibt es auch einen Vue-Wrapper namens vue-a11y-dialog. Sie können dieses Skript so verwenden, wie es ist, da es seit seinem Build mit den oben genannten Best Practices erstellt wurde – aber stellen Sie sicher, dass Sie die disable-native-Eigenschaft auf true setzen, da sie andernfalls ein natives Dialogelement rendert (und dies ist nicht geeignet, in der Produktion zu verwenden, wie Scott O`Hara hier erklärt). Verwenden Sie das Mediator-Muster, wenn es schwierig ist, einige der Klassen zu ändern, da sie eng mit einem Haufen anderer Klassen verbunden sind.