Pflichtfelder besser sichtbar machen

[darenegade]

Is your feature request related to a problem? Please describe.

Pflichtfelder werden aktuell nicht direkt erkannt, wenn bei der Modellierung nicht im Label ein entsprechender Text hinzugefügt wird (Redundant zu Required-Flag) und je nach Umsetzung des Labels oder wenn dieses fehlt, ist es für Screenreader nicht erkenntbar, da aria-required="true" fehlt

Describe the solution you'd like

Wenn ein Feld Required ist, sollte hier ein rotes (optional) Sternchen im Text angezeigt werden und zusätzlich das ARIA-Tag gesetzt werden.

Describe alternatives you've considered

Pflichtfeld muss bei Modellierung selber markiert werden -> Nicht einheitlich und redundant

Acceptance Criteria

• [x] Pflichtfeld ist direkt erkennbar am Label
• [x] Pflichtfeld wird von Screenreader vorgelesen

Additional context

https://git.muenchen.de/digitalisierung/digiwf-support/-/issues/269

[dominikhorn93]

Reicht nicht ein Sternchen? Rot fühlt sich etwas heftig an oder? Alternativ unsere Color aus MaterialUI?

[darenegade]

Das Rot würde ich als optional sehen. Wenn wir es aber hinbekommen, würde dies die Pflichtfelder besser sichtbar machen, da die gleichfarbigen grauen Sternchen bei User-Tests, vor allem bei älteren Personen oder Personen mit Einschränkungen in der Sicht, nicht so gut gesehen werden.

Wenn es nur an der Farbe liegt, können wir aus Design-Gründen auch eine andere wählen. Wichtig wäre in dem Fall nur die Berücksichtigung des High-Kontrast-Modes

[dominikhorn93]

Ok verstehe. D.h. aber unser Orange-Farbton in Vueitfy wäre auch in Ordnung? Der High-Contrast-Mode wechselt hier bestimmt die Farbe. Dann wird aus Orange, schwarz. Das würde denke ich ein bisschen besser passen.

[dominikhorn93]

Über Template Slots könnte man das Label automatisch setzen und stylen. Bei eigenen Feldern würde das in etwa so aussehen (Code wird noch schöner):

<template #label>
      <span>{{ label }}</span>
      <span v-if="schema['x-rules']?.includes('required')" style="font-weight: bold; color: red"> *</span>
    </template>

Das Gleiche müsste man aber auch in vjsf einbauen. Ich prüfe mal wie das gehen würde.

[dominikhorn93]

In etwa das hier müsste man in der VJsfNoDeps unter renderPropSlots hinzufügen. Offen ist noch, dass required ja auch zieht, wenn min oder minLength oder sonstiges angegeben ist.

// if (this.fullSchema['x-rules']?.includes('required')) {
      if (true) {
        slots.push(h('div', { slot: 'label' }, [
          h('span', {
            domProps: {
              innerHTML: this.label + '<span style="font-weight: bold; color: red"> *</span>'
            }
          }, [])
        ]))
      }

[dominikhorn93]

Zusammengefasst:

• Vsf lib anpassen
  • renderPropSlots in VJsfNoDeps
  • Methode erstellen die prüft ob es ein Pflichtfeld ist
  • x-rules required, min, minLength
• jedes unserer eigenen Felder anpassen
  • x-rules required, min, minLength
  • lohnt sich eine gemeinsame Utility Klasse?

[dominikhorn93]

Bevor man es merged, muss man noch die Version in digiwf-apps hochzählen. Dazu muss aber erst das Review für die Vjsf Lib gemacht werden.

[lmoesle]

Bevor man es merged, muss man noch die Version in digiwf-apps hochzählen. Dazu muss aber erst das Review für die Vjsf Lib gemacht werden.

@dominikhorn93 ich habe beides gemacht und #1315 funktioniert für mich.