feat: improve bookmark dialog UX with distinct modes, inline validation, and accessibility

Refine bookmark create/edit and group create/edit dialogs to enterprise
quality: distinct titles per mode (Add bookmark vs Edit bookmark), URL
preview when creating, inline field validation with aria-invalid instead
of toast-only errors, loading spinner on submit, compact inline
new-group link, human-readable icon picker aria-labels, and aria-pressed
on selected icons.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

modules/bookmarks/i18n/default_de.json

@@ -39,5 +39,29 @@
   "Edit group": "Gruppe bearbeiten",
   "Group updated": "Gruppe aktualisiert",
   "Group name is required": "Gruppenname ist erforderlich",
-  "Maximum groups reached": "Maximale Anzahl an Gruppen erreicht"
+  "Maximum groups reached": "Maximale Anzahl an Gruppen erreicht",
+  "Add bookmark": "Lesezeichen hinzufügen",
+  "Saving...": "Speichern...",
+  "Create group": "Gruppe erstellen",
+  "Bookmarking this page:": "Lesezeichen für diese Seite:",
+  "Icon: Home": "Zuhause",
+  "Icon: People": "Personen",
+  "Icon: Person": "Person",
+  "Icon: Folder": "Ordner",
+  "Icon: Document": "Dokument",
+  "Icon: Settings": "Einstellungen",
+  "Icon: Security": "Sicherheit",
+  "Icon: Chart": "Diagramm",
+  "Icon: Mail": "E-Mail",
+  "Icon: Calendar": "Kalender",
+  "Icon: Clock": "Uhr",
+  "Icon: Star": "Stern",
+  "Icon: Heart": "Herz",
+  "Icon: Flag": "Flagge",
+  "Icon: Bookmark": "Lesezeichen",
+  "Icon: Location": "Standort",
+  "Icon: Lightning": "Blitz",
+  "Icon: Database": "Datenbank",
+  "Icon: Globe": "Globus",
+  "Icon: Code": "Code"
 }

modules/bookmarks/i18n/default_en.json

@@ -39,5 +39,29 @@
   "Edit group": "Edit group",
   "Group updated": "Group updated",
   "Group name is required": "Group name is required",
-  "Maximum groups reached": "Maximum groups reached"
+  "Maximum groups reached": "Maximum groups reached",
+  "Add bookmark": "Add bookmark",
+  "Saving...": "Saving...",
+  "Create group": "Create group",
+  "Bookmarking this page:": "Bookmarking this page:",
+  "Icon: Home": "Home",
+  "Icon: People": "People",
+  "Icon: Person": "Person",
+  "Icon: Folder": "Folder",
+  "Icon: Document": "Document",
+  "Icon: Settings": "Settings",
+  "Icon: Security": "Security",
+  "Icon: Chart": "Chart",
+  "Icon: Mail": "Mail",
+  "Icon: Calendar": "Calendar",
+  "Icon: Clock": "Clock",
+  "Icon: Star": "Star",
+  "Icon: Heart": "Heart",
+  "Icon: Flag": "Flag",
+  "Icon: Bookmark": "Bookmark",
+  "Icon: Location": "Location",
+  "Icon: Lightning": "Lightning",
+  "Icon: Database": "Database",
+  "Icon: Globe": "Globe",
+  "Icon: Code": "Code"
 }

modules/bookmarks/templates/bookmark-dialogs.phtml

@@ -6,15 +6,40 @@ $layoutNav = is_array($layoutNav ?? null) ? $layoutNav : [];
 $bookmarkNav = is_array($layoutNav['bookmarks.nav'] ?? null) ? $layoutNav['bookmarks.nav'] : [];
 $bookmarkData = is_array($bookmarkNav['grouped'] ?? null) ? $bookmarkNav['grouped'] : [];
 $bookmarkGroups = is_array($bookmarkData['groups'] ?? null) ? $bookmarkData['groups'] : [];
