typo3-typescript-sources 14.3.7 → 14.3.8

package/backend/notification.ts

@@ -11,7 +11,7 @@
  * The TYPO3 project - inspiring people to share!
  */
 
-import { LitElement, html, type TemplateResult } from 'lit';
+import { LitElement, html, nothing, type TemplateResult } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -119,16 +119,20 @@ class Notification {
     if (this.messageContainer === null || document.getElementById('alert-container') === null) {
       this.messageContainer = document.createElement('div');
       this.messageContainer.setAttribute('id', 'alert-container');
+      this.messageContainer.setAttribute('popover', 'manual');
       this.notificationList = document.createElement('div');
       this.notificationList.setAttribute('class', 'alert-list');
       // Enable focusing for keyboard scrolling (accessibility)
       this.notificationList.setAttribute('tabindex', '0');
+      this.notificationList.setAttribute('aria-live', 'polite');
       this.messageContainer.appendChild(this.notificationList);
 
       this.clearAllButton = <ClearNotificationMessages>document.createElement('typo3-notification-clear-all');
       this.containerItemVisibility();
       this.messageContainer.prepend(this.clearAllButton);
-      document.body.appendChild(this.messageContainer);
+      const target = document.querySelector('typo3-backend-modal:last-of-type .alert-container') ?? document.body;
+      target.appendChild(this.messageContainer);
+      this.messageContainer.showPopover();
 
       document.addEventListener('typo3-notification-open', () => {
         this.totalNotifications++;
@@ -165,7 +169,20 @@ class Notification {
 
   protected static containerItemVisibility() {
     this.clearAllButton.hidden = this.totalNotifications < this.showClearAllButtonCount;
-    this.messageContainer.hidden = this.totalNotifications === 0;
+    try {
+      // Always hide first to ensure we are moved into the foremost top-layer
+      this.messageContainer.hidePopover();
+    } catch (e: unknown) {
+      if (e instanceof DOMException && e.name === 'InvalidStateError') {
+        // Ignored, since popover does not signal showing state,
+        // but may throw when `hidePopover()` is called on a hidden element
+      } else {
+        throw e;
+      }
+    }
+    if (this.totalNotifications > 0) {
+      this.messageContainer.showPopover();
+    }
   }
 }
 
@@ -204,6 +221,13 @@ export class NotificationMessage extends LitElement {
 
   @state() executingAction: number = -1;
 
+  private dismissTimer: number | null = null;
+  private remainingDuration: number = 0;
+  private timerStartedAt: number = 0;
+  private dismissalArmed: boolean = false;
+  private pointerInside: boolean = false;
+  private focusInside: boolean = false;
+
   public override async firstUpdated(): Promise<void> {
     document.addEventListener('typo3-notification-clear-all', async () => {
       this.clear();
@@ -212,15 +236,42 @@ export class NotificationMessage extends LitElement {
     const event = new CustomEvent('typo3-notification-open', { bubbles: true, composed: true });
     this.dispatchEvent(event);
 
+    if (this.notificationDuration > 0) {
+      // Reading a message or reaching its actions takes the time it takes, so the countdown
+      // pauses while the notification is pointed at or focused. This is tracked from the start,
+      // the pointer may already rest where the notification appears.
+      this.remainingDuration = this.notificationDuration * 1000;
+      this.addEventListener('mouseenter', (): void => {
+        this.pointerInside = true;
+        this.pauseDismissal();
+      });
+      this.addEventListener('focusin', (): void => {
+        this.focusInside = true;
+        this.pauseDismissal();
+      });
+      this.addEventListener('mouseleave', (): void => {
+        this.pointerInside = false;
+        this.resumeDismissal();
+      });
+      this.addEventListener('focusout', (event: FocusEvent): void => {
+        this.focusInside = event.relatedTarget instanceof Node && this.contains(event.relatedTarget);
+        this.resumeDismissal();
+      });
+    }
+
     await new Promise(resolve => window.setTimeout(resolve, 200));
     await this.requestUpdate();
     if (this.notificationDuration > 0) {
-      await new Promise(resolve => window.setTimeout(resolve, this.notificationDuration * 1000));
-      this.clear();
+      this.dismissalArmed = true;
+      this.resumeDismissal();
     }
   }
 
   public async clear(): Promise<void> {
+    if (this.dismissTimer !== null) {
+      window.clearTimeout(this.dismissTimer);
+      this.dismissTimer = null;
+    }
     this.dispatchEvent(
       new CustomEvent('typo3-notification-clear', { bubbles: true, composed: true })
     );
@@ -307,12 +358,18 @@ export class NotificationMessage extends LitElement {
             ${this.actions.map((action, index) => html`
               <a href="#"
                  title="${action.label}"
+                 aria-disabled="${this.executingAction >= 0 ? 'true' : nothing}"
                  @click="${async (event: PointerEvent) => {
                    event.preventDefault();
+                   // Pointer events are disabled while executing, keyboard activation is not
+                   if (this.executingAction >= 0) {
+                     return;
+                   }
+                   const target = event.currentTarget as HTMLAnchorElement;
                    this.executingAction = index;
                    await this.updateComplete;
                    if ('action' in action) {
-                     await action.action.execute(event.currentTarget as HTMLAnchorElement);
+                     await action.action.execute(target);
                    }
                    this.clear();
                  }}"
@@ -328,6 +385,33 @@ export class NotificationMessage extends LitElement {
     `;
     /* eslint-enable @stylistic/indent */
   }
+
+  private pauseDismissal(): void {
+    if (this.dismissTimer === null) {
+      return;
+    }
+    window.clearTimeout(this.dismissTimer);
+    this.dismissTimer = null;
+    this.remainingDuration -= Date.now() - this.timerStartedAt;
+  }
+
+  private resumeDismissal(): void {
+    if (!this.dismissalArmed || this.dismissTimer !== null || !this.isConnected || this.pointerInside || this.focusInside) {
+      return;
+    }
+    this.startDismissal();
+  }
+
+  private startDismissal(): void {
+    this.timerStartedAt = Date.now();
+    this.dismissTimer = window.setTimeout((): void => {
+      this.dismissTimer = null;
+      // An action being executed clears the notification once it is done
+      if (this.executingAction < 0) {
+        this.clear();
+      }
+    }, Math.max(this.remainingDuration, 0));
+  }
 }
 
 declare global {

package/backend/online-media.ts

@@ -106,9 +106,7 @@ class OnlineMedia {
         text: btnSubmit,
         btnClass: 'btn btn-primary',
         name: 'ok',
-        trigger: (): void => {
-          onlineMediaForm.querySelector('form').requestSubmit();
-        },
+        form: 'online-media-form',
       }],
     });
   }

package/backend/record-download-button.ts

@@ -65,17 +65,16 @@ export class RecordDownloadButton extends PseudoButtonLitElement {
           text: this.ok || listLabels.get('button.ok'),
           btnClass: 'btn-primary',
           name: 'download',
-          trigger: (): void => {
-            const form: HTMLFormElement = modal.querySelector('form');
-            form?.submit();
-            modal.hideModal();
-          }
+          form: 'downloadSettingsForm',
         }
       ],
       ajaxCallback: (): void => {
+        const form: HTMLFormElement = modal.querySelector('form');
         const formatSelect: HTMLSelectElement = modal.querySelector(Selectors.formatSelector);
         const formatOptions: NodeListOf<HTMLDivElement> = modal.querySelectorAll(Selectors.formatOptions);
 
+        form?.addEventListener('submit', (): void => modal.hideModal());
+
         if (formatSelect === null || !formatOptions.length) {
           // Return in case elements do not exist in the ajax loaded modal content
           return;

package/backend/recordlist.ts

@@ -274,6 +274,11 @@ class Recordlist {
 
   private readonly registerPaginationEvents = (): void => {
     document.querySelectorAll('.t3js-recordlist-paging').forEach((trigger: HTMLInputElement) => {
+      trigger.addEventListener('keydown', (e: KeyboardEvent) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+        }
+      });
       trigger.addEventListener('keyup', (e: KeyboardEvent) => {
         e.preventDefault();
         let value = Number(trigger.value);

package/backend/tests/fixtures/modal-autofocus.html

@@ -0,0 +1 @@
+<form id="modal-ajax-form"><input name="filter" autofocus></form>

package/backend/tests/modal-test.ts

@@ -0,0 +1,91 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { html } from 'lit';
+import { expect } from '@open-wc/testing';
+import Modal, { type ModalElement } from '@typo3/backend/modal.js';
+import type { } from 'mocha';
+
+describe('@typo3/backend/modal', () => {
+  let modal: ModalElement;
+  const nativeRequestAnimationFrame = window.requestAnimationFrame;
+
+  const shown = (element: ModalElement): Promise<void> => new Promise(resolve => {
+    element.addEventListener('typo3-modal-shown', () => resolve(), { once: true });
+  });
+
+  before(() => {
+    // The test page runs in the background, animation frames never fire there
+    window.requestAnimationFrame = (callback: FrameRequestCallback): number => window.setTimeout(() => callback(performance.now()), 0);
+  });
+
+  after(() => {
+    window.requestAnimationFrame = nativeRequestAnimationFrame;
+  });
+
+  afterEach(() => {
+    // The dialog close event does not fire in the background either
+    modal?.hideModal();
+    modal?.remove();
+  });
+
+  it('binds a footer button to the form given by its configuration', async () => {
+    modal = Modal.advanced({
+      content: html`<form id="modal-test-form"><input name="username"><input name="password"></form>`,
+      buttons: [{ text: 'ok', btnClass: 'btn-primary', form: 'modal-test-form' }],
+    });
+    await shown(modal);
+
+    const button = modal.querySelector<HTMLButtonElement>('.modal-footer button');
+    expect(button.type).to.equal('submit');
+    expect(button.form?.id).to.equal('modal-test-form');
+  });
+
+  it('keeps the focus on an autofocus field instead of the active button', async () => {
+    modal = Modal.advanced({
+      content: html`<form><input name="password" autofocus></form>`,
+      buttons: [{ text: 'ok', btnClass: 'btn-primary', active: true }],
+    });
+    await shown(modal);
+
+    expect(document.activeElement.matches('input[name="password"]')).to.be.true;
+  });
+
+  it('focuses an autofocus field of ajax content loaded after the modal was shown', async () => {
+    const nativeFetch = window.fetch;
+    window.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+      await shown(modal);
+      return nativeFetch(input, init);
+    };
+    modal = Modal.advanced({
+      type: Modal.types.ajax,
+      content: '/Build/Sources/TypeScript/backend/tests/fixtures/modal-autofocus.html',
+      buttons: [{ text: 'ok', btnClass: 'btn-primary', active: true }],
+    });
+    const loaded = new Promise<void>(resolve => modal.addEventListener('modal-loaded', () => resolve(), { once: true }));
+    await loaded;
+    window.fetch = nativeFetch;
+
+    expect(document.activeElement.matches('input[name="filter"]')).to.be.true;
+  });
+
+  it('focuses the active button when the body has no autofocus field', async () => {
+    modal = Modal.advanced({
+      content: html`<form><input name="password"></form>`,
+      buttons: [{ text: 'ok', btnClass: 'btn-primary', active: true }],
+    });
+    await shown(modal);
+
+    expect(document.activeElement.matches('.modal-footer button')).to.be.true;
+  });
+});

package/backend/tests/notification-test.ts

@@ -106,6 +106,124 @@ describe('@typo3/backend/notification:', () => {
     }
   });
 
+  describe('auto dismissal', () => {
+    async function showNotification(): Promise<{ element: LitElement, isCleared: () => boolean }> {
+      Notification.success('Title', 'Message', 1);
+      const element = document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement;
+      await element.updateComplete;
+      let cleared = false;
+      element.addEventListener('typo3-notification-clear', (): void => {
+        cleared = true;
+      });
+      // Notifications appear with a delay, the countdown starts afterwards
+      await clock.tickAsync(200);
+      return { element, isCleared: (): boolean => cleared };
+    }
+
+    it('pauses while the notification is pointed at', async () => {
+      const { element, isCleared } = await showNotification();
+
+      element.dispatchEvent(new MouseEvent('mouseenter'));
+      await clock.tickAsync(5000);
+      expect(isCleared()).to.be.false;
+
+      element.dispatchEvent(new MouseEvent('mouseleave'));
+      await clock.tickAsync(1100);
+      expect(isCleared()).to.be.true;
+    });
+
+    it('pauses while the notification has the focus', async () => {
+      const { element, isCleared } = await showNotification();
+
+      element.dispatchEvent(new FocusEvent('focusin'));
+      await clock.tickAsync(5000);
+      expect(isCleared()).to.be.false;
+
+      element.dispatchEvent(new FocusEvent('focusout'));
+      await clock.tickAsync(1100);
+      expect(isCleared()).to.be.true;
+    });
+
+    it('continues with the time that was left', async () => {
+      const { element, isCleared } = await showNotification();
+
+      await clock.tickAsync(600);
+      element.dispatchEvent(new MouseEvent('mouseenter'));
+      await clock.tickAsync(5000);
+      element.dispatchEvent(new MouseEvent('mouseleave'));
+
+      await clock.tickAsync(300);
+      expect(isCleared()).to.be.false;
+      await clock.tickAsync(200);
+      expect(isCleared()).to.be.true;
+    });
+
+    it('stays paused when the pointer leaves while the focus is still inside', async () => {
+      const { element, isCleared } = await showNotification();
+
+      element.dispatchEvent(new FocusEvent('focusin'));
+      element.dispatchEvent(new MouseEvent('mouseenter'));
+      element.dispatchEvent(new MouseEvent('mouseleave'));
+      await clock.tickAsync(5000);
+      expect(isCleared()).to.be.false;
+
+      element.dispatchEvent(new FocusEvent('focusout'));
+      await clock.tickAsync(1100);
+      expect(isCleared()).to.be.true;
+    });
+
+    it('stays paused when the pointer rests on the notification before it appeared', async () => {
+      Notification.success('Title', 'Message', 1);
+      const element = document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement;
+      await element.updateComplete;
+      let cleared = false;
+      element.addEventListener('typo3-notification-clear', (): void => {
+        cleared = true;
+      });
+
+      element.dispatchEvent(new MouseEvent('mouseenter'));
+      await clock.tickAsync(5000);
+      expect(cleared).to.be.false;
+
+      element.dispatchEvent(new MouseEvent('mouseleave'));
+      await clock.tickAsync(1100);
+      expect(cleared).to.be.true;
+    });
+
+    it('is not cleared by the countdown while an action is executing', async () => {
+      let finishAction: () => void;
+      Notification.success('Title', 'Message', 1, [
+        {
+          label: 'Undo',
+          action: new DeferredAction((): Promise<void> => new Promise((resolve): void => {
+            finishAction = resolve;
+          })),
+        },
+      ]);
+      const element = document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement;
+      await element.updateComplete;
+      let cleared = false;
+      element.addEventListener('typo3-notification-clear', (): void => {
+        cleared = true;
+      });
+      await clock.tickAsync(200);
+
+      (element.querySelector('.alert-actions a') as HTMLAnchorElement).click();
+      await clock.tickAsync(5000);
+      expect(cleared).to.be.false;
+
+      finishAction();
+      await clock.tickAsync(0);
+      expect(cleared).to.be.true;
+    });
+  });
+
+  it('announces notifications to assistive technology', async () => {
+    Notification.info('Info message', 'Some text', 1);
+    await (document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement).updateComplete;
+    expect(document.querySelector('#alert-container .alert-list').getAttribute('aria-live')).to.equal('polite');
+  });
+
   it('can render action buttons', async () => {
     Notification.info(
       'Info message',
@@ -158,4 +276,62 @@ describe('@typo3/backend/notification:', () => {
     await (document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement).updateComplete;
     expect(called).to.be.true;
   });
+
+  it('deferred action is called with its link', async () => {
+    let called = false;
+    Notification.info('Info message', 'Some text', 0, [
+      {
+        label: 'My deferred action',
+        action: new DeferredAction(async (): Promise<void> => {
+          called = true;
+        }),
+      },
+    ]);
+    const element = document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement;
+    await element.updateComplete;
+
+    (element.querySelector('.alert-actions a') as HTMLAnchorElement).click();
+    await clock.tickAsync(0);
+
+    expect(called).to.be.true;
+  });
+
+  it('executes an action only once while it is executing', async () => {
+    let calls = 0;
+    let finishAction: () => void;
+    Notification.info('Info message', 'Some text', 0, [
+      {
+        label: 'Deferred action',
+        action: new DeferredAction((): Promise<void> => {
+          calls++;
+          return new Promise((resolve): void => {
+            finishAction = resolve;
+          });
+        }),
+      },
+      {
+        label: 'Other action',
+        action: new ImmediateAction((): void => {
+          calls++;
+        }),
+      },
+    ]);
+    const element = document.querySelector('#alert-container typo3-notification-message:last-child') as LitElement;
+    await element.updateComplete;
+    const [first, second] = Array.from(element.querySelectorAll('.alert-actions a')) as HTMLAnchorElement[];
+
+    first.click();
+    await clock.tickAsync(0);
+    // Keyboard activation still reaches a link which ignores the pointer
+    first.click();
+    second.click();
+    await clock.tickAsync(0);
+    expect(calls).to.equal(1);
+    expect(first.getAttribute('aria-disabled')).to.equal('true');
+    expect(second.getAttribute('aria-disabled')).to.equal('true');
+
+    finishAction();
+    await clock.tickAsync(0);
+    expect(calls).to.equal(1);
+  });
 });

package/backend/tree/page-tree-element.ts

@@ -110,7 +110,9 @@ export class EditablePageTree extends PageTree {
         '&data[pages][' + data.node.identifier + '][title]=' + encodeURIComponent(newData.title) +
         '&data[pages][' + data.node.identifier + '][doktype]=' + encodeURIComponent(newData.doktype);
     } else if (data.command === TreeNodeCommandEnum.EDIT) {
-      params = '&data[pages][' + data.node.identifier + '][title]=' + encodeURIComponent(data.title);
+      // The tree may show nav_title instead of title, so write back to the field that is displayed
+      const nameSourceField = data.node.nameSourceField || 'title';
+      params = '&data[pages][' + data.node.identifier + '][' + nameSourceField + ']=' + encodeURIComponent(data.title);
     } else if (data.command === TreeNodeCommandEnum.DELETE) {
       // @todo currently it's "If uid of deleted record (data.uid) is still selected, randomly select the first node"
       const moduleStateStorage = ModuleStateStorage.current('web');
@@ -245,6 +247,11 @@ export class EditablePageTree extends PageTree {
       command: TreeNodeCommandEnum.MOVE
     };
 
+    if (!this.settings.displayCopyMoveConfirmation) {
+      this.sendChangeCommand(options);
+      return;
+    }
+
     let modalText = '';
     const languageArguments = [node.name, target.name] as const;
     switch(position) {

package/dashboard/dashboard.ts

@@ -565,10 +565,10 @@ export class Dashboard extends LitElement {
 
   private editDashboard(dashboard: DashboardInterface): void {
     const content = html`
-      <form>
+      <form id="dashboard-edit-form">
         <div class="form-group">
           <label class="form-label" for="dashboard-form-edit-title">${labels.get('dashboard.title')}</label>
-          <input class="form-control" id="dashboard-form-edit-title" type="text" name="title" value=${dashboard.title || ''} required="required">
+          <input class="form-control" id="dashboard-form-edit-title" type="text" name="title" value=${dashboard.title || ''} required="required" autofocus>
         </div>
       </form>
     `;
@@ -580,11 +580,6 @@ export class Dashboard extends LitElement {
       severity: SeverityEnum.notice,
       content,
       callback: (currentModal: ModalElement): void => {
-
-        currentModal.addEventListener('typo3-modal-shown', (): void => {
-          (currentModal.querySelector('#dashboard-form-edit-title') as HTMLInputElement)?.focus();
-        });
-
         currentModal.querySelector('form').addEventListener('submit', (e: Event): void => {
           e.preventDefault();
           const form = e.target as HTMLFormElement;
@@ -608,7 +603,7 @@ export class Dashboard extends LitElement {
           text: labels.get('dashboard.configure.button.ok'),
           btnClass: 'btn-primary',
           name: 'save',
-          trigger: (e, modal) => modal.querySelector('form').requestSubmit(),
+          form: 'dashboard-edit-form',
         },
       ]
     });

package/filelist/file-list-rename-handler.ts

@@ -51,10 +51,7 @@ class FileListRenameHandler {
             text: labels.get('file_rename.button.rename'),
             btnClass: 'btn-primary',
             name: 'rename',
-            trigger: (): void => {
-              const form: HTMLFormElement = modal.querySelector('form');
-              form?.requestSubmit();
-            },
+            form: 'file-list-rename-form',
           },
         ],
         callback: function (modal: ModalElement) {
@@ -119,11 +116,11 @@ class FileListRenameHandler {
       labels.get('folder_rename.label') :
       labels.get('file_rename.label');
     return html`
-      <form>
+      <form id="file-list-rename-form">
         <label class="form-label" for="rename_target">
           ${label}
         </label>
-        <input id="rename_target" name="name" class="form-control" value="${resource.name}" required>
+        <input id="rename_target" name="name" class="form-control" value="${resource.name}" required autofocus>
       </form>
     `;
   }

package/filelist/file-list-replace-handler.ts

@@ -57,10 +57,7 @@ class FileListReplaceHandler {
             text: labels.get('file_replace.button.replace'),
             btnClass: 'btn-primary',
             name: 'rename',
-            trigger: (): void => {
-              const form: HTMLFormElement = modal.querySelector('form');
-              form?.requestSubmit();
-            },
+            form: 'file-list-replace-form',
           },
         ],
         callback: function (modal: ModalElement) {
@@ -126,10 +123,10 @@ class FileListReplaceHandler {
             </dl>
           </div>
         </div>
-        <form>
+        <form id="file-list-replace-form">
           <div class="form-group">
             <label class="form-label" for="file_replace">${labels.get('file_replace.new_file.label')}</label>
-            <input id="file_replace" type="file" class="form-control" name="replace_1">
+            <input id="file_replace" type="file" class="form-control" name="replace_1" autofocus>
           </div>
           <div class="form-check">
             <input type="checkbox" value="1" id="keepFilename" name="keepFilename" class="form-check-input" checked>

package/filelist/file-list.ts

@@ -422,10 +422,9 @@ export default class Filelist {
         }
         trigger.value = value.toString(10);
         if (e.key === 'Enter' && value !== Number(trigger.dataset.currentpage)) {
-          const form = trigger.closest('form[name="fileListForm"]') as HTMLFormElement;
-          const submitUrl = new URL(form.action, window.origin);
-          submitUrl.searchParams.set('currentPage', value.toString());
-          window.location.href = submitUrl.toString();
+          const pagingUrl = new URL(trigger.dataset.pagingUrl, window.origin);
+          pagingUrl.searchParams.set('currentPage', value.toString());
+          window.location.href = pagingUrl.toString();
         }
       });
     });