Add missing labels and ensure focus handling to improve fields access…

…ibility

formwork/src/Panel/Controllers/AbstractController.php

@@ -148,9 +148,15 @@ protected function defaults(): array
                     'format'     => Date::formatToPattern($this->config->get('system.date.datetimeFormat')),
                     'time'       => true,
                     'labels'     => [
-                        'today'    => $this->translate('date.today'),
-                        'weekdays' => ['long' => $this->translations->getCurrent()->getStrings('date.weekdays.long'), 'short' => $this->translations->getCurrent()->getStrings('date.weekdays.short')],
-                        'months'   => ['long' => $this->translations->getCurrent()->getStrings('date.months.long'), 'short' => $this->translations->getCurrent()->getStrings('date.months.short')],
+                        'today'      => $this->translate('date.today'),
+                        'weekdays'   => ['long' => $this->translations->getCurrent()->getStrings('date.weekdays.long'), 'short' => $this->translations->getCurrent()->getStrings('date.weekdays.short')],
+                        'months'     => ['long' => $this->translations->getCurrent()->getStrings('date.months.long'), 'short' => $this->translations->getCurrent()->getStrings('date.months.short')],
+                        'prevMonth'  => $this->translate('fields.date.previousMonth'),
+                        'nextMonth'  => $this->translate('fields.date.nextMonth'),
+                        'prevHour'   => $this->translate('fields.date.previousHour'),
+                        'nextHour'   => $this->translate('fields.date.nextHour'),
+                        'prevMinute' => $this->translate('fields.date.previousMinute'),
+                        'nextMinute' => $this->translate('fields.date.nextMinute'),
                     ],
                 ],
                 'DurationInput' => [
@@ -192,6 +198,11 @@ protected function defaults(): array
                         'empty' => $this->translate(('fields.select.empty')),
                     ],
                 ],