+
+// Human-readable icon labels — keep in sync with BookmarkService::ALLOWED_GROUP_ICONS
+$iconLabels = [
+    'bi-house' => t('Icon: Home'),
+    'bi-people' => t('Icon: People'),
+    'bi-person' => t('Icon: Person'),
+    'bi-folder' => t('Icon: Folder'),
+    'bi-file-text' => t('Icon: Document'),
+    'bi-gear' => t('Icon: Settings'),
+    'bi-shield-lock' => t('Icon: Security'),
+    'bi-bar-chart' => t('Icon: Chart'),
+    'bi-envelope' => t('Icon: Mail'),
+    'bi-calendar' => t('Icon: Calendar'),
+    'bi-clock' => t('Icon: Clock'),
+    'bi-star' => t('Icon: Star'),
+    'bi-heart' => t('Icon: Heart'),
+    'bi-flag' => t('Icon: Flag'),
+    'bi-bookmark' => t('Icon: Bookmark'),
+    'bi-pin-map' => t('Icon: Location'),
+    'bi-lightning' => t('Icon: Lightning'),
+    'bi-database' => t('Icon: Database'),
+    'bi-globe' => t('Icon: Globe'),
+    'bi-code-slash' => t('Icon: Code'),
+];
 ?>
 <dialog
   data-app-bookmark-dialog
   data-app-component="bookmark-save"
   data-max-message="<?php e(t('Maximum bookmarks reached')); ?>"
-  data-title-create="<?php e(t('Bookmarks')); ?>"
+  data-title-create="<?php e(t('Add bookmark')); ?>"
-  data-title-edit="<?php e(t('Bookmarks')); ?>"
+  data-title-edit="<?php e(t('Edit bookmark')); ?>"
-  data-label-save="<?php e(t('Save')); ?>"
+  data-label-save="<?php e(t('Add bookmark')); ?>"
-  data-label-update="<?php e(t('Save')); ?>"
+  data-label-update="<?php e(t('Save changes')); ?>"
+  data-label-saving="<?php e(t('Saving...')); ?>"
   data-msg-saved="<?php e(t('Bookmark saved')); ?>"
   data-msg-updated="<?php e(t('Bookmark updated')); ?>"
   data-msg-group-created="<?php e(t('Group created')); ?>"
