Seitenvergleich

Verbesserung der Barrierefreiheit

Die Barrierefreiheit wurde durch die mehrheitliche Ablösung der Kendo-Komponenten durch Ariakit-Komponenten aktualisiert und verbessert.

Funktionserweiterungen

...

Image Added Date-Time-Picker entfernt

Die Komponenten DatePickerField und DateTimePickerField wurden entfernt und müssen in allen Konfigurationen durch DateTimeInput ersetzen werden und das Format über den inputType (date, time) angegeben. Wird kein inputType bestimmt, werden Datum und Uhrzeit angezeigt.

Beispiele:

• reporting.json

  Codeblock
  { "component": "GridRowCols", "childrenConfig": [ { "component": "DateTimeInput", "colProps": { "breakpoints": { "sm": 12, "md": 3 } }, "props": { "id": "received$TimestampFrom", "labelText": "labels.createdBy", "inputType": "date", "doSubmitOnChange": true, "inputProps": { "className": "w-100" } } }, ] }

• setDeadline.json

  Codeblock
  { "component": "DateTimeInput", "props": { "id": "deadline", "labelText": "ticketView.labels.setDeadline", "helpText": "", "defaultTime": "08:00", "defaultDate": "now", "errorMessages": { "required": "errorMessages.deadlineRequired" }, "validation": [ "required", { "dateTimePicker": { "onlyFuture": true } } ] } }

• setReminder.json

  Codeblock
  { "component": "DateTimeInput", "props": { "id": "reminder", "labelText": "ticketView.labels.setReminder", "helpText": "", "defaultTime": "08:00", "defaultDate": "now", "errorMessages": { "required": "errorMessages.reminderRequired" }, "validation": [ "required", { "dateTimePicker": { "onlyFuture": true } } ] } }

Image Added Verbesserung der Barrierefreiheit

Zur Verbesserung der Barrierefreiheit wurden eindeutigere Bezeichnungen, Platzhalter und mehr Aria-Label hinzugefügt. Um diese Änderungen in bestehenden Projekten mit Überschreibung der Konfiguration zu übernehmen, müssen folgende Konfigurationen angepasst werden:

• Auf der Ticketliste wird nun im Standard besser formuliert, nach welchen Kriterien gefiltert wird. Dafür wurde der placeholder der Felder “Bearbeitung von” und “Zugewiesene Gruppe" in der reporting.json und searchForm.json geändert:

  Codeblock

  { "component": "AutocompleteField", "colProps": { "breakpoints": { "sm": 12, "md": 6, "lg": 3 } }, "props": { "id": "assignedUser", "labelText": "ticketList.labels.assignedUser", "doSubmitOnChange": true, "controllerPath": "users", "scope": "ticketListGroupFilter", "labelTemplate": "{firstname} {lastname} ({email})", "inputProps": { "placeholder": "ticketList.labels.assignedUserPlaceholder" } } }, { "component": "AutocompleteField", "colProps": { "breakpoints": { "sm": 12, "md": 6, "lg": 3 } }, "props": { "id": "assignedGroup", "labelText": "ticketList.labels.assignedGroup", "doSubmitOnChange": true, "controllerPath": "groups", "scope": "ticketListGroupFilter", "labelTemplate": "{name}", "inputProps": { "placeholder": "ticketList.labels.assignedGroupPlaceholder" } } },

• Sind auf der auf Detailansicht eines Tickets im Abschnitt “Neue Nachricht verfassen” keine Textbausteine vorhanden, kann in newMessageForm.json unter dem key "noOptionsPlaceholder" ein Platzhaltertext eingefügt werden:

  Codeblock
  { "component": "GridRow", "childrenConfig": [ { "component": "TextModule", "props": { "id": "textModule", "labelText": "ticketView.labels.textmodule", "noOptionsPlaceholder": "ticketView.labels.noTextmodule", "labelClass": "px-1", "seperateCols": true, "editorId": "messageToUser", "noErrorClassName":"mb-2" } } ] },

