typo3-typescript-sources 14.3.6 → 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/form-engine/element/extra/select-box-filter-test.ts

@@ -0,0 +1,215 @@
+/*
+ * 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 SelectBoxFilter from '@typo3/backend/form-engine/element/extra/select-box-filter.js';
+import { expect } from '@open-wc/testing';
+import type { } from 'mocha';
+
+describe('@typo3/backend/form-engine/element/extra/select-box-filter', () => {
+  let root: HTMLElement;
+  let filterField: HTMLInputElement | HTMLSelectElement;
+
+  const optionLabels: string[] = ['Crème brûlée', 'Müller', 'Sirup (Vanille)', 'Cremeschnitte', 'Tiramisu'];
+
+  const options = (labels: string[]): string => labels.map((label: string): string => `<option>${label}</option>`).join('');
+
+  const mount = (selectContent: string, filterMarkup: string = '<input type="text" class="t3js-formengine-multiselect-filter-textfield">'): void => {
+    root = document.createElement('div');
+    root.innerHTML = `
+      <div class="form-wizards-wrap">
+        ${filterMarkup}
+        <select multiple>${selectContent}</select>
+      </div>`;
+    document.body.appendChild(root);
+    new SelectBoxFilter(root.querySelector('select[multiple]'));
+  };
+
+  afterEach((): void => {
+    root.remove();
+  });
+
+  const visibleOptions = (): string[] => Array
+    .from(root.querySelectorAll('select[multiple] option'))
+    .filter((option: HTMLOptionElement): boolean => !option.hidden)
+    .map((option: HTMLOptionElement): string => option.textContent);
+
+  const filterBy = (value: string): void => {
+    filterField.value = value;
+    filterField.dispatchEvent(new Event('input', { bubbles: true }));
+  };
+
+  describe('text field', () => {
+    beforeEach((): void => {
+      mount(options(optionLabels));
+      filterField = root.querySelector('.t3js-formengine-multiselect-filter-textfield');
+    });
+
+    it('shows all options for an empty filter', (): void => {
+      filterBy('');
+      expect(visibleOptions()).to.eql(optionLabels);
+    });
+
+    it('matches case insensitively', (): void => {
+      filterBy('MÜLLER');
+      expect(visibleOptions()).to.eql(['Müller']);
+    });
+
+    it('matches a plain substring anywhere in the label', (): void => {
+      filterBy('schnitte');
+      expect(visibleOptions()).to.eql(['Cremeschnitte']);
+    });
+
+    it('matches labels with diacritics when typing without them', (): void => {
+      filterBy('creme');
+      expect(visibleOptions()).to.eql(['Crème brûlée', 'Cremeschnitte']);
+    });
+
+    it('matches labels without diacritics when typing with them', (): void => {
+      filterBy('crèm');
+      expect(visibleOptions()).to.eql(['Crème brûlée', 'Cremeschnitte']);
+    });
+
+    it('treats regular expression meta characters as literal text', (): void => {
+      filterBy('(Vanille)');
+      expect(visibleOptions()).to.eql(['Sirup (Vanille)']);
+    });
+
+    it('hides everything when nothing matches', (): void => {
+      filterBy('.*');
+      expect(visibleOptions()).to.eql([]);
+    });
+  });
+
+  describe('Latin letters that do not decompose', () => {
+    const labels: string[] = ['Straße', 'Müller', 'Ærø', 'Łódź'];
+
+    beforeEach((): void => {
+      mount(options(labels));
+      filterField = root.querySelector('.t3js-formengine-multiselect-filter-textfield');
+    });
+
+    it('finds the sharp s when it is typed as a double s', (): void => {
+      filterBy('strasse');
+      expect(visibleOptions()).to.eql(['Straße']);
+    });
+
+    it('finds the sharp s when it is typed as written', (): void => {
+      filterBy('straße');
+      expect(visibleOptions()).to.eql(['Straße']);
+    });
+
+    it('finds the slashed o and the ligature typed as ASCII', (): void => {
+      filterBy('aero');
+      expect(visibleOptions()).to.eql(['Ærø']);
+    });
+
+    it('finds the stroked l typed as a plain l', (): void => {
+      filterBy('lodz');
+      expect(visibleOptions()).to.eql(['Łódź']);
+    });
+
+    it('does not resolve an umlaut to its transcription', (): void => {
+      filterBy('mueller');
+      expect(visibleOptions()).to.eql([]);
+    });
+  });
+
+  describe('characters the editor cannot see in the label', () => {
+    const nbsp = 'Cr\u00e8me\u00a0br\u00fbl\u00e9e';
+    const softHyphen = 'Do\u00adnau';
+    const zeroWidth = 'Ti\u200bramisu';
+    const labels: string[] = [nbsp, softHyphen, zeroWidth];
+
+    beforeEach((): void => {
+      mount(options(labels));
+      filterField = root.querySelector('.t3js-formengine-multiselect-filter-textfield');
+    });
+
+    it('matches across a no-break space when a plain space is typed', (): void => {
+      filterBy('creme brulee');
+      expect(visibleOptions()).to.eql([nbsp]);
+    });
+
+    it('matches across a soft hyphen', (): void => {
+      filterBy('donau');
+      expect(visibleOptions()).to.eql([softHyphen]);
+    });
+
+    it('matches across a zero width space', (): void => {
+      filterBy('tiramisu');
+      expect(visibleOptions()).to.eql([zeroWidth]);
+    });
+  });
+
+  describe('scripts whose combining marks carry meaning', () => {
+    // Thai vowel signs are nonspacing marks, but they distinguish syllables rather
+    // than accent them. Removing them would fold these three labels into one and
+    // the filter would stop narrowing anything for Thai.
+    const labels: string[] = ['กิน', 'กีฬา', 'กุญแจ'];
+
+    beforeEach((): void => {
+      mount(options(labels));
+      filterField = root.querySelector('.t3js-formengine-multiselect-filter-textfield');
+    });
+
+    it('keeps Thai vowel signs, so the filter still narrows', (): void => {
+      filterBy('กิ');
+      expect(visibleOptions()).to.eql(['กิน']);
+    });
+  });
+
+  describe('predefined filter items', () => {
+    beforeEach((): void => {
+      mount(
+        options(optionLabels),
+        `<select class="t3js-formengine-multiselect-filter-dropdown">
+          <option value=""></option>
+          <option value="creme">creme</option>
+        </select>`
+      );
+      filterField = root.querySelector('.t3js-formengine-multiselect-filter-dropdown');
+    });
+
+    it('applies a predefined filter value on change', (): void => {
+      filterField.value = 'creme';
+      filterField.dispatchEvent(new Event('change', { bubbles: true }));
+      expect(visibleOptions()).to.eql(['Crème brûlée', 'Cremeschnitte']);
+    });
+  });
+
+  describe('option groups', () => {
+    beforeEach((): void => {
+      mount(`
+        <optgroup label="Desserts">${options(['Crème brûlée', 'Tiramisu'])}</optgroup>
+        <optgroup label="Namen">${options(['Müller'])}</optgroup>`);
+      filterField = root.querySelector('.t3js-formengine-multiselect-filter-textfield');
+    });
+
+    const visibleGroups = (): string[] => Array
+      .from(root.querySelectorAll('optgroup'))
+      .filter((group: HTMLOptGroupElement): boolean => !group.hidden)
+      .map((group: HTMLOptGroupElement): string => group.label);
+
+    it('hides a group once all of its options are filtered away', (): void => {
+      filterBy('creme');
+      expect(visibleOptions()).to.eql(['Crème brûlée']);
+      expect(visibleGroups()).to.eql(['Desserts']);
+    });
+
+    it('shows every group again for an empty filter', (): void => {
+      filterBy('creme');
+      filterBy('');
+      expect(visibleGroups()).to.eql(['Desserts', 'Namen']);
+    });
+  });
+});

package/backend/tests/form-engine/element/select-tree-test.ts

@@ -0,0 +1,121 @@
+/*
+ * 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!
+ */
+
+// Imported for its side effect, the module registers the custom element used below
+import '@typo3/backend/form-engine/element/select-tree.js';
+import type { SelectTree } from '@typo3/backend/form-engine/element/select-tree.js';
+import type { TreeNodeInterface } from '@typo3/backend/tree/tree-node.js';
+import { expect } from '@open-wc/testing';
+import type { } from 'mocha';
+
+describe('@typo3/backend/form-engine/element/select-tree', () => {
+  let tree: SelectTree;
+
+  const createNode = (identifier: string, name: string, parents: string[]): TreeNodeInterface => {
+    return <TreeNodeInterface><unknown>{
+      identifier,
+      name,
+      parents,
+      depth: parents.length,
+      __parents: parents,
+      __treeIdentifier: identifier,
+      __processed: true,
+      __hidden: false,
+      __expanded: false,
+    };
+  };
+
+  beforeEach((): void => {
+    tree = <SelectTree>document.createElement('typo3-backend-form-selecttree');
+    tree.nodes = [
+      createNode('root', 'Root', []),
+      createNode('vanilla', 'Vanille', ['root']),
+      createNode('syrup', 'Sirup (Vanille)', ['root']),
+      createNode('cocoa', 'Kakao', ['root', 'syrup']),
+    ];
+  });
+
+  const visibleNodes = (): string[] => tree.nodes
+    .filter((node: TreeNodeInterface): boolean => node.identifier !== 'root' && !node.__hidden)
+    .map((node: TreeNodeInterface): string => node.name);
+
+  it('matches case insensitively', (): void => {
+    tree.filter('VANILLE');
+    expect(visibleNodes()).to.eql(['Vanille', 'Sirup (Vanille)', 'Kakao']);
+  });
+
+  it('treats regular expression meta characters as literal text', (): void => {
+    tree.filter('(Vanille)');
+    expect(visibleNodes()).to.eql(['Sirup (Vanille)', 'Kakao']);
+  });
+
+  it('does not throw on an unbalanced meta character', (): void => {
+    expect((): void => tree.filter('(')).to.not.throw();
+    expect(visibleNodes()).to.eql(['Sirup (Vanille)', 'Kakao']);
+  });
+
+  it('shows all nodes for an empty search term', (): void => {
+    tree.filter('');
+    expect(visibleNodes()).to.eql(['Vanille', 'Sirup (Vanille)', 'Kakao']);
+  });
+
+  it('hides everything when nothing matches', (): void => {
+    tree.filter('Erdbeere');
+    expect(visibleNodes()).to.eql([]);
+  });
+
+  describe('folding of the search term and the node names', () => {
+    beforeEach((): void => {
+      tree.nodes = [
+        createNode('root', 'Root', []),
+        createNode('creme', 'Crème brûlée', ['root']),
+        createNode('cremeschnitte', 'Cremeschnitte', ['root']),
+        createNode('strasse', 'Straße', ['root']),
+      ];
+    });
+
+    it('matches a name with diacritics when they are not typed', (): void => {
+      tree.filter('creme');
+      expect(visibleNodes()).to.eql(['Crème brûlée', 'Cremeschnitte']);
+    });
+
+    it('matches a name without diacritics when they are typed', (): void => {
+      tree.filter('crèm');
+      expect(visibleNodes()).to.eql(['Crème brûlée', 'Cremeschnitte']);
+    });
+
+    it('matches a Latin letter that does not decompose by its ASCII spelling', (): void => {
+      tree.filter('strasse');
+      expect(visibleNodes()).to.eql(['Straße']);
+    });
+
+    it('ignores a character the reader cannot see in the name', (): void => {
+      tree.nodes = [
+        createNode('root', 'Root', []),
+        createNode('creme', 'Creme\u00adschnitte', ['root']),
+      ];
+      tree.filter('cremeschnitte');
+      expect(visibleNodes()).to.eql(['Creme\u00adschnitte']);
+    });
+
+    it('shows the parents of a node matched without its diacritics', (): void => {
+      tree.nodes = [
+        createNode('root', 'Root', []),
+        createNode('sweets', 'Süßwaren', ['root']),
+        createNode('creme', 'Crème brûlée', ['root', 'sweets']),
+      ];
+      tree.filter('creme');
+      expect(visibleNodes()).to.eql(['Süßwaren', 'Crème brûlée']);
+    });
+  });
+});

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;
+  });
+});