@@ -23,18 +48,27 @@ $bookmarkGroups = is_array($bookmarkData['groups'] ?? null) ? $bookmarkData['gro
   data-msg-name-required="<?php e(t('Bookmark name is required')); ?>"
   data-msg-url-required="<?php e(t('Bookmark URL is invalid')); ?>"
   data-msg-group-not-found="<?php e(t('Group not found')); ?>"
+  data-url-preview-label="<?php e(t('Bookmarking this page:')); ?>"
   aria-labelledby="app-bookmark-dialog-title"
 >
   <article class="app-bookmark-dialog">
     <header>
-      <h2 id="app-bookmark-dialog-title"><?php e(t('Bookmarks')); ?></h2>
+      <h2 id="app-bookmark-dialog-title"><?php e(t('Add bookmark')); ?></h2>
       <button type="button" class="close" data-bookmark-dialog-close aria-label="<?php e(t('Close')); ?>" title="<?php e(t('Close')); ?>"></button>
     </header>
     <form data-bookmark-save-form>
+      <small class="app-bookmark-url-preview" data-bookmark-url-preview hidden></small>
       <label for="bookmark-name"><?php e(t('Name')); ?></label>
       <input type="text" id="bookmark-name" name="name" maxlength="120" required
-        placeholder="<?php e(t('Bookmark name')); ?>">
+        placeholder="<?php e(t('Bookmark name')); ?>"
-      <label for="bookmark-group"><?php e(t('Assign to group')); ?></label>
+        aria-describedby="bookmark-name-error">
+      <small class="app-bookmark-field-error" id="bookmark-name-error" data-field-error="name"></small>
+      <div class="app-bookmark-group-label-row">
+        <label for="bookmark-group"><?php e(t('Assign to group')); ?></label>
+        <button type="button" class="app-bookmark-new-group-link" data-bookmark-new-group>
+          <i class="bi bi-plus"></i> <?php e(t('New group')); ?>
+        </button>
+      </div>
       <select id="bookmark-group" name="group_id" data-bookmark-group-select>
         <option value=""><?php e(t('No group')); ?></option>
         <?php foreach ($bookmarkGroups as $group):
@@ -45,12 +79,9 @@ $bookmarkGroups = is_array($bookmarkData['groups'] ?? null) ? $bookmarkData['gro
           <option value="<?php e($groupId); ?>"><?php e($groupName); ?></option>
         <?php endforeach; ?>
       </select>
-      <button type="button" class="outline secondary app-bookmark-new-group-btn" data-bookmark-new-group>
-        <i class="bi bi-plus"></i> <?php e(t('New group')); ?>
-      </button>
       <footer>
         <button type="button" class="secondary outline" data-bookmark-dialog-close><?php e(t('Cancel')); ?></button>
-        <button type="submit" class="app-action-success" data-bookmark-submit-label><?php e(t('Save')); ?></button>
+        <button type="submit" class="app-action-success" data-bookmark-submit-label><?php e(t('Add bookmark')); ?></button>
       </footer>
     </form>
   </article>
@@ -60,8 +91,9 @@ $bookmarkGroups = is_array($bookmarkData['groups'] ?? null) ? $bookmarkData['gro
   data-app-bookmark-group-dialog
   data-title-create="<?php e(t('New group')); ?>"
   data-title-edit="<?php e(t('Edit group')); ?>"
-  data-label-save="<?php e(t('Save')); ?>"
+  data-label-save="<?php e(t('Create group')); ?>"
-  data-label-update="<?php e(t('Save')); ?>"
+  data-label-update="<?php e(t('Save changes')); ?>"
+  data-label-saving="<?php e(t('Saving...')); ?>"
   data-max-message="<?php e(t('Maximum groups reached')); ?>"
   data-msg-created="<?php e(t('Group created')); ?>"
   data-msg-updated="<?php e(t('Group updated')); ?>"
@@ -77,13 +109,18 @@ $bookmarkGroups = is_array($bookmarkData['groups'] ?? null) ? $bookmarkData['gro
     <form data-bookmark-group-save-form>
       <label for="bookmark-group-name"><?php e(t('Group name')); ?></label>
       <input type="text" id="bookmark-group-name" name="name" maxlength="100" required
-        placeholder="<?php e(t('Group name')); ?>">
+        placeholder="<?php e(t('Group name')); ?>"
+        aria-describedby="bookmark-group-name-error">
+      <small class="app-bookmark-field-error" id="bookmark-group-name-error" data-field-error="group-name"></small>
       <label><?php e(t('Icon')); ?></label>
       <div class="app-bookmark-group-icon-picker" data-bookmark-group-icon-picker>
-        <?php foreach (BookmarkService::allowedGroupIcons() as $allowedIcon): ?>
+        <?php foreach (BookmarkService::allowedGroupIcons() as $allowedIcon):
+          $readableLabel = $iconLabels[$allowedIcon] ?? $allowedIcon;
+        ?>
           <button type="button" class="app-bookmark-group-icon-option"
             data-icon="<?php e($allowedIcon); ?>"
-            aria-label="<?php e($allowedIcon); ?>">
+            aria-label="<?php e($readableLabel); ?>"
+            aria-pressed="false">
             <i class="bi <?php e($allowedIcon); ?>"></i>
           </button>
         <?php endforeach; ?>
@@ -91,7 +128,7 @@ $bookmarkGroups = is_array($bookmarkData['groups'] ?? null) ? $bookmarkData['gro
       <input type="hidden" name="icon" value="bi-folder">
       <footer>
         <button type="button" class="secondary outline" data-bookmark-group-dialog-close><?php e(t('Cancel')); ?></button>
-        <button type="submit" class="app-action-success" data-bookmark-group-submit-label><?php e(t('Save')); ?></button>
+        <button type="submit" class="app-action-success" data-bookmark-group-submit-label><?php e(t('Create group')); ?></button>
       </footer>
     </form>
   </article>

modules/bookmarks/web/css/components/app-bookmark-form.css

@@ -56,6 +56,68 @@
     padding-top: var(--app-spacing);
   }
 
+  /* URL preview */
+  .app-bookmark-url-preview {
+    color: var(--app-muted-color);
+    font-size: 0.8rem;
+    line-height: 1.3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+    margin-bottom: 0.25rem;
+  }
+
+  /* Inline field errors */
+  .app-bookmark-field-error {
+    color: var(--app-action-danger-background);
+    font-size: 0.8rem;
+    line-height: 1.3;
+    min-height: 0;
+  }
+
+  .app-bookmark-field-error:empty {
+    display: none;
+  }
+
+  dialog[data-app-bookmark-dialog] form input[aria-invalid="true"],
+  dialog[data-app-bookmark-group-dialog] form input[aria-invalid="true"] {
+    border-color: var(--app-action-danger-background);
+  }
+
+  /* Group label row with inline new-group link */
+  .app-bookmark-group-label-row {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.5rem;
+  }
+
+  .app-bookmark-new-group-link {
+    all: unset;
+    cursor: pointer;
+    font-size: 0.8rem;
+    color: var(--app-primary);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.15rem;
+  }
+
+  .app-bookmark-new-group-link:hover {
+    text-decoration: underline;
+  }
+
+  .app-bookmark-new-group-link:focus-visible {
+    outline: 2px solid var(--app-primary);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
+  .app-bookmark-new-group-link > i {
+    font-size: 0.85rem;
+  }
+
+  /* Delete button */
   .app-bookmark-delete-btn {
     color: var(--app-action-danger-background);
     border-color: var(--app-action-danger-background);
@@ -67,10 +129,7 @@
     color: var(--app-action-danger-color);
   }
 
-  .app-bookmark-new-group-btn {
+  /* Icon picker */
-    width: 100%;
-  }
-
   .app-bookmark-group-icon-picker {
     display: grid;
     grid-template-columns: repeat(7, minmax(0, 1fr));

modules/bookmarks/web/js/components/app-bookmark-save.js

@@ -53,12 +53,16 @@ export function initBookmarkSave(root = document, options = {}) {
   const closeBookmarkBtns = bookmarkDialog.querySelectorAll('[data-bookmark-dialog-close]');
   const submitBtn = bookmarkDialog.querySelector('[data-bookmark-submit-label]');
   const titleEl = bookmarkDialog.querySelector('#app-bookmark-dialog-title');
+  const urlPreviewEl = bookmarkDialog.querySelector('[data-bookmark-url-preview]');
+  const nameErrorEl = bookmarkForm.querySelector('[data-field-error="name"]');
 
   const maxBookmarkMessage = bookmarkDialog.dataset.maxMessage || '';
   const bookmarkMessageSaved = bookmarkDialog.dataset.msgSaved || 'Bookmark saved';
   const bookmarkMessageUpdated = bookmarkDialog.dataset.msgUpdated || 'Bookmark updated';
   const bookmarkMessageErrorGeneric = bookmarkDialog.dataset.msgErrorGeneric || 'Bookmark action failed';
   const bookmarkMessageNameRequired = bookmarkDialog.dataset.msgNameRequired || 'Bookmark name is required';
+  const labelSaving = bookmarkDialog.dataset.labelSaving || 'Saving...';
+  const urlPreviewLabel = bookmarkDialog.dataset.urlPreviewLabel || 'Bookmarking this page:';
   const bookmarkApiErrorMessages = {
     name_required: bookmarkDialog.dataset.msgNameRequired || bookmarkMessageErrorGeneric,
     url_required: bookmarkDialog.dataset.msgUrlRequired || bookmarkMessageErrorGeneric,
@@ -70,11 +74,55 @@ export function initBookmarkSave(root = document, options = {}) {
 
   let editingBookmarkId = null;
   let bookmarkReturnState = null;
+  let savedSubmitLabel = '';
 
   let groupEditingId = null;
   let groupMode = 'create';
   let groupSource = 'sidebar';
 
+  // --- Inline validation helpers ---
+
+  const showFieldError = (input, errorEl, message) => {
+    if (errorEl instanceof HTMLElement) {
+      errorEl.textContent = message;
+    }
+    if (input instanceof HTMLElement) {
+      input.setAttribute('aria-invalid', 'true');
+    }
+  };
+
+  const clearFieldError = (input, errorEl) => {
+    if (errorEl instanceof HTMLElement) {
+      errorEl.textContent = '';
+    }
+    if (input instanceof HTMLElement) {
+      input.removeAttribute('aria-invalid');
+    }
+  };
+
+  // Clear inline error when user starts typing
+  if (nameInput instanceof HTMLElement) {
+    nameInput.addEventListener('input', () => {
+      clearFieldError(nameInput, nameErrorEl);
+    }, { signal });
+  }
+
+  // --- URL preview ---
+
+  const updateUrlPreview = (show) => {
+    if (!(urlPreviewEl instanceof HTMLElement)) return;
+    if (show) {
+      const url = currentRelativeUrl();
+      urlPreviewEl.textContent = urlPreviewLabel + ' ' + (url || '/');
+      urlPreviewEl.hidden = false;
+    } else {
+      urlPreviewEl.hidden = true;
+      urlPreviewEl.textContent = '';
+    }
+  };
+
+  // --- Core helpers ---
+
   const syncModalBodyClass = () => {
     const isOpen = bookmarkDialog.open || (hasGroupDialog && groupDialog.open);
     document.body.classList.toggle('modal-is-open', isOpen);
@@ -111,6 +159,7 @@ export function initBookmarkSave(root = document, options = {}) {
       // no-op
     }
     bookmarkForm.removeAttribute('aria-busy');
+    clearFieldError(nameInput, nameErrorEl);
     syncModalBodyClass();
   };
 
@@ -127,7 +176,14 @@ export function initBookmarkSave(root = document, options = {}) {
 
   const setBookmarkSubmitPending = (pending) => {
     if (submitBtn instanceof HTMLButtonElement) {
-      submitBtn.disabled = pending;
+      if (pending) {
+        savedSubmitLabel = submitBtn.textContent || '';
+        submitBtn.textContent = labelSaving;
+        submitBtn.disabled = true;
+      } else {
+        submitBtn.textContent = savedSubmitLabel || submitBtn.textContent;
+        submitBtn.disabled = false;
+      }
     }
     bookmarkForm.setAttribute('aria-busy', pending ? 'true' : 'false');
   };
@@ -142,15 +198,18 @@ export function initBookmarkSave(root = document, options = {}) {
   const applyBookmarkModeUi = (isEditMode) => {
     if (titleEl) {
       titleEl.textContent = isEditMode
-        ? (bookmarkDialog.dataset.titleEdit || 'Bookmarks')
+        ? (bookmarkDialog.dataset.titleEdit || 'Edit bookmark')
-        : (bookmarkDialog.dataset.titleCreate || 'Bookmarks');
+        : (bookmarkDialog.dataset.titleCreate || 'Add bookmark');
     }
     setBookmarkSubmitLabel(isEditMode
-      ? (bookmarkDialog.dataset.labelUpdate || 'Save')
+      ? (bookmarkDialog.dataset.labelUpdate || 'Save changes')
-      : (bookmarkDialog.dataset.labelSave || 'Save'));
+      : (bookmarkDialog.dataset.labelSave || 'Add bookmark'));
+    updateUrlPreview(!isEditMode);
   };
 
   const configureBookmarkModeFromTopbar = () => {
+    clearFieldError(nameInput, nameErrorEl);
+
     if (!(openBtn instanceof HTMLButtonElement)) {
       applyBookmarkModeUi(false);
       editingBookmarkId = null;
@@ -275,7 +334,8 @@ export function initBookmarkSave(root = document, options = {}) {
 
     const name = nameInput instanceof HTMLInputElement ? nameInput.value.trim() : '';
     if (!name) {
-      showAsyncFlash('warning', bookmarkMessageNameRequired);
+      showFieldError(nameInput, nameErrorEl, bookmarkMessageNameRequired);
+      if (nameInput instanceof HTMLInputElement) nameInput.focus();
       return;
     }
 
@@ -365,12 +425,14 @@ export function initBookmarkSave(root = document, options = {}) {
   const groupCloseBtns = groupDialog.querySelectorAll('[data-bookmark-group-dialog-close]');
   const groupTitleEl = groupDialog.querySelector('#app-bookmark-group-dialog-title');
   const groupSubmitBtn = groupDialog.querySelector('[data-bookmark-group-submit-label]');
+  const groupNameErrorEl = groupForm.querySelector('[data-field-error="group-name"]');
 
   const groupMessageCreated = groupDialog.dataset.msgCreated || 'Group created';
   const groupMessageUpdated = groupDialog.dataset.msgUpdated || 'Group updated';
   const groupMessageErrorGeneric = groupDialog.dataset.msgErrorGeneric || 'Group action failed';
   const groupMessageNameRequired = groupDialog.dataset.msgNameRequired || 'Group name is required';
   const maxGroupMessage = groupDialog.dataset.maxMessage || 'Maximum groups reached';
+  const groupLabelSaving = groupDialog.dataset.labelSaving || 'Saving...';
   const groupApiErrorMessages = {
     name_required: groupMessageNameRequired,
     not_found: groupMessageErrorGeneric,
@@ -378,11 +440,20 @@ export function initBookmarkSave(root = document, options = {}) {
     update_failed: groupMessageErrorGeneric
   };
 
+  let savedGroupSubmitLabel = '';
+
   const resolveGroupApiErrorMessage = (errorCode) => {
     if (!errorCode) return groupMessageErrorGeneric;
     return groupApiErrorMessages[errorCode] || groupMessageErrorGeneric;
   };
 
+  // Clear group name inline error on input
+  if (groupNameInput instanceof HTMLElement) {
+    groupNameInput.addEventListener('input', () => {
+      clearFieldError(groupNameInput, groupNameErrorEl);
+    }, { signal });
+  }
+
   const closeGroupDialog = () => {
     try {
       if (groupDialog.open) groupDialog.close();
@@ -390,6 +461,7 @@ export function initBookmarkSave(root = document, options = {}) {
       // no-op
     }
     groupForm.removeAttribute('aria-busy');
+    clearFieldError(groupNameInput, groupNameErrorEl);
     syncModalBodyClass();
   };
 
@@ -406,7 +478,14 @@ export function initBookmarkSave(root = document, options = {}) {
 
   const setGroupSubmitPending = (pending) => {
     if (groupSubmitBtn instanceof HTMLButtonElement) {
-      groupSubmitBtn.disabled = pending;
+      if (pending) {
+        savedGroupSubmitLabel = groupSubmitBtn.textContent || '';
+        groupSubmitBtn.textContent = groupLabelSaving;
+        groupSubmitBtn.disabled = true;
+      } else {
+        groupSubmitBtn.textContent = savedGroupSubmitLabel || groupSubmitBtn.textContent;
+        groupSubmitBtn.disabled = false;
+      }
     }
     groupForm.setAttribute('aria-busy', pending ? 'true' : 'false');
   };
@@ -424,11 +503,11 @@ export function initBookmarkSave(root = document, options = {}) {
       groupIconInput.value = value;
     }
     if (groupIconPicker instanceof HTMLElement) {
-      groupIconPicker.querySelectorAll('.app-bookmark-icon-active').forEach((item) => item.classList.remove('app-bookmark-icon-active'));
+      groupIconPicker.querySelectorAll('[data-icon]').forEach((item) => {
-      const selected = groupIconPicker.querySelector(`[data-icon="${value}"]`);
+        const isActive = item.dataset.icon === value;
-      if (selected instanceof HTMLElement) {
+        item.classList.toggle('app-bookmark-icon-active', isActive);
-        selected.classList.add('app-bookmark-icon-active');
+        item.setAttribute('aria-pressed', isActive ? 'true' : 'false');
-      }
+      });
     }
   };
 
@@ -460,6 +539,7 @@ export function initBookmarkSave(root = document, options = {}) {
     bookmarkReturnState = groupSource === 'bookmark' ? restoreState : null;
 
     groupForm.reset();
+    clearFieldError(groupNameInput, groupNameErrorEl);
     setGroupIcon(icon);
     if (groupNameInput instanceof HTMLInputElement) {
       groupNameInput.value = String(name || '');
@@ -471,8 +551,8 @@ export function initBookmarkSave(root = document, options = {}) {
         : (groupDialog.dataset.titleCreate || 'New group');
     }
     setGroupSubmitLabel(groupMode === 'edit'
-      ? (groupDialog.dataset.labelUpdate || 'Save')
+      ? (groupDialog.dataset.labelUpdate || 'Save changes')
-      : (groupDialog.dataset.labelSave || 'Save'));
+      : (groupDialog.dataset.labelSave || 'Create group'));
   };
 
   const handleGroupCancel = () => {
@@ -498,7 +578,7 @@ export function initBookmarkSave(root = document, options = {}) {
     }
   };
 
-  if (newGroupBtn instanceof HTMLButtonElement) {
+  if (newGroupBtn instanceof HTMLElement) {
     newGroupBtn.addEventListener('click', (event) => {
       event.preventDefault();
       openCreateGroupFromBookmarkDialog();
@@ -563,7 +643,8 @@ export function initBookmarkSave(root = document, options = {}) {
 
     const name = groupNameInput instanceof HTMLInputElement ? groupNameInput.value.trim() : '';
     if (!name) {
-      showAsyncFlash('warning', groupMessageNameRequired);
+      showFieldError(groupNameInput, groupNameErrorEl, groupMessageNameRequired);
+      if (groupNameInput instanceof HTMLInputElement) groupNameInput.focus();
       return;
     }
     const icon = groupIconInput instanceof HTMLInputElement ? groupIconInput.value : 'bi-folder';