• Im searchForm.json muss der Komponente MultiSelectField ein Label für den Lösch-Button übergeben werden:

  Codeblock
  { "component": "MultiSelectField", "props": { "breakpoints": { "sm": 12, "xl": 6 }, "id": "tag", "inputProps": { "btnLabel": "buttons.delete" }, "labelText": "ticketList.labels.tag", "helpText": "ticketList.helpTexts.tag", "custom": false, "options": "tags", "doSubmitOnChange": true } }

• Komponenten, die kein sichtbares Label haben, bekommen für eine barrierefreie Bedienung ein Aria-Label. Dieses muss in massoperationForm.json und textmoduleFilter.json durch die Angabe ariaLabelClassName": "sr-only" gesetzt werden:

• massoperationForm.json:

  Codeblock

  { "component": "TicketRowSelectField", "colProps": { "breakpoints": { "sm": 6, "md": 4, "lg": 2 } }, "props": { "id": "selection", "dataId": "selection", "dataItem": "oid", "controllerPath": "users", "ariaLabelClassName": "sr-only", "labelText": "ticketList.labels.selectEntrys", "doSubmitOnChange": true, "options": [ { "value": "all", "label": "ticketList.labels.all" }, { "value": "no", "label": "ticketList.labels.no" } ] } }, { "component": "SelectSearchField", "colProps": { "breakpoints": { "sm": 6, "md": 4, "lg": 2 } }, "props": { "id": "status_massop", "options": "UMATTR:sd_status", "className": "w-100", "labelText": "ticketList.labels.assignStatus", "ariaLabelClassName": "sr-only", "inputProps": { "placeholder": "ticketList.labels.assignStatus" } } }, { "component": "AutocompleteField", "colProps": { "breakpoints": { "sm": 6, "md": 4, "lg": 2 } }, "props": { "id": "user", "dataId": "assignedUser", "dataItem": "oid", "controllerPath": "users", "scope": "assignment", "labelText": "ticketAdd.labels.user", "ariaLabelClassName": "sr-only", "labelTemplate": "{firstname} {lastname} ({email})", "inputProps": { "placeholder": "ticketList.labels.assignUser" } } }, { "component": "AutocompleteField", "colProps": { "breakpoints": { "sm": 6, "md": 4, "lg": 2 } }, "props": { "id": "group", "dataId": "assignedGroup", "dataItem": "oid", "controllerPath": "groups", "scope": "assignment", "labelText": "ticketAdd.labels.group", "ariaLabelClassName": "sr-only", "labelTemplate": "{name}", "inputProps": { "placeholder": "ticketList.labels.assignGroup" } } }

• textmoduleFilter.json:

  Codeblock

  { "filterForm": [ { "component": "TextModuleFilterWrapper", "childrenConfig": [ { "component": "AutocompleteField", "props": { "id": "category", "dataItem": "cat", "doSubmitOnChange": true, "controllerPath": "texts-categories", "noOptionsPlaceholder": "textmodules.noOptionsPlaceholder", "ariaLabelClassName": "sr-only", "labelText": "aria.filterTextByCategory", "inputProps": { "placeholder": "textmodules.filter" } } } ] } ] }

Funktionserweiterungen

• Es können Meldungen mit GPS-Koordinaten eingereicht werden. Damit diese im Ticket angezeigt werden, muss folgende Konfiguration in ticketView.json hinzugefügt werden:

      {
         "component": "TextFieldWithLabelSidebar",
         "props": {
            "binding": "gps",
            "umAttr": "sd_gps"
         }
      },

• Den Kategorien können nun Icons zugeordnet werden

• Im Texteditor werden Links nun automatisch mit Protokoll (http) versehen

Designoptimierungen

Mit der Umstellung auf die Ariakit-Komponenten wurde das Das Design einiger Backoffice-Inputs verbessertwurde angepasst.