+                'TagsInput' => [
+                    'labels' => [
+                        'remove' => $this->translate('fields.tags.remove'),
+                    ],
+                ],
                 'Backups' => [
                     'labels' => [
                         'now' => $this->translate('date.now'),

formwork/translations/de.yaml

@@ -17,10 +17,17 @@ date.weekdays.long: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag',
 date.weekdays.short: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
 fields.array.add: Hinzufügen
 fields.array.remove: Entfernen
+fields.date.nextHour: Nächste Stunde
+fields.date.nextMinute: Nächste Minute
+fields.date.nextMonth: Nächster Monat
+fields.date.previousHour: Vorherige Stunde
+fields.date.previousMinute: Vorherige Minute
+fields.date.previousMonth: Vorheriger Monat
 fields.file.none: (Keine)
 fields.file.uploadLabel: <strong>Klicken</strong>, um eine Datei auszuwählen oder <strong>ziehen</strong>, um sie hier abzulegen
 fields.image.none: (Keine)
 fields.select.empty: Keine passenden Optionen
+fields.tags.remove: Entfernen
 file.metadata: Metadaten
 file.metadata.alternativeText: Alternativtext
 page.attributes: Attribute

formwork/translations/en.yaml

@@ -17,10 +17,17 @@ date.weekdays.long: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Fr
 date.weekdays.short: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
 fields.array.add: Add
 fields.array.remove: Remove
+fields.date.nextHour: Next hour
+fields.date.nextMinute: Next minute
+fields.date.nextMonth: Next month
+fields.date.previousHour: Previous hour
+fields.date.previousMinute: Previous minute
+fields.date.previousMonth: Previous month
 fields.file.none: (None)
 fields.file.uploadLabel: <strong>Click</strong> to choose a file to upload or <strong>drag</strong> it here
 fields.image.none: (None)
 fields.select.empty: No matching options
+fields.tags.remove: Remove
 file.metadata: Metadata
 file.metadata.alternativeText: Alternative text
 page.attributes: Attributes

formwork/translations/es.yaml

@@ -17,10 +17,17 @@ date.weekdays.long: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Vier
 date.weekdays.short: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb']
 fields.array.add: Agregar
 fields.array.remove: Quitar
+fields.date.nextHour: Próxima hora
+fields.date.nextMinute: Próximo minuto
+fields.date.nextMonth: Próximo mes
+fields.date.previousHour: Hora anterior
+fields.date.previousMinute: Minuto anterior
+fields.date.previousMonth: Mes anterior
 fields.file.none: (Ninguno)
 fields.file.uploadLabel: <strong>Haz clic</strong> para elegir un archivo para cargar o <strong>arrástralo</strong> aquí
 fields.image.none: (Ninguna)
 fields.select.empty: No hay opciones coincidentes
+fields.tags.remove: Eliminar
 file.metadata: Metadatos
 file.metadata.alternativeText: Texto alternativo
 page.attributes: Atributos

formwork/translations/fr.yaml

@@ -17,10 +17,17 @@ date.weekdays.long: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendred
 date.weekdays.short: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam']
 fields.array.add: Ajouter
 fields.array.remove: Supprimer
+fields.date.nextHour: Heure suivante
+fields.date.nextMinute: Minute suivante
+fields.date.nextMonth: Mois suivant
+fields.date.previousHour: Heure précédente
+fields.date.previousMinute: Minute précédente
+fields.date.previousMonth: Mois précédent
 fields.file.none: (Aucun)
 fields.file.uploadLabel: <strong>Glisser-déposer</strong> dans la zone ou <strong>cliquer-ici</strong> pour sélectionner un fichier à envoyer.
 fields.image.none: (Aucune)
 fields.select.empty: Aucune option correspondante
+fields.tags.remove: Supprimer
 file.metadata: Métadonnées
 file.metadata.alternativeText: Texte alternatif
 page.attributes: Attributs

formwork/translations/it.yaml

@@ -17,10 +17,17 @@ date.weekdays.long: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì'
 date.weekdays.short: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab']
 fields.array.add: Aggiungi
 fields.array.remove: Rimuovi
+fields.date.nextHour: Ora successiva
+fields.date.nextMinute: Minuto successivo
+fields.date.nextMonth: Mese successivo
+fields.date.previousHour: Ora precedente
+fields.date.previousMinute: Minuto precedente
+fields.date.previousMonth: Mese precedente
 fields.file.none: (Nessuno)
 fields.file.uploadLabel: <strong>Fare click</strong> per selezionare un file da caricare o <strong>trascinarlo</strong> qui
 fields.image.none: (Nessuna)
 fields.select.empty: Nessuna opzione corrispondente
+fields.tags.remove: Rimuovi
 file.metadata: Metadati
 file.metadata.alternativeText: Testo alternativo
 page.attributes: Attributi

formwork/translations/pl.yaml

@@ -17,10 +17,17 @@ date.weekdays.long: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek
 date.weekdays.short: ['Ndz', 'Pon', 'Wt', 'Śr', 'Czw', 'Pt', 'Sob']
 fields.array.add: Dodaj
 fields.array.remove: Usuń
+fields.date.nextHour: Następna godzina
+fields.date.nextMinute: Następna minuta
+fields.date.nextMonth: Następny miesiąc
+fields.date.previousHour: Poprzednia godzina
+fields.date.previousMinute: Poprzednia minuta
+fields.date.previousMonth: Poprzedni miesiąc
 fields.file.none: (Brak)
 fields.file.uploadLabel: <strong>Kliknij</strong>, aby wybrać plik do przesłania, lub <strong>przeciągnij</strong> go tutaj
 fields.image.none: (Brak)
 fields.select.empty: Brak pasujących opcji
+fields.tags.remove: Usuń
 file.metadata: Metadane
 file.metadata.alternativeText: Tekst alternatywny
 page.attributes: Atrybuty

formwork/translations/pt.yaml

@@ -17,10 +17,17 @@ date.weekdays.long: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta'
 date.weekdays.short: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb']
 fields.array.add: Adicionar
 fields.array.remove: Remover
+fields.date.nextHour: Próxima hora
+fields.date.nextMinute: Próximo minuto
+fields.date.nextMonth: Próximo mês
+fields.date.previousHour: Hora anterior
+fields.date.previousMinute: Minuto anterior
+fields.date.previousMonth: Mês anterior
 fields.file.none: (Nenhum)
 fields.file.uploadLabel: <strong>Clique</strong> aqui para escolher um ficheiro para enviar ou <strong>arrastar</strong> para aqui.
 fields.image.none: (Nenhuma)
 fields.select.empty: Sem opções correspondentes
+fields.tags.remove: Remover
 file.metadata: Metadados
 file.metadata.alternativeText: Texto alternativo
 page.attributes: Atributos

formwork/translations/ru.yaml

@@ -17,10 +17,17 @@ date.weekdays.long: ['Воскресенье', 'Понедельник', 'Вто
 date.weekdays.short: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб']
 fields.array.add: Добавлять
 fields.array.remove: Удалить
+fields.date.nextHour: Следующий час
+fields.date.nextMinute: Следующая минута
+fields.date.nextMonth: Следующий месяц
+fields.date.previousHour: Предыдущий час
+fields.date.previousMinute: Предыдущая минута
+fields.date.previousMonth: Предыдущий месяц
 fields.file.none: (Нет)
 fields.file.uploadLabel: <strong>Нажмите</strong> чтобы выбрать файл для загрузки или <strong>тянуть</strong> это здесь
 fields.image.none: (Нет)
 fields.select.empty: Нет подходящих вариантов
+fields.tags.remove: Удалить
 file.metadata: Метаданные
 file.metadata.alternativeText: Альтернативный текст
 page.attributes: Атрибуты

formwork/translations/uk.yaml

@@ -17,10 +17,17 @@ date.weekdays.long: ['Неділя', 'Понеділок', 'Вівторок', '
 date.weekdays.short: ['Нд', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб']
 fields.array.add: Додати
 fields.array.remove: Видалити
+fields.date.nextHour: Наступна година
+fields.date.nextMinute: Наступна хвилина
+fields.date.nextMonth: Наступний місяць
+fields.date.previousHour: Попередня година
+fields.date.previousMinute: Попередня хвилина
+fields.date.previousMonth: Попередній місяць
 fields.file.none: (Немає)
 fields.file.uploadLabel: <strong>Натисніть</strong> щоб вибрати файл для завантаження або <strong>перетягніть</strong> його сюди
 fields.image.none: (Немає)
 fields.select.empty: Немає відповідних варіантів
+fields.tags.remove: Видалити
 file.metadata: Метадані
 file.metadata.alternativeText: Альтернативний текст
 page.attributes: Атрибути

panel/src/scss/components/forms/_forms-array.scss

@@ -33,7 +33,6 @@
 
 .form-input-array-add,
 .form-input-array-remove {
-    min-width: 1rem;
     padding: 0;
     margin-right: 0.25rem;
 }

panel/src/scss/components/forms/_forms-duration.scss

@@ -1,7 +1,7 @@
 @use "../mixins" as *;
 @use "../variables" as *;
 
-.form-input-duration {
+.form-input-duration-wrap {
     box-sizing: border-box;
     padding: 0.25rem 0.5rem * 0.5;
     border: 1px solid var(--color-base-500);
@@ -13,15 +13,15 @@
     @include user-select-none;
 }
 
-.form-input-duration.focused {
+.form-input-duration-wrap.focused {
     border-color: var(--color-accent-500);
 }
 
-.form-input-duration > span {
+.form-input-duration-wrap > span {
     text-align: center;
 }
 
-.form-input-duration .form-input {
+.form-input-duration-wrap .form-input {
     width: 2rem;
     padding: 0;
     border: 0;
@@ -38,19 +38,15 @@
     }
 }
 
-.form-input-duration .form-input:focus {
+.form-input-duration-wrap .form-input:focus {
     outline: none;
 }
 
-.form-input-duration .form-label {
+.form-input-duration-wrap .form-label {
     padding: 0 0.5rem;
     margin: 0;
 }
 
-.form-input-duration-hidden {
-    display: none;
-}
-
-.form-input-wrap .form-input-icon + .form-input-duration {
+.form-input-wrap .form-input-icon + .form-input-duration-wrap {
     padding-left: 1.75rem;
 }

panel/src/scss/components/forms/_forms-file.scss

@@ -1,3 +1,4 @@
+@use "../mixins" as *;
 @use "../variables" as *;
 
 .form-input-file {
@@ -7,17 +8,22 @@
 .form-input-file-label {
     display: block;
     padding: 0.5rem;
+    border-radius: $border-radius;
     margin-bottom: 1rem;
     background-color: var(--color-base-800);
     clear: both;
     font-size: 0.875rem;
 }
 
+.form-input-file-label:focus {
+    @include focusring;
+}
+
 .form-input-file-label > span {
     display: block;
     padding: 1.5rem 1rem;
     border: 2px dashed var(--color-base-500);
-    border-radius: $border-radius;
+    border-radius: $border-radius * 0.5;
     color: var(--color-base-100);
     text-align: center;
     transition: background-color $transition-time-md;

panel/src/ts/app.ts

@@ -20,7 +20,7 @@ interface AppConfig {
     DurationInput?: any;
     EditorInput?: any;
     SelectInput?: any;
-    TagInput?: any;
+    TagsInput?: any;
     Backups?: any;
 }
 

panel/src/ts/components/inputs.ts

@@ -10,31 +10,34 @@ import { RangeInput } from "./inputs/range-input";
 import { SelectInput } from "./inputs/select-input";
 import { SlugInput } from "./inputs/slug-input";
 import { TagsInput } from "./inputs/tags-input";
+import { TogglegroupInput } from "./inputs/togglegroup-input";
 
 export class Inputs {
     [name: string]: object;
 
     constructor(parent: HTMLElement) {
+        $$(".editor-textarea", parent).forEach((element: HTMLTextAreaElement) => (this[element.name] = new EditorInput(element)));
+
+        $$(".form-input-array", parent).forEach((element: HTMLInputElement) => (this[element.name] = new ArrayInput(element)));
+
         $$(".form-input-date", parent).forEach((element: HTMLInputElement) => (this[element.name] = new DateInput(element, app.config.DateInput)));
 
-        $$(".image-picker", parent).forEach((element: HTMLSelectElement) => (this[element.name] = new ImagePicker(element)));
+        $$(".form-input-duration", parent).forEach((element: HTMLInputElement) => (this[element.name] = new DurationInput(element, app.config.DurationInput)));
 
-        $$(".editor-textarea", parent).forEach((element: HTMLTextAreaElement) => (this[element.name] = new EditorInput(element)));
+        $$(".form-input-slug", parent).forEach((element: HTMLInputElement) => (this[element.name] = new SlugInput(element)));
 
-        $$("input[type=file]", parent).forEach((element: HTMLInputElement) => (this[element.name] = new FileInput(element)));
+        $$(".form-input-tags", parent).forEach((element: HTMLInputElement) => (this[element.name] = new TagsInput(element, app.config.TagsInput)));
 
-        $$(".form-input-tags", parent).forEach((element: HTMLInputElement) => (this[element.name] = new TagsInput(element, app.config.TagInput)));
+        $$(".form-togglegroup", parent).forEach((element: HTMLFieldSetElement) => (this[element.id] = new TogglegroupInput(element)));
 
-        $$("input[data-field=duration]", parent).forEach((element: HTMLInputElement) => (this[element.name] = new DurationInput(element, app.config.DurationInput)));
+        $$(".image-picker", parent).forEach((element: HTMLSelectElement) => (this[element.name] = new ImagePicker(element)));
 
-        $$("input[type=range]", parent).forEach((element: HTMLInputElement) => (this[element.name] = new RangeInput(element)));
+        $$("input[type=file]", parent).forEach((element: HTMLInputElement) => (this[element.name] = new FileInput(element)));
 
-        $$(".form-input-array", parent).forEach((element: HTMLInputElement) => (this[element.name] = new ArrayInput(element)));
+        $$("input[type=range]", parent).forEach((element: HTMLInputElement) => (this[element.name] = new RangeInput(element)));
 
         $$("select:not([hidden])", parent).forEach((element: HTMLSelectElement) => (this[element.name] = new SelectInput(element, app.config.SelectInput)));
 
-        $$(".form-input-slug", parent).forEach((element: HTMLInputElement) => (this[element.name] = new SlugInput(element)));
-
         $$(".form-input-action[data-reset]", parent).forEach((element) => {
             const targetId = element.dataset.reset;
             if (targetId) {

panel/src/ts/components/inputs/array-input.ts

@@ -8,6 +8,8 @@ export class ArrayInput {
 
         $$(".form-input-array-row", input).forEach((element) => bindRowEvents(element));
 
+        $(`label[for="${input.id}"]`)?.addEventListener("click", () => $(".form-input", input)?.focus());
+
         Sortable.create(input, {
             handle: ".sortable-handle",
             forceFallback: true,

panel/src/ts/components/inputs/date-input.ts

@@ -40,6 +40,12 @@ interface DateInputOptions {
             long: string[];
             short: string[];
         };
+        prevMonth: string;
+        nextMonth: string;
+        prevHour: string;
+        nextHour: string;
+        prevMinute: string;
+        nextMinute: string;
     };
     onChange: (date: Date) => void;
 }
@@ -60,6 +66,12 @@ export class DateInput {
                     long: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                     short: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                 },
+                prevMonth: "Previous month",
+                nextMonth: "Next month",
+                prevHour: "Previous hour",
+                nextHour: "Next hour",
+                prevMinute: "Previous minute",
+                nextMinute: "Next minute",
             },
             onChange(date: Date) {
                 const dateInput = getCurrentInput();
@@ -435,10 +447,10 @@ export class DateInput {
             function createElement() {
                 const element = document.createElement("div");
                 element.className = "calendar";
-                element.innerHTML = `<div class="calendar-buttons"><button type="button" class="prevMonth"></button><button class="currentMonth">${options.labels.today}</button><button type="button" class="nextMonth"></button></div><div class="calendar-separator"></div><table class="calendar-table"></table>`;
+                element.innerHTML = `<div class="calendar-buttons"><button type="button" class="prevMonth" aria-label="${options.labels.prevMonth}"></button><button class="currentMonth" aria-label="${options.labels.today}">${options.labels.today}</button><button type="button" class="nextMonth" aria-label="${options.labels.nextMonth}"></button></div><div class="calendar-separator"></div><table class="calendar-table"></table>`;
 
                 if (options.time) {
-                    element.innerHTML += '<div class="calendar-separator"></div><table class="calendar-time"><tr><td><button type="button" class="nextHour"></button></td><td></td><td><button type="button" class="nextMinute"></button></td></tr><tr><td class="calendar-hours"></td><td>:</td><td class="calendar-minutes"></td><td class="calendar-meridiem"></td></tr><tr><td><button type="button" class="prevHour"></button></td><td></td><td><button type="button" class="prevMinute"></button></td></tr></table></div>';
+                    element.innerHTML += `<div class="calendar-separator"></div><table class="calendar-time"><tr><td><button type="button" class="nextHour" aria-label="${options.labels.nextHour}"></button></td><td></td><td><button type="button" class="nextMinute" aria-label="${options.labels.nextMinute}"></button></td></tr><tr><td class="calendar-hours"></td><td>:</td><td class="calendar-minutes"></td><td class="calendar-meridiem"></td></tr><tr><td><button type="button" class="prevHour" aria-label="${options.labels.prevHour}"></button></td><td></td><td><button type="button" class="prevMinute" aria-label="${options.labels.prevMinute}"></button></td></tr></table></div>`;
 
                     insertIcon("chevron-down", $(".prevHour", element) as HTMLElement);
                     insertIcon("chevron-up", $(".nextHour", element) as HTMLElement);